CSS3動(dòng)畫(huà)
在CSS3中，animation屬性用于實(shí)現(xiàn)元素的動(dòng)畫(huà)。
animation屬性跟transition屬性在功能實(shí)現(xiàn)上是非常相似的，都是通過(guò)改變?cè)氐膶傩灾祦?lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。但是，這兩者實(shí)際上有著本質(zhì)的區(qū)別
- 對(duì)于transition屬性來(lái)說(shuō)，它只能將元素的某一個(gè)屬性從一個(gè)屬性值過(guò)渡到另一個(gè)屬性值
- 對(duì)于animation屬性來(lái)說(shuō)，它可以將元素的某一個(gè)屬性從第1個(gè)屬性值過(guò)渡到第2個(gè)屬性值，然后還可以繼續(xù)過(guò)渡到第3個(gè)屬性值，以此類(lèi)推。
從以上推斷出：transition屬性（即CSS3過(guò)渡）只能實(shí)現(xiàn)一次性的動(dòng)畫(huà)效果，而animation屬性（即CSS3動(dòng)畫(huà)）可以實(shí)現(xiàn)連續(xù)性的動(dòng)畫(huà)效果。
CSS3中的animation屬性就是為了解決這些問(wèn)題而提出的。animation屬性可以通過(guò)控制關(guān)鍵幀來(lái)控制動(dòng)畫(huà)的每一步，從而實(shí)現(xiàn)更為復(fù)雜的動(dòng)畫(huà)效果。
使用animation屬性實(shí)現(xiàn)CSS3動(dòng)畫(huà)需要兩步
- 定義動(dòng)畫(huà)：用@keyframes規(guī)則來(lái)定義動(dòng)畫(huà)的樣式
- 調(diào)用動(dòng)畫(huà)：用animation屬性來(lái)調(diào)用@keyframes規(guī)則定義的動(dòng)畫(huà)
使用@keyframes規(guī)則創(chuàng)建動(dòng)畫(huà)
概念：在CSS3中，使用@keyframes規(guī)則來(lái)創(chuàng)建動(dòng)畫(huà)。創(chuàng)建動(dòng)畫(huà)是指從一個(gè)CSS樣式到另一個(gè)CSS樣式逐步變化而產(chǎn)生動(dòng)畫(huà)效果的過(guò)程。在創(chuàng)建動(dòng)畫(huà)中，可以多次更改CSS樣式的設(shè)定。
一個(gè)動(dòng)畫(huà)由很多畫(huà)面組成，每一個(gè)畫(huà)面叫做一幀。其中，角色或者物體運(yùn)動(dòng)變化的關(guān)鍵動(dòng)作所處的幀叫做關(guān)鍵幀。創(chuàng)建動(dòng)畫(huà)必須定義關(guān)鍵幀。
語(yǔ)法：
@keyframes animation_name{
keyframes-selector{css-styles;}
}
屬性值說(shuō)明
| 屬性值 | 說(shuō)明 |
|---|---|
| animation | 當(dāng)前動(dòng)畫(huà)的名稱(chēng)，它將作為引用該動(dòng)畫(huà)時(shí)的唯一標(biāo)識(shí)，因此不能為空 |
| keyframes-selector | 關(guān)鍵幀選擇器，指定當(dāng)前關(guān)鍵幀在整個(gè)動(dòng)畫(huà)過(guò)程中的位置，其值可以是from和to,或者百分比。其中,from和0%效果相同（表示動(dòng)畫(huà)的開(kāi)始），to和100%效果相同（表示動(dòng)畫(huà)的結(jié)束） |
| css-style | 定義執(zhí)行到當(dāng)前關(guān)鍵幀時(shí)對(duì)應(yīng)的動(dòng)畫(huà)狀態(tài)，由CSS樣式屬性進(jìn)行定義，多個(gè)屬性之間用分號(hào)（;）分隔，且屬性不能為空。 |
實(shí)例：僅定義開(kāi)頭和結(jié)尾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>@keyframes創(chuàng)建動(dòng)畫(huà)</title>
<style>
*{
padding:0;
margin:0;
}
div{
width:200px;
height:150px;
margin:20px auto;
border-radius:20px;
background-color:blueviolet;
}
/* 定義動(dòng)畫(huà) */
@keyframes colorChange{
0%{
background-color:blueviolet;
}
100%{
background-color:greenyellow;
}
}
/* 調(diào)用動(dòng)畫(huà)，這里可以先看后面 */
div:hover{
animation:colorChange 2s linear 0s 5 normal;
}
</style>
</head>
<body>
<div class="a"></div>
</body>
</html>
運(yùn)行結(jié)果
實(shí)例:定義多個(gè)關(guān)鍵幀
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>@keyframes創(chuàng)建動(dòng)畫(huà)</title>
<style>
*{
padding:0;
margin:0;
}
div{
width:200px;
height:150px;
margin:20px auto;
border-radius:50%;
background-color:darkblue;
cursor:pointer;
}
/* 定義動(dòng)畫(huà) */
@keyframes colorChange{
0%{
background-color:darkblue;
}
25%{
background:radial-gradient(circle at top,orange 20%,yellow 40%);
}
50%{
background:radial-gradient(circle at center,orange 20%,yellow 40%);
}
75%{
background:radial-gradient(circle at bottom,orange 20%,yellow 40%);
}
100%{
background-color:red;
}
}
/* 調(diào)用動(dòng)畫(huà) */
div:hover{
animation:colorChange 5s linear;
}
</style>
</head>
<body>
<div class="a"></div>
</body>
</html>
運(yùn)行結(jié)果
@keyframes其中的百分比是“持續(xù)時(shí)間”。在實(shí)例:定義多個(gè)關(guān)鍵幀中，定義持續(xù)時(shí)間為5s，則0%指的是0s時(shí)，25%指的是1.25s,50%指的是2.5s,75%指的是3.75s,100%指的是5s.
使用animation屬性調(diào)用動(dòng)畫(huà)
概念：CSS3中的animation屬性用于調(diào)用由@keyframes規(guī)則創(chuàng)建的動(dòng)畫(huà)。
animation屬性是一個(gè)復(fù)合屬性，主要包括6個(gè)子屬性。
| 屬性值 | 說(shuō)明 |
|---|---|
| animation-name | 對(duì)于指定CSS屬性進(jìn)行進(jìn)行操作 |
| animation-duration | 動(dòng)畫(huà)的持續(xù)時(shí)間 |
| animation-timing-function | 動(dòng)畫(huà)的速率變化方式 |
| animation-delay | 動(dòng)畫(huà)的延遲時(shí)間 |
| animation-iteration-count | 動(dòng)畫(huà)的播放次數(shù) |
| animation-direction | 動(dòng)畫(huà)的播放方向，正向還是反向 |
動(dòng)畫(huà)名稱(chēng):animation-name
概念：animation-name屬性用于定義要調(diào)用的由@keyframes規(guī)則創(chuàng)建的動(dòng)畫(huà)名稱(chēng)。調(diào)用多個(gè)動(dòng)畫(huà)名稱(chēng)要以逗號(hào)隔開(kāi)。
語(yǔ)法：
anination-name:keyframename|none;
屬性值
| 屬性值 | 說(shuō)明 |
|---|---|
| none | 默認(rèn)值，表示不應(yīng)用任何動(dòng)畫(huà)，該設(shè)置也可以用于取消動(dòng)畫(huà) |
| keyframename | 用于定義要調(diào)用的動(dòng)畫(huà)名稱(chēng)。多個(gè)動(dòng)畫(huà)名稱(chēng)以英文逗號(hào)隔開(kāi) |
animation-name調(diào)用的動(dòng)畫(huà)名需要和@keyframes規(guī)則定義的動(dòng)畫(huà)名完全一致（區(qū)分大小寫(xiě)），如果不一致將不會(huì)產(chǎn)生任何動(dòng)畫(huà)效果。
注意：在animation屬性上指定多個(gè)以逗號(hào)分隔的值時(shí)，它們會(huì)將根據(jù)值的數(shù)量以不同的方式分配給animation-name屬性指定的動(dòng)畫(huà)。
持續(xù)時(shí)間:animation-duration
概念：animation-duration屬性用于定義完成一個(gè)動(dòng)畫(huà)周期所需要的時(shí)間。
語(yǔ)法:
animation-duration:time;
屬性值
| 屬性值 | 說(shuō)明 |
|---|---|
| time | 它表示以秒（s）或毫秒（ms）為單位的時(shí)間。默認(rèn)值為0，表示沒(méi)有任何動(dòng)畫(huà)效果。當(dāng)該參數(shù)的值為負(fù)數(shù)時(shí)，則被視為0。 |
動(dòng)畫(huà)方式:animation-timing-function
概念：animation-timing-function屬性用來(lái)定義動(dòng)畫(huà)的速度曲線?！八俣惹€”,指的是動(dòng)畫(huà)執(zhí)行過(guò)程中的速度變化情況。
語(yǔ)法：
animation-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
屬性值
| 屬性值 | 說(shuō)明 | 速率 |
|---|---|---|
| linear | 規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果，即”勻速“ |  |
| ease | 默認(rèn)值，規(guī)定慢速開(kāi)始，變快之后慢速結(jié)束的過(guò)渡效果 |  |
| ease-in | 規(guī)定速度越來(lái)越快的過(guò)渡效果 |  |
| ease-out | 規(guī)定速度越來(lái)越慢的過(guò)渡效果 |  |
| ease-in-out | 規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果 |  |
| cubic-bezier(n.n,n,n) | 在cubic-bezier函數(shù)中自定義值，參數(shù)是0~1的數(shù)值 |
說(shuō)明：animation-timing-function屬性取值跟CSS3過(guò)渡的transition-timing-function是一樣的
延遲時(shí)間:animation-delay
概念：animation-delay屬性用來(lái)定義執(zhí)行動(dòng)畫(huà)之前等待的時(shí)間,即指的是規(guī)定動(dòng)畫(huà)什么時(shí)候開(kāi)始
語(yǔ)法：
animation-delay:time;
屬性值
| 屬性值 | 說(shuō)明 |
|---|---|
| time | 它表示以秒（s）或毫秒（ms）為單位的時(shí)間。默認(rèn)值為0，表示不延遲（不等待） |
播放次數(shù):animation-iteration-count
概念：animation-iteration-count屬性用來(lái)定義動(dòng)畫(huà)的播放次數(shù)
語(yǔ)法:
animation-iteration-count:number|infinite;
屬性值
| 屬性值 | 說(shuō)明 |
|---|---|
| number | 表示動(dòng)畫(huà)重復(fù)的次數(shù)。默認(rèn)值為1，即指的是動(dòng)畫(huà)默認(rèn)只播放1次。若屬性值為一個(gè)整數(shù)，則規(guī)定動(dòng)畫(huà)播放次數(shù)。若屬性值為一個(gè)非整數(shù)值，則表示播放動(dòng)畫(huà)循環(huán)的一部分。例如，0.5s將動(dòng)畫(huà)只播放一半。負(fù)值是無(wú)效的。 |
| infinite | 表示動(dòng)畫(huà)無(wú)限次循環(huán)播放 |
說(shuō)明：animation-iteration-count屬性可以指定一個(gè)或多個(gè)以逗號(hào)分隔的值
播放方向:animation-direction
概念：animation-direction屬性用來(lái)定義動(dòng)畫(huà)的播放方向。
語(yǔ)法：
animation-direction:normal|alternate;
屬性值
| 屬性值 | 說(shuō)明 |
|---|---|
| normal | 默認(rèn)值，表示動(dòng)畫(huà)每次都順向播放 |
| reverse | 表示動(dòng)畫(huà)每次都反方向播放 |
| alternate | 表示動(dòng)畫(huà)會(huì)在奇數(shù)次（1次，3次，5次等）順向播放，但在偶數(shù)次（2次，4次，6次等）逆向播放。 |
實(shí)例：loading效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.contain{
width:100px;
margin:20px auto;
position:relative;
}
.contain>i
{
position:absolute;
top:0;
width:5px;
height:40px;
background-color:blueviolet;
border-radius:6px;
}
/*定義動(dòng)畫(huà)*/
@keyframes loading
{
0%{
transform:scaleY(1);
}
50%{
transform:scaleY(0.5);
}
100%{
transform:scaleY(1);
}
}
/*第1個(gè)i元素*/
.contain>i:nth-child(1)
{
left: 0;
animation-name:loading;
animation-duration:1s;
animation-timing-function:ease-in;
animation-delay:0.1s;
animation-iteration-count:infinite;
}
/*第2個(gè)i元素*/
.contain>i:nth-child(2)
{
left: 10px;
animation-name:loading;
animation-duration:1s;
animation-timing-function:ease-in;
animation-delay:0.3s;
animation-iteration-count:infinite;
}
/*第3個(gè)i元素*/
.contain>i:nth-child(3)
{
left: 20px;
animation-name:loading;
animation-duration:1s;
animation-timing-function:ease-in;
animation-delay:0.6s;
animation-iteration-count:infinite;
}
/*第4個(gè)i元素*/
.contain>i:nth-child(4) {
left: 30px;
animation-name:loading;
animation-duration:1s;
animation-timing-function:ease-in;
animation-delay:0.3s;
animation-iteration-count:infinite;
}
</style>
</head>
<body>
<div class="contain">
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</body>
</html>
運(yùn)行結(jié)果
播放狀態(tài):animation-play-state
概念：animation-play-state屬性用來(lái)定義動(dòng)畫(huà)的播放狀態(tài)。
語(yǔ)法：
animation-play-state:running|paused;
屬性值
| 屬性值 | 說(shuō)明 |
|---|---|
| running | 默認(rèn)值，表示是動(dòng)畫(huà)正在播放中 |
| paused | 表示動(dòng)畫(huà)已被暫停 |
animation屬性
概念：animation屬性是一個(gè)復(fù)合屬性，可以將以上單項(xiàng)動(dòng)畫(huà)子屬性在一行內(nèi)進(jìn)行復(fù)合設(shè)置。簡(jiǎn)寫(xiě)以上繁瑣的屬性。
語(yǔ)法：
animation:animation-name|animation-duration|animation-timing-function animation-delay|animation-iteration-count|animation-direction；
說(shuō)明：定義animation屬性時(shí)必須指定animation-name和animation-duration屬性，否則沒(méi)有動(dòng)畫(huà)，或者動(dòng)畫(huà)持續(xù)時(shí)間默認(rèn)為0，不會(huì)播放動(dòng)畫(huà)，其余子屬性可省略。
實(shí)例:loading效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.contain{
width:100px;
margin:20px auto;
position:relative;
}
.contain>i
{
position:absolute;
top:0;
width:5px;
height:40px;
background-color:blueviolet;
border-radius:6px;
}
/*定義動(dòng)畫(huà)*/
@keyframes loading
{
0%{
transform:scaleY(1);
}
50%{
transform:scaleY(0.5);
}
100%{
transform:scaleY(1);
}
}
/*第1個(gè)i元素*/
.contain>i:nth-child(1)
{
left: 0;
animation: loading 1s ease-in 0.1s infinite;
}
/*第2個(gè)i元素*/
.contain>i:nth-child(2)
{
left: 10px;
animation: loading 1s ease-in 0.3s infinite;
}
/*第3個(gè)i元素*/
.contain>i:nth-child(3)
{
left: 20px;
animation: loading 1s ease-in 0.6s infinite;
}
/*第4個(gè)i元素*/
.contain>i:nth-child(4) {
left: 30px;
animation: loading 1s ease-in 0.3s infinite;
}
</style>
</head>
<body>
<div class="contain">
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</body>
</html>
運(yùn)行結(jié)果
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-811812.html
從效果上來(lái)看，這兩者是等價(jià)的。相比較用animation屬性的子屬性，直接使用animation復(fù)合屬性上更加簡(jiǎn)潔清楚。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-811812.html
到了這里，關(guān)于CSS3動(dòng)畫(huà)效果詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
