[ animation-delay ]:檢索或設置對象動畫延遲的時間
[ animation-iteration-count ]:檢索或設置物件動畫的迴圈次數
[ animation-direction ]:檢索或設置物件動畫在迴圈中是否反向運動
前三個已經介紹過了,今天要介紹剩下的三個。
CSS範例:http://ashareaday.wcc.tw/#2013-10-19
CSS範例:http://ashareaday.wcc.tw/#2013-10-19
來源:http://css.doyoe.com/
[ animation-delay ]:檢索或設置對象動畫延遲的時間
[ animation-iteration-count ]:檢索或設置物件動畫的迴圈次數
[ animation-direction ]:檢索或設置物件動畫在迴圈中是否反向運動
前三個已經介紹過了,今天要介紹剩下的三個,而以下範例都是用相同的keyframes作介紹,僅調整animation的屬性。
+keyframes(ifinityCircles)
from
+transform(rotate(0))
to
+transform(rotate(360deg))
Delay
如同字義的意思,就是延遲撥放動畫,有些時候可以用這效果讓多個動畫做出層次感。
+animation(ifinityCircles 3s) //沒有delay
+animation(ifinityCircles 3s 1.5s) //第二個秒數設定,會被判定為delay
Iteration-count
動畫重複的次數,預設值是1次,如果要多次直接輸入次數即可,而無限次數就要輸入infinite。
+animation(ifinityCircles 1.5s 2) //重複2次
+animation(ifinityCircles 1.5s infinite) //重複無限次
Direction
決定動畫順轉或是逆轉的模式,這邊的範例用無限次撥放比較好說明。
+animation(ifinityCircles 1.5s reverse infinite) //一直保持逆轉的模式
+animation(ifinityCircles 1.5s alternate-reverse infinite) //先逆轉,然後再順轉回去
+animation(ifinityCircles 1.5s alternate infinite) //首先是順轉,會在逆轉回去