css中過渡（transition）的屬性與實作方法

這篇文章帶給大家的內容是關於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中文網其他相關文章！