在了解css3動畫屬性之前我們要知道動畫的原理，就是一定時間内播放多張圖檔，也可以說是把整個運動過程分成多份，如下圖，下圖人物從右至左的變化過程即動畫。
動畫屬性：
1.animation-name:設定動畫的名字，指定動畫運動的名稱
[email protected] (關鍵幀):關鍵幀的設定是設定不同階段下特定的CSS樣式的值
文法：@keyframes animationname(動畫名){
from{}
to{}
}
例如:
@keyframes animationname{
from{background:black;}
to{background:red;}
}
from與to分别代表動畫的開始與結束樣式，也可以用0%與100%表示，如：
@keyframes animationname{
0%{background:black;}
100%{background:red;}
}
3.animation-duration：指定動畫播放完成花費的時間
用法：animation-duration：time
4.animation-delay:定義動畫何時開始，值以秒或毫秒div{animation-delay:2s}等待兩秒，然後開始動畫。允許為負值，負數時間使動畫立馬開始，但會跳過負數時間進入動畫。
5.animation-iteration-count(動畫播放次數)，有兩種值，一種為數，一種是infinite。例如：div{animation-iteration-count：3s}播放動畫三次，div{animation-iteration-count：infinite}動畫播放無限次
6.animation-timing-function(動畫速度曲線函數)，屬性值linear(勻速)、ease(預設值，動畫以低速開始，然後加快，在結束前減速)、ease-in(動畫以低速開始，然後加速)、ease-out(動畫以高速開始，然後減速)、ease-in-out(動畫先加速後減速)、三次貝塞爾曲線(速度曲線，可以使用自己的值)
7.animation-fill-mode:規定動畫播放完之前或之後，其動畫效果是否可見，預設情況下，動畫在第一個關鍵幀播放完之前不會影響元素，在最後一個關鍵幀播放完之後停止影響元素。其值有：
(1)none:預設值，動畫執行之前和之後不會應用任何樣式到目标元素。
(2)forwards:在運動結束時，停止在目前位置。
(3)backwards:動畫在延遲的情況下，讓0%在延遲一開始就變效。
(4)both:backwords和forwords同時生效。
8.animation-direction(定義動畫播放的方向)，屬性值有：
(1)normal:預設值，永遠都是正向，從0%到100%；
(2)reverse：動畫永遠都是反向，從100%到0%；
(3)alternate：一次正向從0%到100%一次反向從100%到0%；
m0_46381479
釋出了1 篇原創文章 · 獲贊 1 · 通路量 10
私信
關注
标簽：CSS3,動畫,100%,animation,0%,播放,ease,屬性
來源： https://blog.csdn.net/m0_46381479/article/details/104451035