1. 調(diào)用動(dòng)畫
定義好動(dòng)畫之后就需要在想要的位置去調(diào)用啦,先來(lái)學(xué)習(xí)一下動(dòng)畫調(diào)用的語(yǔ)法:
animation: name duration timing-function delay iteration-count direction fill-mode;
當(dāng)然寫的時(shí)候可絕對(duì)不是這么寫的啊,只有冒號(hào)前面的animation
這個(gè)單詞不變,剩下單詞全部都要替換,那么要替換成什么呢?
請(qǐng)看中文翻譯版:
animation: 定義過(guò)的動(dòng)畫名 動(dòng)畫時(shí)長(zhǎng) 動(dòng)畫運(yùn)行的方式 延遲 動(dòng)畫次數(shù) 動(dòng)畫方向 填充模式;
是不是看到這里直接暈了,甚至有種想關(guān)掉網(wǎng)頁(yè)的沖動(dòng)?不要怕,這些只是看起來(lái)嚇人,其實(shí)都是紙老虎。
而且也不是這些屬性都要用到,哪個(gè)屬性你用不到就可以不寫,通常我們只會(huì)用到幾個(gè)常用的。
2. 極簡(jiǎn)形式
先說(shuō)說(shuō)最最簡(jiǎn)單的一種方式,看了絕對(duì)不懵圈的那種:
animation: name duration;
翻譯如下:
animation: 定義過(guò)的動(dòng)畫名 動(dòng)畫時(shí)長(zhǎng);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animate</title>
<style>
/* 清除瀏覽器默認(rèn)邊距 */
* { padding: 0; margin: 0; }
/* 這段代碼是為了居中顯示,不是重點(diǎn),看不懂的話可以無(wú)視 */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* 定義動(dòng)畫:動(dòng)畫名(change-color) */
@keyframes change-color {
from /* 0% */ { color: red } /* 紅 */
16% { color: orange } /* 橙 */
32% { color: yellow } /* 黃 */
48% { color: green } /* 綠 */
64% { color: cyan } /* 青 */
80% { color: blue } /* 藍(lán) */
to /* 100% */ { color: purple } /* 紫 */
}
.animate {
width: 300px;
height: 100px;
/* 再使用預(yù)先定義好的動(dòng)畫 */
animation: change-color 10s;
/* 動(dòng)畫:動(dòng)畫名(change-color) 時(shí)長(zhǎng)(10秒) */
}
</style>
</head>
<body>
<div class="animate">
<!-- 動(dòng)畫:動(dòng)畫名(change-color) 時(shí)長(zhǎng)(10秒) -->
animation: change-color 10s;
</div>
</body>
</html>
運(yùn)行結(jié)果:
可以看出整段文字按照咱們定義的 change-color 動(dòng)畫來(lái)運(yùn)行:赤橙黃綠青藍(lán)紫一共十秒,但十秒過(guò)后字變黑了,因?yàn)檫@段字默認(rèn)的顏色本來(lái)就是黑色的。
3. 無(wú)限循環(huán)
如果我們不想讓它結(jié)束,那就十秒過(guò)后再來(lái)十秒,十秒完再十秒,無(wú)限重復(fù)、無(wú)限循環(huán):
animation: name duration iteration-count;
翻譯過(guò)來(lái)就是:
animation: 定義過(guò)的動(dòng)畫名 動(dòng)畫時(shí)長(zhǎng) 動(dòng)畫次數(shù);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animate</title>
<style>
/* 清除瀏覽器默認(rèn)邊距 */
* { padding: 0; margin: 0; }
/* 這段代碼是為了居中顯示,不是重點(diǎn),看不懂的話可以無(wú)視 */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* 先定義動(dòng)畫,動(dòng)畫名叫:change-color */
@keyframes change-color {
from /* 0% */ { color: red } /* 紅 */
16% { color: orange } /* 橙 */
32% { color: yellow } /* 黃 */
48% { color: green } /* 綠 */
64% { color: cyan } /* 青 */
80% { color: blue } /* 藍(lán) */
to /* 100% */ { color: purple } /* 紫 */
}
.animate {
width: 400px;
height: 100px;
/* 再使用預(yù)先定義好的動(dòng)畫 */
animation: change-color 10s infinite;
/* 動(dòng)畫:動(dòng)畫名(change-color) 時(shí)長(zhǎng)(10秒) 動(dòng)畫次數(shù)(無(wú)限) */
}
</style>
</head>
<body>
<div class="animate">
<!-- 動(dòng)畫:動(dòng)畫名(change-color) 時(shí)長(zhǎng)(10秒) 動(dòng)畫次數(shù)(無(wú)限) -->
animation: change-color 10s infinite;
</div>
</body>
</html>
運(yùn)行結(jié)果:
- 運(yùn)行次數(shù)可以寫具體的數(shù)字,動(dòng)畫會(huì)根據(jù)你寫的數(shù)字來(lái)運(yùn)行相應(yīng)的次數(shù),想要無(wú)限運(yùn)行的話就寫infinite
雖然成功的無(wú)限循環(huán)了,但是目前看來(lái)有個(gè)缺點(diǎn),那就是最后一幀紫色結(jié)束后突然就變成了第一幀的紅色,沒(méi)有任何的過(guò)渡效果。
有兩個(gè)解決方案:
1. 定義動(dòng)畫的時(shí)候最后一幀再變回紅色:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animate</title>
<style>
/* 清除瀏覽器默認(rèn)邊距 */
* { padding: 0; margin: 0; }
/* 這段代碼是為了居中顯示,不是重點(diǎn),看不懂的話可以無(wú)視 */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* 先定義動(dòng)畫,動(dòng)畫名叫:change-color */
@keyframes change-color {
from /* 0% */ { color: red } /* 紅 */
13% { color: orange } /* 橙 */
26% { color: yellow } /* 黃 */
39% { color: green } /* 綠 */
52% { color: cyan } /* 青 */
65% { color: blue } /* 藍(lán) */
78% { color: purple } /* 紫 */
to /* 100% */ { color: red } /* 最后一幀和第一幀的樣式一致 */
}
.animate {
width: 400px;
height: 100px;
/* 再使用預(yù)先定義好的動(dòng)畫 */
animation: change-color 6s infinite;
/* 動(dòng)畫:動(dòng)畫名(change-color) 時(shí)長(zhǎng)(6秒) 動(dòng)畫次數(shù)(無(wú)限) */
}
</style>
</head>
<body>
<div class="animate">
<!-- 動(dòng)畫:動(dòng)畫名(change-color) 時(shí)長(zhǎng)(6秒) 動(dòng)畫次數(shù)(無(wú)限) -->
animation: change-color 6s infinite;
</div>
</body>
</html>
運(yùn)行結(jié)果:
2. 交替動(dòng)畫
什么是交替動(dòng)畫呢?簡(jiǎn)單來(lái)說(shuō)就是從第一幀紅到最后一幀紫運(yùn)行完了之后,再?gòu)?strong>最后一幀紫到第一幀紅,然后再?gòu)募t到紫、從紫到紅,大紅大紫。
這種動(dòng)畫就不用最后一幀再定義回第一幀的紅色了,直接定義從紅到紫即可。來(lái)看看語(yǔ)法:
animation: 定義過(guò)的動(dòng)畫名 動(dòng)畫時(shí)長(zhǎng) 動(dòng)畫次數(shù) 動(dòng)畫方向;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animate</title>
<style>
/* 清除瀏覽器默認(rèn)邊距 */
* { padding: 0; margin: 0; }
/* 這段代碼是為了居中顯示,不是重點(diǎn),看不懂的話可以無(wú)視 */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* 先定義動(dòng)畫,動(dòng)畫名叫:change-color */
@keyframes change-color {
from /* 0% */ { color: red } /* 紅 */
to /* 100% */ { color: purple } /* 為了方便直接從紅到紫 */
}
.animate {
width: 450px;
height: 100px;
/* 再使用預(yù)先定義好的動(dòng)畫 */
animation: change-color 1s infinite alternate;
/* 動(dòng)畫:動(dòng)畫名(change-color) 時(shí)長(zhǎng)(1秒) 動(dòng)畫次數(shù)(無(wú)限) 動(dòng)畫方向(交替運(yùn)行) */
}
</style>
</head>
<body>
<div class="animate">
<!-- 動(dòng)畫:動(dòng)畫名(change-color) 時(shí)長(zhǎng)(1秒) 動(dòng)畫次數(shù)(無(wú)限) 動(dòng)畫方向(交替運(yùn)行) -->
animation: change-color 1s infinite alternate;
</div>
</body>
</html>
運(yùn)行結(jié)果:
4. 幀動(dòng)畫
語(yǔ)法:
animation: 定義過(guò)的動(dòng)畫名 動(dòng)畫時(shí)長(zhǎng) 動(dòng)畫運(yùn)行的方式;
動(dòng)畫運(yùn)行的方式要用到steps這個(gè)函數(shù)。
看起來(lái)可能有點(diǎn)暈,但是我們寫成英文看起來(lái)就會(huì)好很多:
animation: change-color 7s steps(10);
這里面唯一一個(gè)新鮮詞就是steps,這個(gè)steps后面要寫上小括號(hào),括號(hào)里面就是這次動(dòng)畫要按照多少幀來(lái)運(yùn)行,來(lái)看個(gè)具體的案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animate</title>
<style>
/* 清除瀏覽器默認(rèn)邊距 */
* { padding: 0; margin: 0; }
/* 這段代碼是為了居中顯示,不是重點(diǎn),看不懂的話可以無(wú)視 */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* 先定義動(dòng)畫,動(dòng)畫名叫:change-color */
@keyframes change-color {
from /* 0% */ { color: red } /* 紅 */
16% { color: orange } /* 橙 */
32% { color: yellow } /* 黃 */
48% { color: green } /* 綠 */
64% { color: cyan } /* 青 */
80% { color: blue } /* 藍(lán) */
to /* 100% */ { color: purple } /* 紫 */
}
.animate {
width: 400px;
height: 100px;
/* 再使用預(yù)先定義好的動(dòng)畫 */
animation: change-color 7s steps(1);
/* 動(dòng)畫:動(dòng)畫名(change-color) 時(shí)長(zhǎng)(7秒) 動(dòng)畫運(yùn)行的方式(steps(1)) */
}
</style>
</head>
<body>
<div class="animate">
<!-- 動(dòng)畫:動(dòng)畫名(change-color) 時(shí)長(zhǎng)(7秒) 動(dòng)畫運(yùn)行的方式(steps(1)) -->
animation: change-color 7s steps(1);
</div>
</body>
</html>
運(yùn)行結(jié)果:
可以看到這就按照我們所設(shè)想的那樣:紅、橙、黃、綠、青、藍(lán)、紫……
咦?紫呢?怎么最后直接跳過(guò)紫色直接就進(jìn)入黑色了呢?
原來(lái),這里涉及到了一個(gè)幀動(dòng)畫里面一個(gè)難以理解的點(diǎn),在講這點(diǎn)之前我們先來(lái)看結(jié)論,這樣的話即使沒(méi)弄懂到底是怎么一回事也可以直接記住結(jié)論,讓動(dòng)畫按照我們預(yù)先設(shè)想的那樣去運(yùn)行。
4.1 非循環(huán)式幀動(dòng)畫
語(yǔ)法:
animation: 動(dòng)畫名 時(shí)長(zhǎng) step-end both;
來(lái)看具體案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animate</title>
<style>
/* 清除瀏覽器默認(rèn)邊距 */
* { padding: 0; margin: 0; }
/* 這段代碼是為了居中顯示,不是重點(diǎn),看不懂的話可以無(wú)視 */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* 先定義動(dòng)畫,動(dòng)畫名叫:change-color */
@keyframes change-color {
from { color: red }
16% { color: orange }
32% { color: yellow }
48% { color: green }
64% { color: cyan }
80% { color: blue }
to { color: purple }
}
.animate {
width: 450px;
height: 100px;
/* 再使用預(yù)先定義好的動(dòng)畫 */
animation: change-color 7s step-end both;
/* 動(dòng)畫:動(dòng)畫名(change-color) 時(shí)長(zhǎng)(7秒) 動(dòng)畫運(yùn)行的方式(step-end) 填充模式(雙向) */
}
</style>
</head>
<body>
<div class="animate">
<!-- 動(dòng)畫:動(dòng)畫名(change-color) 時(shí)長(zhǎng)(7秒) 動(dòng)畫運(yùn)行的方式(step-end) 填充模式(雙向)-->
animation: change-color 7s step-end both;
</div>
</body>
</html>
運(yùn)行結(jié)果:
可以看到成功了,紫色出來(lái)了,而且永遠(yuǎn)都不會(huì)再回到默認(rèn)的黑色了。
這究竟是怎么一回事呢?step-end和both這兩個(gè)單詞到底是什么意思呢?
先不要著急,咱們先把結(jié)論記下來(lái),原理放到后面講。
4.2 循環(huán)式幀動(dòng)畫
語(yǔ)法:
animation: 動(dòng)畫名 時(shí)長(zhǎng) step-end infinite;
除了在調(diào)用動(dòng)畫的語(yǔ)法上最后一個(gè)單詞不一樣,其實(shí)主要區(qū)別在于定義動(dòng)畫時(shí),定義動(dòng)畫的時(shí)候可以多加一幀,來(lái)看具體案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animate</title>
<style>
/* 清除瀏覽器默認(rèn)邊距 */
* { padding: 0; margin: 0; }
/* 這段代碼是為了居中顯示,不是重點(diǎn),看不懂的話可以無(wú)視 */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* 先定義動(dòng)畫,動(dòng)畫名叫:change-color */
@keyframes change-color {
from { color: red }
14% { color: orange }
28% { color: yellow }
42% { color: green }
56% { color: cyan }
70% { color: blue }
84% { color: purple }
to { color: aquamarine }
}
.animate {
width: 450px;
height: 100px;
/* 再使用預(yù)先定義好的動(dòng)畫 */
animation: change-color 7s step-end infinite;
/* 動(dòng)畫:動(dòng)畫名(change-color) 時(shí)長(zhǎng)(7秒) 動(dòng)畫運(yùn)行的方式(step-end) 動(dòng)畫次數(shù)(無(wú)限) */
}
</style>
</head>
<body>
<div class="animate">
<!-- 動(dòng)畫:動(dòng)畫名(change-color) 時(shí)長(zhǎng)(7秒) 動(dòng)畫運(yùn)行的方式(step-end) 動(dòng)畫次數(shù)(無(wú)限)-->
animation: change-color 7s step-end infinite;
</div>
</body>
</html>
運(yùn)行結(jié)果:
反正最后一幀出不來(lái),那我們直接就在最后多加一幀不就得了,最后一幀寫什么都可以,反正最后一幀就像空氣一樣——你永遠(yuǎn)也看不到。
5. 小結(jié)
學(xué)會(huì)了這一章,你就已經(jīng)可以實(shí)現(xiàn)一些簡(jiǎn)單的動(dòng)畫效果了,但是為什么最后一幀會(huì)消失呢?
這和 steps
函數(shù)的運(yùn)行機(jī)制有關(guān),其實(shí)它的原理并不復(fù)雜,但就是因?yàn)椴环先祟惖闹庇X(jué)導(dǎo)致許多人無(wú)法理解。
接下來(lái)的章節(jié)我們就來(lái)深入的理解一下這個(gè)神秘的 steps
函數(shù)。