動畫：是CSS3中具有顛覆性的特征之一，可通過設置多個節點來精確控制一個或一組動畫，常用來實現復雜的動畫效果；.
- 必要元素：
a、通過@keyframes指定動畫序列；自動補間動畫，確定兩個點，系統會自動計算中間過程。這兩個點就稱為關鍵幀。我們可以設置多個關鍵幀
b、通過百分比將動畫序列分割成多個節點；
c、在各節點中分別定義各屬性
d、通過animation將動畫應用於相應元素；
- 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>
<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>