css animation動畫

css 動畫：

動畫是CSS3中具有顛覆性的特征之一，可通過設置多個節點來精確控制一個或一組動畫，常用來實現復雜的動畫效果.

1. 必要元素：

a、通過@keyframes指定動畫序列；自動補間動畫，確定兩個點，系統會自動計算中間過程。這兩個點就稱為關鍵幀。我們可以設置多個關鍵幀

?b、通過百分比將動畫序列分割成多個節點；

?c、在各節點中分別定義各屬性

?d、通過animation將動畫應用于相應元素；

1. animation樣式常用屬性：

a)?????動畫序列的名稱:animation-name: move;

b)?????動畫的持續時間:animation-duration: 1s;

c)????? 動畫的延時:animation-delay: 1s;

d)????播放狀態:animation-play-state: paused|running;

e)???? 播放速度:animation-timing-function: linear;

f)????? 播放次數 反復:animation-iteration-count: 1;

g)???? 動畫播放完結后的狀態:animation-fill-mode: forwards;

h)???? 循環播放時，交叉動畫:animation-direction: alternate;

代碼說明：

<style>*{padding: 0;margin: 0;}div{width: 300px;height: 300px;margin:100px auto;}div > img{width:100%;}/*添加動畫*/@keyframes rotateAni {0%{/*可以同時對多個屬性添加動畫效果*/transform: rotate(0deg) scale(1);}50%{transform: rotate(180deg) scale(2);}100%{transform: rotate(360deg) scale(1);}}div:hover > img{/*動畫名稱-自定義*/animation-name: rotateAni;/*動畫時間*/animation-duration: 1s;/*動畫速率曲線： linear：勻速  ease：動畫以低速開始，然后加快，在結束前變慢  ease-in：動畫以低速開始  ease-out：動畫以低速結束  ease-in-out：動畫以低速開始和結束*/animation-timing-function: linear;/*動畫播放次數*/animation-iteration-count: 4;/*動畫時間延遲*/animation-delay: 0s;/*動畫播放完的狀態：  forwards:保持動畫播放完畢后的狀態 backwards:退回到原始狀態(默認值)*/animation-fill-mode: forwards;/*動畫是否輪流反射播放：  alternate:在規定的次數內輪流反射播放  normal:正常播放*//*animation-direction: alternate;*/}div:active >img{/*動畫的當前播放狀態：  paused：暫停  running:運行*/animation-play-state: paused;}</style>

?