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