1. 開(kāi)場(chǎng)白上一章我們已經(jīng)了解了Css Sprite需要的基本CSS語(yǔ)法，那么這一章節(jié)我們將帶領(lǐng)大家體驗(yàn)一下動(dòng)畫(huà)的語(yǔ)法，以及不同動(dòng)畫(huà)種類(lèi)之間的區(qū)別。 動(dòng)畫(huà)通常分為兩種形式：一種是過(guò)渡動(dòng)畫(huà)、另一種是幀動(dòng)畫(huà)。 2. 過(guò)渡動(dòng)畫(huà)之前我們?cè)?jīng)說(shuō)過(guò)，Css Sprite在幀動(dòng)畫(huà)這一領(lǐng)域獨(dú)領(lǐng)風(fēng)騷，那么接下來(lái)我們就來(lái)分析一下動(dòng)畫(huà)領(lǐng)域里面常見(jiàn)的兩種形式：過(guò)渡動(dòng)畫(huà)與幀動(dòng)畫(huà)之間的區(qū)別。 首先我們來(lái)看看目前各類(lèi)網(wǎng)站中最常見(jiàn)的一種動(dòng)畫(huà)：過(guò)渡動(dòng)畫(huà) <!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Animate-過(guò)渡動(dòng)畫(huà)</title>
<style>
/* 清除默認(rèn)樣式 */
* { padding: 0; margin: 0; }
/* 這段代碼是為了居中顯示，不是重點(diǎn)，看不懂的話可以無(wú)視 */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.animate {
width: 100px;
height: 100px;
/* 使用預(yù)先定義好的動(dòng)畫(huà)，過(guò)渡動(dòng)畫(huà) */
animation: change-color 2s linear infinite alternate;
}
/* 定義動(dòng)畫(huà) */
@keyframes change-color {
from { background: yellow }
to { background: green }
}
</style></head><body>
<div class="animate"></div>
</body>
</html>運(yùn)行結(jié)果：
可以看到盒子的顏色是從黃色慢慢過(guò)渡到綠色，所以叫過(guò)渡動(dòng)畫(huà)，因?yàn)槠溆幸粋�(gè)過(guò)渡的效果。 3. 幀動(dòng)畫(huà)再來(lái)看看幀動(dòng)畫(huà)是什么樣的效果： <!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Animate-幀動(dòng)畫(huà)</title>
<style>
/* 清除默認(rèn)樣式 */
* { padding: 0; margin: 0; }
/* 這段代碼是為了居中顯示，不是重點(diǎn)，看不懂的話可以無(wú)視 */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.animate {
width: 100px;
height: 100px;
/* 使用預(yù)先定義好的動(dòng)畫(huà)，幀動(dòng)畫(huà) */
animation: change-color 2s steps(5) infinite alternate;
}
/* 定義動(dòng)畫(huà) */
@keyframes change-color {
from { background: yellow }
to { background: green }
}
</style></head><body>
<div class="animate"></div>
</body>
</html>運(yùn)行結(jié)果：
可以看到是一幀幀播放的，幀數(shù)低的時(shí)候有種卡卡的感覺(jué)，好像一下一下的分步驟從黃色變成綠色的。那我們把幀數(shù)提高一下不就看不到一卡一卡的感覺(jué)了嗎？來(lái)試試看： <!DOCTYPE html>
<html lang="en"><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;
}
.animate {
width: 100px;
height: 100px;
/* 使用預(yù)先定義好的動(dòng)畫(huà) */
animation: change-color 2s steps(100) infinite alternate;
}
/* 定義動(dòng)畫(huà) */
@keyframes change-color {
from { background: yellow }
to { background: green }
}
</style></head><body>
<div class="animate"></div>
</body>
</html>運(yùn)行結(jié)果：
雖然效果一樣了，但是怎么感覺(jué)更麻煩了呢？還要自己去指定幀數(shù)，而過(guò)渡動(dòng)畫(huà)都是全自動(dòng)的，幀動(dòng)畫(huà)是不是不如過(guò)渡動(dòng)畫(huà)呢？實(shí)際上并不是這樣的，幀動(dòng)畫(huà)有著自己的適用場(chǎng)景。接下來(lái)我們就來(lái)探討一下何時(shí)適合幀動(dòng)畫(huà)，何時(shí)又適合過(guò)渡動(dòng)畫(huà)。 4. 小結(jié)乍一看好像過(guò)渡動(dòng)畫(huà)更勝一籌，但實(shí)際上他們兩個(gè)各自有各自的適用場(chǎng)景。 下一章我們就來(lái)看看什么樣的場(chǎng)景適合過(guò)渡動(dòng)畫(huà)。 |
