Twitter使用了一種新的動畫形式，使用一系列的圖片來創建幀動畫。

下面是一個❤動畫，鼠標移動到上面開始綻放。

.heart {
100px;
height: 100px;
background: url(https://youcanping-1254178049.cos.ap-beijing.myqcloud.com/images/heart.png) no-repeat;
background-position: 0 0;
cursor: pointer;
animation: fave-heart 1s steps(28);
}
.heart:hover {
background-position: -2800px 0;
transition: background 1s steps(28);
}
@keyframes fave-heart {
0% {
background-position: 0 0;
}
100% {
background-position: -2800px 0;
}
}

.fave {
70px;
height: 50px;
background: url(https://youcanping-1254178049.cos.ap-beijing.myqcloud.com/images/twitter_fave.png) no-repeat;
background-position: 0 0;
}

.fave:hover {
background-position: -3519px 0;
transition: background 1s steps(55);
}

查看codepen 示例

示例教程

鼠標移動到星上顯示動畫

首先我們要準備一系列構成動畫的圖片，這里我們使用Twitter收藏夾動畫使用的圖片集合來制作動畫。

下面是動畫中要使用的圖片集合，為了方便顯示，我折行顯示。

在實際開發中，我們要把圖片放在一行，為了在動畫中從第一幀過渡到最后一針，twitter_fave.png 這個文件把圖片放在了一行。

step() 計時函數

和大多數的計時函數不同，如ease何cubic-bezier，動畫是從開始到結束時平滑過渡的，而step()步驟函數，將動畫分為多個步驟（幀），在多個步驟中急劇過渡，來顯示動畫效果。

1、首先我們創建HTML標簽

<section class="fave"></section>

2、添加背景圖片樣式

.fave {
   70px;
  height: 50px;
  background: url(images/tritter_fave.png) no-repeat
  background-position: 0 0; // 圖片指針定位左上角
}

3、在hover狀態，鼠標懸浮到圖片上，開始切換背景圖片

.fave:hover {
  background-position: -3519px 0; // 使背景圖片相對容器左移，多余背景圖片將溢出容器不顯示
  transition: background 1s step(55); // 步驟為55步，即切換55幀動畫
}

這里我們對背景進行切換，時間為1秒，分為55幀。

為什么不用gif

因為gif的圖片更大，占用資源更多，不能控制幀率，而使用CSS動畫可以自由控制幀率，可以方便控制動畫的暫停、后退或其他適配功能。

step計時函數的其他用途

背景圖片精靈只是step()計時函數的一個使用示例，它還能挖掘出更多的應用場景，如滴答的時鐘等。

參考鏈接

Twitter's "fave" animation

總結

以上是生活随笔為你收集整理的CSS动画-step()帧动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。