iT邦幫忙

DAY 34
5

CSS沒有極限系列 第 30

Animation 的各項設定值(2)

  • 分享至 

  • xImage
  •  

[ 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) //首先是順轉,會在逆轉回去

上一篇
Animation 的各項設定值(1)
下一篇
CSS3 垂直文字書寫
系列文
CSS沒有極限41
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言