前端css中animation的使用
一、前言
animation常伴隨著[動(dòng)畫幀]@keyframes一起使用。本文主要說(shuō)明animation都有啥屬性，然后簡(jiǎn)單的進(jìn)行使用。
二、主要內(nèi)容說(shuō)明
animation動(dòng)畫有多個(gè)屬性，每個(gè)屬性也有相應(yīng)相關(guān)的值。另外我們使用過(guò)程中也可以使用簡(jiǎn)便方法，如“animation:”+后面各屬性的值，用空格隔開(kāi)+“；”的形式設(shè)置動(dòng)畫效果。舉例如：animation: box1 3s linear 2s infinite;，表示創(chuàng)建一個(gè)叫box1，持續(xù)時(shí)間3s，開(kāi)始到結(jié)束的動(dòng)畫速度不變，延遲2s后再開(kāi)始，不斷重復(fù)的動(dòng)畫。各值要按排序要求設(shè)置好。
（一）、animation-name（名稱）屬性
animation-name用于定義動(dòng)畫的名稱。當(dāng)我們創(chuàng)建一個(gè)動(dòng)畫時(shí)，給他編輯一個(gè)名稱方便管理些。如某個(gè)動(dòng)畫取名為n，要關(guān)鍵幀@keyframes配合運(yùn)行這個(gè)n動(dòng)畫，則關(guān)鍵幀里需要指定索引這個(gè)名稱n，最后關(guān)鍵幀就可以確定是要進(jìn)行這個(gè)n動(dòng)畫了。當(dāng)然不給@keyframes關(guān)鍵幀指定對(duì)象運(yùn)行動(dòng)畫，他也不懂要運(yùn)行啥。
（二）、animation-duration（持續(xù)時(shí)間）屬性
duration為持續(xù)時(shí)間。那么animation-duration則為定義動(dòng)畫的持續(xù)時(shí)間的屬性，通常以秒(s)或毫秒(ms)為單位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation 動(dòng)畫效果</title>
<style>
/* 定義.box-max類的樣式，設(shè)置盒子的尺寸和背景顏色 */
.box-max {
width: 100px; /* 盒子寬度 */
height: 100px; /* 盒子高度 */
background-color: aqua; /* 盒子背景顏色為水藍(lán)色 */
animation-name: box1; /* 應(yīng)用動(dòng)畫名稱為box1 */
animation-duration: 3s; /* 動(dòng)畫持續(xù)時(shí)間為3秒 */
}
/* 定義名為box1的關(guān)鍵幀動(dòng)畫 */
@keyframes box1 {
0% {
opacity: 1; /* 動(dòng)畫開(kāi)始時(shí)，盒子完全不透明 */
}
100% {
opacity: 0.3; /* 動(dòng)畫結(jié)束時(shí)，盒子透明度為0.3 */
}
}
</style>
</head>
<body>
<!-- 動(dòng)畫作用的元素，帶有描述性文本 -->
<div class="box-max">
我是一個(gè)盒子，名稱為box1，我會(huì)逐漸變透明。
</div>
</body>
</html>
（三）、animation-timing-function屬性
iming（時(shí)序），function（函數(shù)）。animation-timing-function用于控制動(dòng)畫的速度曲線。動(dòng)畫有運(yùn)行的時(shí)段，有些時(shí)段我們想讓它快些，有些時(shí)段我們想讓它慢性，此時(shí)可以根據(jù)需要自己設(shè)置好animation-timing-function的值便可，常用的值有
linear ------ 從頭到尾，動(dòng)畫的運(yùn)行速度相同。
ease ------ 默認(rèn)值，開(kāi)始低速，然后加快，結(jié)束前變慢。
ease-in ------ 低速開(kāi)始，結(jié)束前不斷變快。
ease-out ------ 快速開(kāi)始，結(jié)束前不斷變慢。
ease-in-out ------ 開(kāi)始和結(jié)束時(shí)段是慢速，中間部分速度最快。
cubic-bezier(n,n,n,n) ------ 貝塞爾曲線，可以自己設(shè)置速度曲線
（四）、animation-delay（延遲）屬性
delay（延遲）。顧名思義，animation-delay為延遲的時(shí)間，動(dòng)畫開(kāi)始前的延遲時(shí)間。因?yàn)橛袝r(shí)候我們不需要?jiǎng)赢嬹R上運(yùn)行，需要延遲一定的時(shí)間后再開(kāi)始。單位同樣取秒(s)或毫秒(ms)。
后面的源碼3小盒子在等待期間，它是顯示的，不是透明的狀態(tài)效果，需要等待2s后才開(kāi)始進(jìn)行動(dòng)畫由透明變?yōu)椴煌该?，這里是屬性animation-fill-mode的默認(rèn)值none設(shè)置的作用。后面也會(huì)講到這部分關(guān)于動(dòng)畫前、后的內(nèi)容。
（五）、animation-iteration-count（反復(fù)計(jì)數(shù)）屬性
iteration（反復(fù)），count（計(jì)數(shù)）。animation-iteration-count用于定義動(dòng)畫播放的次數(shù)。一段動(dòng)畫我們?cè)O(shè)置的時(shí)間若有限，想讓動(dòng)畫多運(yùn)行幾次可以用此屬性設(shè)置。取值的方式主要有以下幾種。
整數(shù) ------ 設(shè)置整數(shù)值，如1、2、3，當(dāng)為3時(shí)表示動(dòng)畫重復(fù)運(yùn)行3次。
小數(shù) ------ 設(shè)置小數(shù)，如2.5，那么表示動(dòng)畫重復(fù)2次，第三次進(jìn)行一半。
infinite ------ 取值infinite(無(wú)限的)則重復(fù)運(yùn)行動(dòng)畫
（六）、animation-direction（方向）屬性
direction(方向)，屬性animation-direction用于設(shè)置動(dòng)畫的播放方式，是從頭到尾正向播放，或是從尾到頭的倒放。當(dāng)我們?cè)O(shè)置關(guān)鍵幀，開(kāi)始為0%，結(jié)束為100%的狀態(tài)，正向?yàn)?%到100%的動(dòng)畫變換，反向倒放為100%到0%的動(dòng)畫變換。屬性值主要有下面4個(gè)。
normal ------ 動(dòng)畫正放，動(dòng)畫一周期解釋后重置到開(kāi)始位置。
reverse ------- 動(dòng)畫倒放
alternate ------ 動(dòng)畫在奇數(shù)次正向播放，偶數(shù)次反向播放。如過(guò)一個(gè)動(dòng)畫是持續(xù)播放的，程序剛開(kāi)始動(dòng)畫為第一次，這一次播放完畢便進(jìn)行第二次，以此類推。當(dāng)是奇數(shù)，如1,3,5···時(shí)，動(dòng)畫就正向播放；當(dāng)是偶數(shù)，如2,4,6···時(shí)，動(dòng)畫就反向播放。
alternate-reverse ------ 與alternate屬性相反，動(dòng)畫在奇數(shù)次反向播放，偶數(shù)次正向播放。
animation-fill-mode屬性
animation-fill-mode主要用于定義動(dòng)畫前后的元素狀態(tài)。主要屬性值如下
none ------ 默認(rèn)值，動(dòng)畫不會(huì)對(duì)元素在動(dòng)畫開(kāi)始前或結(jié)束后形式參數(shù)產(chǎn)生任何影響。動(dòng)畫開(kāi)始前，元素顯示css非動(dòng)畫狀態(tài)的形式；動(dòng)畫結(jié)束元素回到動(dòng)畫未運(yùn)行前的初始狀態(tài)。
forwards ------ 動(dòng)畫完成后，元素保持在動(dòng)畫的最后關(guān)鍵幀。就是動(dòng)畫運(yùn)行到哪里，結(jié)束后它就保持在哪里，不會(huì)回初始點(diǎn)了。
backwards ------ 動(dòng)畫開(kāi)始前，元素顯示動(dòng)畫的第一個(gè)關(guān)鍵幀的樣式。當(dāng)我們?cè)O(shè)置一個(gè)盒子，進(jìn)行的動(dòng)畫是剛開(kāi)始開(kāi)始是透明的，后面慢慢變得完全不透明。默認(rèn)情況下，在等待運(yùn)行前，盒子長(zhǎng)啥樣它就顯示啥樣，動(dòng)畫開(kāi)始后才運(yùn)行從透明變?yōu)椴煌该鞯臓顟B(tài)，如源碼3中的小盒子的屬性，小盒子是延遲2s鐘才開(kāi)始運(yùn)行動(dòng)畫，在這2s中的等待期盒子是顯示盒子本身的具體樣子，并不是以透明的狀態(tài)進(jìn)行等待。若要達(dá)到在動(dòng)畫運(yùn)行前的等待期間為透明效果，就可以運(yùn)用backwards的屬性，在動(dòng)畫開(kāi)始前的等待期，它顯示的是第一關(guān)鍵幀的時(shí)候的樣子，也就是透明的樣子。
both ------ 結(jié)合了forwards和backwards的效果。動(dòng)畫開(kāi)始前的等待期他是第一關(guān)鍵幀的樣子，動(dòng)畫結(jié)束后保持在最后結(jié)束時(shí)的模樣，也不會(huì)回到原點(diǎn)了。
（八）、animation-play-state（播放狀態(tài)）屬性
state（狀態(tài)）。animation-play-state用于控制動(dòng)畫的播放狀態(tài)。在動(dòng)畫過(guò)程中我們可以暫停動(dòng)畫，也可以暫停后繼續(xù)運(yùn)行。值主要有兩個(gè)。即running和paused。當(dāng)running時(shí)，動(dòng)畫正常播放。當(dāng)paused時(shí)，動(dòng)畫則停在當(dāng)前幀。
