css3動畫transition animation

CSS動畫簡介  transition   animation

　　transition過渡：css3經過transitions屬性引入時間概念，經過開始、結束狀態自動計算中間狀態，實現狀態改變的過渡效果。

　　　　transition-property：應用過渡的css屬性

　　　　transition-duration：過渡效果話費的時間

　　　　transition-timing-function：過渡效果的時間曲線（狀態變化速度）

　　　　　　ease（默認，逐漸變慢）、linear、ease-in（加速）、ease-out（減速）、cubic-bezier函數（三次貝塞爾曲線），自定義速度模式

　　　　　　　　cubic-bezier三次貝塞爾曲線

　　　　transition-delay：過渡效果什麼時候開始（秒、毫秒）

　　　　

三次貝塞爾曲線是一個好的模型用於簡單描述速率曲線，如chrome Dev-tools下圖　　　　　

 　　css3 transitions 瀏覽器支持狀況 Can i use  IE10+支持無前綴的transition屬性

　　　　    

　　 　　使用注意：　　

　　　　　　不是全部CSS屬性都支持transition

　　　　　　transition需明確知道開始、結束狀態的具體數值，才能計算出中間狀態。

　　　　　　eg，height從0px到auto的中間狀態，display:none到block，background:url(foo.jpg)到url(bar.jpg)

　　　　transition使用侷限

　　　　　　transition需事件觸發，沒法在網頁加載時自動發生。

　　　　　　transition是一次性的，不能重複發生，除非一再觸發

　　　　　　transiton只能定義開始和結束狀態，不能定義中間狀態。

　　animation：

　　　　@keyframes 建立動畫的關鍵幀（動畫名稱、動畫時長百分比）

　　　　　　@keyframes myAnimation
　　　　　　{

　　　　　　　　from　　{ background: red;}
　　　　　　　　50%　　{ background: green; }
　　　　　　　　100%　　{ background: blue; }

　　　　　　}

　　　　animation：全部動畫屬性的簡寫屬性

　　　　animation-name：引用的@keyframes建立的動畫的名稱

　　　　animation-duration、animation-timing-function、animation-delay、

　　　　animation-iteration-count：數字/infinite|（默認1）、animation-direction：normal/alternate（動畫是否在下一週期逆向地播放）

　　　　animation-play-state：paused/running（默認），

　　　　animation-fill-mode：none（默認）/forwards/backwards/both，　動畫結束後會當即從結束狀態跳回起始狀態，

　　　　　　　　none（默認），回到動畫沒開始時的狀態

　　　　　　　　forwards讓動畫停留在結束狀態、

　　　　　　　　backwards回到第一幀狀態

　　　　　　　　both向前向後填充模式都被應用

　　　　注意：瀏覽器從一個狀態向另外一個狀態過渡是平滑過渡。steps函數可實現分佈過渡

　　　　　　eg  div:hover { animation: 1s rainbow infinite steps(10) }//可實現字體打印效果