這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
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 ></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 ></div>
</body>
</html>
通過上面的對比可以看出，逐幀影片一般用在動物或人的動作變化，影片里面比較多，主要偏向游戲類的，在大多數游戲影片里的角色效果都是逐幀影片，逐幀影片就像拍電影一樣的，獨立的每幀圖顯示，連續動起來就是一個動作，當然更多要和美術一起合作實作逐幀影片，
本文轉載于:
https://juejin.cn/post/7218090232188698681
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549173.html
標籤：其他