這篇文章帶給大家的內容是關於css中過渡（transition）的屬性與實現方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
注意：IE9及更早IE版本不支持過渡！ Safari流量器寫法要加-webkit-的前綴等！
一、transition(過渡)是指為了加入滑鼠移到某種元素時，其可以從一種樣式轉變到另一種樣式。
二、實作方法：
1、指定樣式
.panel:target{
margin-top: 0%;
background-color: #ffcb00;
}2、呼叫樣式
.panel{
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;2.指定效果持續時間（時間預設為零，若不指定，則沒有效果）。
三、語法：transition：property duration timing-function delay;
逐項分析每個屬性寫法:
1、transition-property（指定css屬性）:none(沒有屬性會獲得過渡效果);all（默認，所有屬性都將獲得過渡效果）;property（定義應用過渡效果的css屬性名稱列表以逗號分隔）;
2、transition-duration（規定完成過渡效果需要花費的時間）:time（規定完成過渡效果要花的時間，預設為0）；
3、 transition-timing-function（指定切換效果的速度）:linear（規定以相同速度開始至結束的過渡效果）；ease（默認，規定慢速開始然後變快，然後慢速結束的過渡效果） ；ease-in（規定以慢速開始的過渡效果）；ease-out（規定以慢速結束的過渡效果）；ease-in-out（規定以慢速開始和結束的過渡效果）；cubic-bezier （n,n,n,n）(在cubic-bezier函數中定義自己的值，可能的只是0-1之間的數值)
4、transition-delay（指定何時將開始切換效果）:time（指定秒數或毫秒數之前要等待切換效果開始，預設值0）
相關推薦：
##css3中background-orgin的使用方法（附程式碼）
css如何使用opacity屬性為背景圖片加上透明度（程式碼）#
以上是css中過渡（transition）的屬性與實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
