CSS动画-step()帧动画

Twitter使用了一种新的动画形式，使用一系列的图片来创建帧动画。

下面是一个❤动画，鼠标移动到上面开始绽放。

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

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