CSS動畫-step()幀動畫

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

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

查看codepen 示例

示例教程

鼠標移動到星上顯示動畫

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

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

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

step() 計時函數

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

1、首先我們創建HTML標簽

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

2、添加背景圖片樣式

.fave {
  width: 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