概述
CSS 動(dòng)畫(huà)與過(guò)渡的相同點(diǎn)是CSS屬性都在一段時(shí)間內(nèi)發(fā)生變化傀顾，而不同點(diǎn)就是動(dòng)畫(huà)對(duì)變化的方式有更多的選擇和控制碌奉。尤其是通過(guò)關(guān)鍵幀實(shí)現(xiàn)的CSS動(dòng)畫(huà)能設(shè)定是否以及如何重復(fù)動(dòng)畫(huà)寒砖，還能深度控制整個(gè)動(dòng)畫(huà)的過(guò)程嫉拐。
1. 定義關(guān)鍵幀
幀哩都，就是動(dòng)畫(huà)中最小單位的單幅影像畫(huà)面婉徘，相當(dāng)于電影膠片上的每一格鏡頭。關(guān)鍵幀判哥，相當(dāng)于二維動(dòng)畫(huà)里的原畫(huà)碉考。指的就是角色或者物體運(yùn)動(dòng)或變化時(shí)關(guān)鍵動(dòng)作所處的那一幀，關(guān)鍵幀與關(guān)鍵幀之間的每幅圖像就可以由軟件來(lái)創(chuàng)建侯谁。
若想為元素添加動(dòng)畫(huà)效果，就必須得有一個(gè)關(guān)鍵幀热芹，而這又要求又一個(gè)具名關(guān)鍵幀動(dòng)畫(huà)惨撇。首先要使用 @keyframes 規(guī)則定義可以復(fù)用的CSS關(guān)鍵幀動(dòng)畫(huà)伊脓，并為動(dòng)畫(huà)起個(gè)名魁衙。然后，通過(guò)這個(gè)名稱添加到對(duì)應(yīng)的元素上剖淀。
1.1 設(shè)置關(guān)鍵幀動(dòng)畫(huà)
創(chuàng)建動(dòng)畫(huà)的第一步是使用 @keyframes 為動(dòng)畫(huà)起一個(gè)名稱，并在一對(duì)花括號(hào) {} 中定義關(guān)鍵幀翻诉。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="css" cid="n10" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">@keyframes pao {
...
關(guān)鍵幀選擇符
}</pre>
在命名動(dòng)畫(huà)時(shí)要留意捌刮，取名盡量不要帶有特殊字符，可以下劃線和連字符 - 绅作，但是不能以數(shù)字開(kāi)頭。另外棚蓄，不要使用 none paused running infinite backwards forwards 碍脏，因?yàn)檫@些是動(dòng)畫(huà)中的一些控制屬性稍算，如果在簡(jiǎn)寫(xiě)的 animation 屬性中取名帶有這些，可能會(huì)導(dǎo)致動(dòng)畫(huà)失效糊探。
1.2 關(guān)鍵幀選擇符
關(guān)鍵幀選擇符知名聲明的屬性值應(yīng)用到動(dòng)畫(huà)的哪個(gè)時(shí)間點(diǎn)，即動(dòng)畫(huà)播放到某個(gè)時(shí)刻科平，希望這個(gè)時(shí)刻的值是什么屬性。如果想設(shè)置動(dòng)畫(huà)開(kāi)頭的值髓考，就可以在 0% 記號(hào)處聲明，如果想在動(dòng)畫(huà)結(jié)尾氨菇，那就是 100% 妓湘。
可以是關(guān)鍵字 from 和 to 查蓉，另一種就是百分?jǐn)?shù)榜贴。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="css" cid="n15" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">@keyframes pao {
from {
left: 0;
top: 0;
}
to {
right: 0;
bottom: 0;
}
}</pre>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="css" cid="n16" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">@keyframes pao {
0% {
left: 0;
top: 0;
}
25% {
left: 100px;
top: 300px;
}
50% {
left: 500px;
top: 500px;
}
100% {
right: 0;
bottom: 0;
}
}</pre>
如果某一些時(shí)刻的屬性值是相同的唬党，那關(guān)鍵幀可以通過(guò)逗號(hào)隔開(kāi)來(lái)一起書(shū)寫(xiě)
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="css" cid="n18" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">@keyframes pao {
0% {
left: 0;
}
25%,75% {
top: 500px;
}
100% {
right: 0;
}
}</pre>
2. 將動(dòng)畫(huà)作用在元素上
定義好動(dòng)畫(huà)關(guān)鍵幀后，我們可以通過(guò)CSS相關(guān)的屬性初嘹，來(lái)將動(dòng)畫(huà)依附到元素身上，并且控制動(dòng)畫(huà)的播放過(guò)程坷随。如果要想動(dòng)畫(huà)效果能顯示出來(lái)，必須要指明動(dòng)畫(huà)的名字温眉、動(dòng)畫(huà)的時(shí)間翁狐。
2.1 指定動(dòng)畫(huà)的名稱
animation-name 屬性的值就是在 @keyframes 聲明的名字类溢，它可以添加多個(gè)動(dòng)畫(huà)，每個(gè)動(dòng)畫(huà)用逗號(hào)隔開(kāi)砂心。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="css" cid="n24" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">animation-name: pao, pao1, pao2;</pre>
它的默認(rèn)值為 none 蛇耀，表示沒(méi)有動(dòng)畫(huà)效果。
2.2 定義動(dòng)畫(huà)的時(shí)長(zhǎng)
animation-duration 屬性定義動(dòng)畫(huà)迭代一次用時(shí)多久纺涤，單位為秒（s）或者毫秒（ms）。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="css" cid="n28" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">animation-duration: 1s | .5s | 500ms ;</pre>
2.3 聲明動(dòng)畫(huà)的迭代次數(shù)
有了上面兩個(gè)聲明外永，整個(gè)動(dòng)畫(huà)已經(jīng)能跑起來(lái)了。但是如果需要?jiǎng)赢?huà)連續(xù)播放好幾次伯顶，或者無(wú)數(shù)次，則可以通過(guò)迭代次數(shù)來(lái)控制它。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="css" cid="n31" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">animation-iteration-count: <number> | infinite;</pre>
2.4 設(shè)置動(dòng)畫(huà)的播放方向
按照正常人的思維谭网，動(dòng)畫(huà)正常播放應(yīng)該是從 0 到 100%。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="css" cid="n34" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">animation-direction: normal | reverse | alternate | alternate-reverse;</pre>
normal：默認(rèn)值愉择，動(dòng)畫(huà)每次迭代都從 0% 到 100% 關(guān)鍵幀播放织中；
reverse：動(dòng)畫(huà)每次迭代都從 100% 到 0% 播放；
alternate：交替迭代狭吼，第一次以normal播放，第二次以reverse播放刁笙，然后交替循環(huán)下去；
alternate-reverse：逆序交替迭代疲吸，第一次以reverse播放，第二次以normal播放峭梳。
2.5 設(shè)置動(dòng)畫(huà)的延時(shí)
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="css" cid="n45" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">animation-delay: <time>;</pre>
它的屬性值單位為秒（s）或者毫秒（ms）蹂喻，在默認(rèn)情況下為0葱椭。
2.6 設(shè)置動(dòng)畫(huà)的頻率
這個(gè)和過(guò)渡的transition-timing-function 非常的類似，它也能指明動(dòng)畫(huà)在一次循環(huán)迭代中如何過(guò)渡演進(jìn)挫以。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="css" cid="n49" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | steps() | cubic-bezier();</pre>
2.6.1 貝塞爾曲線
2.7 動(dòng)畫(huà)的播放狀態(tài)
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="css" cid="n53" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">animation-play-state: running | paused;</pre>
2.8 動(dòng)畫(huà)的填充模式
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="css" cid="n55" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">animation-fill-mode: none | forwards | backwards | both;</pre>
forwads：在動(dòng)畫(huà)播放結(jié)束后掐松，即
animation-iteration-count設(shè)定的迭代次數(shù)全部結(jié)束，結(jié)尾時(shí)的動(dòng)畫(huà)屬性將繼續(xù)作用在元素上抡句；backwards：如果存在
animation-delay時(shí)，0% 或 100% 關(guān)鍵幀定義的屬性會(huì)立馬作用到元素上待榔，而不會(huì)等待animation-delay結(jié)束才作用上去；both：上面兩種效果都存在锐锣。
2.9 簡(jiǎn)寫(xiě)屬性
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="css" cid="n64" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">animation: <animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-diretion> || <animation-fill-mode> || <animation-play-state>;</pre>
舉個(gè)例子：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="css" cid="n66" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">animation: pao 2s ease-in-out .5s infinite paused;</pre>
這段代碼的意思就是該元素使用名為 pao 的動(dòng)畫(huà)绳瘟，動(dòng)畫(huà)時(shí)長(zhǎng)為2秒，采用慢快慢點(diǎn)過(guò)渡方式糖声，延時(shí)時(shí)間為0.5秒，動(dòng)畫(huà)播放次數(shù)為無(wú)數(shù)次蘸泻，開(kāi)始播放的狀態(tài)為暫停。
3. 逐幀動(dòng)畫(huà)
在 animation-timing-function 中存在這個(gè)屬性值悦施，一個(gè)從來(lái)沒(méi)有見(jiàn)過(guò)的 —— steps() 。與其叫屬性拜马，它更準(zhǔn)確的叫法是步進(jìn)時(shí)序函數(shù)。這個(gè)函數(shù)更適合用在小人動(dòng)畫(huà)上俩莽。Steps() 時(shí)序函數(shù)會(huì)把動(dòng)畫(huà)分成一系列登場(chǎng)的步幅。
步進(jìn)函數(shù)的第一個(gè)參數(shù)扮超，必須是一個(gè)正整數(shù)。例如出刷，一段動(dòng)畫(huà)的持續(xù)時(shí)間為1秒，步數(shù)為10馁龟，那么動(dòng)畫(huà)就會(huì)分10步去完成，每一步時(shí)長(zhǎng)為100毫秒坷檩。
為了更好的理解，可以拿翻書(shū)來(lái)舉例矢炼。書(shū)的每一頁(yè)中都會(huì)有一張圖，每張圖之間都有細(xì)微的差異句灌，在快速翻頁(yè)過(guò)程中，圖像的變化就類似動(dòng)畫(huà)的效果胰锌。使用一個(gè)子圖集，配合上 background-pisition 就可以實(shí)現(xiàn)動(dòng)畫(huà)效果了资昧。
要實(shí)現(xiàn)一個(gè)逐幀動(dòng)畫(huà)，首先要?jiǎng)?chuàng)建一個(gè)容器元素榛搔，把尺寸設(shè)置為每一幀所在圖像的大卸А（也就是每個(gè)小圖像的尺寸）。
