2017年3月15日 星期三

CSS animations

CSS animations 使 CSS style configuration 的轉變變得可行。在這種動畫的運作上,你只需要定義兩個部份:1. 動畫的最初及結尾 2. 動畫轉變的方式。

animation property 的 sub-properties:

animation-delay
定義元素讀取完畢到動畫開始的間隔時間。

animation-direction
定義是否動畫播放完畢後將會反向播放。

animation-duration
定義動畫完成一次週期的時間。

animation-iteration-count
定義動畫重複的次數。你可以用 infinite 來讓動畫永遠重複播放。

animation-name
定義關鍵影格 @keyframes 的名字。

animation-play-state
控制動畫的播放狀態。有 pause 和 running 兩種值,後者為預設值。

animation-timing-function
定義動畫轉變時時間的加速曲線 (例如 linear)。

animation-fill-mode
定義元素在動畫播放外(動畫開始前及結束後)的狀態。


出處:CSS 動畫
延伸閱讀:CSS3中的動畫效果記錄
實作:http://codepen.io/Cmi/pen/KWvErL