這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 CSS3提供了Animation關鍵幀動畫，我們在工作中比較常用。但在寫CSS動畫的時候，其實Animation能實現兩種動畫模式： 補間動畫 設置關鍵幀的初始狀態，然後在另一個關鍵幀改變這個狀態，比如大小、顏色、位置、透明度等，電腦將自 ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
CSS3提供了Animation關鍵幀動畫，我們在工作中比較常用。但在寫CSS動畫的時候，其實Animation能實現兩種動畫模式：
補間動畫
設置關鍵幀的初始狀態，然後在另一個關鍵幀改變這個狀態，比如大小、顏色、位置、透明度等，電腦將自動根據二者之間幀的值創建的動畫。
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:120px;
height:63px;
background-color: antiquewhite;
/* animation: an1 2s linear 1; */
/* 關鍵幀動畫名稱 */
animation-name: an1;
/* 一個動畫周期的時長 */
animation-duration:2s;
/* 關鍵幀的 緩動函數 關鍵就在這裡. 我們常用的有linear勻速 ease-in慢速開始 */
animation-timing-function: linear;
/* 動畫執行次數 */
animation-iteration-count: 1;
}
@keyframes an1{
/* 這裡定義了三個關鍵幀. */
/* 第1幀和第2幀之間的中間效果由電腦計算後自動補全. */
/* 第2幀和第3幀之間的中間效果由電腦計算後自動補全. */
/* 這就是一個補間動畫 */
0%{
transform: translateX(0px);
}
50%{
transform: translateX(100px);
}
100%{
transform: translateX(500px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
執行效果:
逐幀動畫
逐幀動畫沒有補間效果的，它不是電腦根據初始和結束狀態的差異自動生成中間的過渡幀，而是每一幀都是關鍵幀，需要自己定義每一幀的狀態。在Animation動畫裡面通過設置 animation-timing-function:step(number)來實現的。
比如下圖(178 x 1122)裡面有6只烏龜，實際上一隻烏龜的游泳動作幀.。每張圖連起來播放就是一隻游泳的烏龜：
如果用補間動畫通過改變圖片的位置實現就是下麵的效果：
用逐幀動畫實現代碼效果如下：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tortoise{
width:178px;
height:187px;
background: url(./t.png) no-repeat;
/* animation: an1 2s linear 1; */
/* 關鍵幀動畫名稱 */
animation-name: ani2;
/* 一個動畫周期的時長 */
animation-duration:2s;
/* 關鍵幀的 緩動函數 關鍵就在這裡.*/
/* 這裡用step(6) 表示動畫不是連續執行，而是間斷地分成6段顯示 因為我們的烏龜是6個動作.
如果是其它動畫以此類推，分為幾段關鍵幀顯示.
*/
animation-timing-function: steps(6);
/* 動畫執行次數 */
animation-iteration-count: 1;
}
@keyframes ani2{
/* 背景圖片的Y軸位置變化.*/
0%{
background-position:0px 0px;
}
100%{
background-position:0px -1122px;
}
}
</style>
</head>
<body>
<div class="tortoise"></div>
</body>
</html>
通過上面的對比可以看出，逐幀動畫一般用在動物或人的動作變化。動畫裡面比較多，主要偏向游戲類的，在大多數游戲動畫里的角色效果都是逐幀動畫。逐幀動畫就像拍電影一樣的，獨立的每幀圖顯示，連續動起來就是一個動作，當然更多要和美術一起合作實現逐幀動畫。
本文轉載於:
https://juejin.cn/post/7218090232188698681
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
