Animation動畫

格式

<single-animation>: name duration [timing-function] [delay] [iteration-count] [direction] [play-state] [fill-mode];

animation:名稱 執行時間 速度曲線 延遲時間 循環次數 是否反向 執行狀態 動畫對象動畫時間之外的狀態

解釋

animation-name: 動畫名稱 none：不引用任何動畫名稱

animation-duration: 動畫執行時間 (單位：s ms)

animation-delay: 動畫效果延遲時間(單位：s ms)

animation-timing-function: 動畫速度曲線,同 transition-timing-function linear ease （默認） ease-in ease-out ease-in-out cubic-bezier()

animation-iteration-count: 動畫執行循環次數 infinite 無限次 | <number>（默認 1）

animation-direction: 動畫是否反向運動 normal： （默認） 正常方向 reverse： 反方向運行 alternate： 動畫先正後反方向運行 alternate-reverse： 先反後正方向運行

animation-play-state: 動畫執行狀態 running：運動（默認） paused：暫停

animation-fill-mode: 動畫對象動畫時間之外的狀態 none：（默認值） 不設置對象動畫之外的狀態 【對象原始狀態】>動畫>【對象原始狀態】 forwards： 設置對象狀態【對象原始狀態】為動畫開始時的狀態 backwards： 設置對象狀態【對象原始狀態】為動畫結束時的狀 both： 設置對象狀態為 動畫開始為開始 動畫結束為結束 （忽略原始狀態）

@keyframes: animationname { keyframes-selector { css-styles } } animationname animation的名稱。

keyframes-selector 動畫時間的百分比。 合法值： 0-100% from (和0%相同) to (和100%相同) 您可以用一個動畫keyframes-selectors。

css-styles 一個或多個合法的CSS樣式屬性

例如：

animation：run 20s linear infinite；
@keyframes run { 
　　10%{width:500px,background:red;} 
　　20%{width:500px,background:red;}
 }

兼容性

IE10,[email protected]

IE9及更早版本，[email protected]

animation:run 5s;
-moz-animation:runt 5s; /* Firefox */
-webkit-animation:runt 5s; /* Safari and Chrome */
-o-animation:runt 5s; /* Opera */

@keyframes run
@-moz-keyframes runt /* Firefox */
@-webkit-keyframes runt /* Safari and Chrome */
@-o-keyframes run /* Opera */

Animation動畫