通過之前的學習我們知道，利用 transition 屬性可以實現(xiàn)簡單的過渡動畫，但過渡動畫僅能指定開始和結(jié)束兩個狀態(tài)，整個過程都是由特定的函數(shù)來控制的，不是很靈活。本節(jié)我們再來介紹一種更為復雜的動畫 —— animation。
動畫（animation）：和過渡類似，都是可以實現(xiàn)一些動態(tài)的效果，不同的是過渡需要在某個屬性發(fā)生變化時才可以觸發(fā)，而動畫效果則可以自動觸發(fā)動態(tài)效果。設(shè)置動畫效果必須先要設(shè)置一個關(guān)鍵幀，關(guān)鍵幀設(shè)置了動畫執(zhí)行的每一個步驟。關(guān)鍵幀設(shè)置的格式如下：
<style>
/* 定義動畫關(guān)鍵幀，關(guān)鍵幀的名字為test */
@keyframes test{
/* from表示動畫的開始位置，也可以使用0%來表示。 */
from{
margin-left: 0;
}
/* to表示動畫的結(jié)束位置，也可以使用100%來表示。 */
to{
margin-left: 100%;
}
}
</style>CSS 中的動畫類似于 flash 中的逐幀動畫，表現(xiàn)細膩并且非常靈活，使用 CSS 中的動畫可以取代許多網(wǎng)頁中的動態(tài)圖像、Flash 動畫或者 JavaScript 實現(xiàn)的特殊效果。
動畫就是使元素從一種樣式逐漸變化為另一種樣式的效果。我們可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)（很官方的回答）。
CSS3animation（動畫）屬性。
@keyframes
通過 @keyframes 規(guī)則，我們可以創(chuàng)建動畫。
創(chuàng)建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。在動畫過程中我們能夠多次改變這套 CSS 樣式。以百分比來規(guī)定改變發(fā)生的時間，或者通過關(guān)鍵詞 “from” 和 “to”，等價于 0% 和 100%。
0% 是動畫的開始時間，100% 動畫的結(jié)束時間。為了獲得最佳的瀏覽器支持，我們應(yīng)該始終定義 0% 和 100% 選擇器。這里面0%就是一幀，50%是一幀，100%也是一幀。
最后，請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定
animationname 必需。定義動畫的名稱。
keyframes-selector 必需。動畫時長的百分比 合法的值： 0-100% from（與 0% 相同） to（與 100% 相同）
css-styles 必需。一個或多個合法的 CSS 樣式屬性
舉個例子：
@keyframes name
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}1. animation-name屬性：設(shè)置需要綁定到元素的動畫名稱。
animation-name 屬性用來將動畫綁定到指定的 HTML 元素，屬性的可選值如下：
| 值 | 描述 |
| keyframename | 要綁定到 HTML 元素的動畫名稱，可以同時綁定多個動畫，動畫名稱之間使用逗號進行分隔 |
| none | 表示無動畫效果， |
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes ball {
0% { top: 0px; left: 0px;}
25% { top: 0px; left: 350px;}
50% { top: 200px; left: 350px;}
75% { top: 200px; left: 0px;}
100% { top: 0px; left: 0px;}
}
div {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid black;
position: relative;
animation-name: ball;
}
</style>
</head>
<body>
<div></div>
</body>
</html>運行結(jié)果：
注意：要想讓動畫成功播放，您還需要定義 animation-duration 屬性，否則會因為 animation-duration 屬性的默認值為 0，導致動畫并不會播放。
2. animation-duration屬性：定義動畫完成一個周期需要多少秒或毫秒。
● time：指定動畫播放完成花費的時間。默認值為 0， 意味著沒有動畫效果。
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes ball {
0% { top: 0px; left: 0px;}
25% { top: 0px; left: 350px;}
50% { top: 200px; left: 350px;}
75% { top: 200px; left: 0px;}
100% { top: 0px; left: 0px;}
}
div {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid black;
position: relative;
animation-name: ball;
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>3. animation-timing-function：使用的數(shù)學函數(shù)，稱為三次貝塞爾曲線、速度曲線。使用此函數(shù)，你可以使用自己的值，或使用預先定義的值之一。
● linear：動畫從頭到尾的速度是相同的；
● ease：默認。動畫從低開始，然后加快，在結(jié)束之前變慢；
● ease-in：動畫以低速開始；
● ease-out：動畫以低速結(jié)束；
● ease-in-out：動畫以低速開始和結(jié)束；
● cubic-bezier（n,n,n,n）：使用 cubic-bezier() 函數(shù)來定義動畫的播放速度，參數(shù)的取值范圍為 0 到 1 之間的數(shù)值。
4. animation-delay屬性：定義動畫什么時候開始。
● time：可選。定義動畫開始前等待的時間，以秒或毫秒計。默認值為0。
注意：單位可以說秒（s）或毫秒（ms）。
5. animation-iteration-count屬性：定義動畫應(yīng)該播放多少次。
屬性的可選值如下：
| 值 | 描述 |
| n | 使用具體數(shù)值定義動畫播放的次數(shù)，默認值為 1 |
| infinite | 表示動畫無限次播放 |
6. animation-direction屬性：定義是否循環(huán)交替反向播放動畫。
● normal：默認值。動畫正常播放；
● reverse：動畫反向播放；
● alternate：動畫在奇數(shù)次（1、2、5…）正向播放，在偶數(shù)次（2、4、6…）反向播放；
● alternate-reverse：動畫在奇數(shù)次（1、3、5…）反向播放，在偶數(shù)次（2、4、6…）正向播放。
7. animation-fill-mode 屬性：規(guī)定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應(yīng)用到元素的樣式。
注意：默認情況下，CSS 動畫在第一個關(guān)鍵幀播放完之前不會影響元素，在最后一個關(guān)鍵幀完成后停止影響元素。animation-fill-mode 屬性可重寫該行為。
● none 默認值。：動畫在動畫執(zhí)行之前和之后不會應(yīng)用任何樣式到目標元素；
● forwards：在動畫結(jié)束后（由 animation-iteration-count 決定），動畫將應(yīng)用該屬性值；
● backwards ：動畫將應(yīng)用在 animation-delay 定義期間啟動動畫的第一次迭代的關(guān)鍵幀中定義的屬性值。這些都是 from 關(guān)鍵幀中的值（當 animation-direction 為 “normal” 或 “alternate” 時）或 to 關(guān)鍵幀中的值（當 animation-direction 為 “reverse” 或 “alternate-reverse” 時）；
● both 動畫遵循 forwards 和 backwards 的規(guī)則。也就是說，動畫會在兩個方向上擴展動畫屬性。
8. animation-play-state：指定動畫是否正在運行或已暫停。
● paused：指定暫停動畫；
● running：指定正在運行的動畫。
9. initial：設(shè)置屬性為其默認值。
● initial：關(guān)鍵字用于設(shè)置 CSS 屬性為它的默認值；
● initial：關(guān)鍵字可用于任何 HTML 元素上的任何 CSS 屬性。
10. inherit：從父元素繼承屬性。
● inherit：關(guān)鍵字指定一個屬性應(yīng)從父元素繼承它的值；
● inherit：關(guān)鍵字可用于任何 HTML 元素上的任何 CSS 屬性。
animation
animation 屬性是 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state 幾個屬性的簡寫形式，通過 animation 屬性可以同時定義上述的多個屬性，語法格式如下：
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
其中每個參數(shù)分別對應(yīng)上面介紹的各個屬性，如果省略其中的某個或多個值，則將使用該屬性對應(yīng)的默認值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>動畫</title>
<style>
.box1{
width: 700px;
height: 500px;
background-color: silver;
}
.box2{
width: 100px;
height: 100px;
background-color: #bfa;
margin-left: 10px;
/* animation-name: test; */
/* animation-duration: 4s; */
/* animation-timing-function: linear; */
/* animation-iteration-count: 4; */
/* animation-direction: alternate; */
/* animation-fill-mode: backwards; */
/* animation-delay: 2s; */
animation: test 2s linear 1s 4 alternate;
}
/* 定義動畫關(guān)鍵幀，關(guān)鍵幀的名字為test */
@keyframes test{
/* from表示動畫的開始位置，也可以使用0%來表示。 */
from{
margin-left: 50px;
background-color: orange;
}
/* to表示動畫的結(jié)束位置，也可以使用100%來表示。 */
to{
margin-left: 600px;
background-color: yellow;
}
}
/* 控制動畫的運行 */
/* .box1:hover .box2{
animation-play-state: paused;
} */
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>C語言網(wǎng)提供由在職研發(fā)工程師或ACM藍橋杯競賽優(yōu)秀選手錄制的視頻教程，并配有習題和答疑，點擊了解：
一點編程也不會寫的：零基礎(chǔ)C語言學練課程
解決困擾你多年的C語言疑難雜癥特性的C語言進階課程
從零到寫出一個爬蟲的Python編程課程
只會語法寫不出代碼？手把手帶你寫100個編程真題的編程百練課程
信息學奧賽或C++選手的 必學C++課程
藍橋杯ACM、信息學奧賽的必學課程：算法競賽課入門課程
手把手講解近五年真題的藍橋杯輔導課程