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）