CSS动画-step()帧动画

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

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

查看codepen 示例

示例教程

鼠标移动到星上显示动画

首先我们要准备一系列构成动画的图片,这里我们使用Twitter收藏夹动画使用的图片集合来制作动画。

下面是动画中要使用的图片集合,为了方便显示,我折行显示。

twitter_fave_rectangle.png

在实际开发中,我们要把图片放在一行,为了在动画中从第一帧过渡到最后一针,twitter_fave.png 这个文件把图片放在了一行。

step() 计时函数

和大多数的计时函数不同,如easecubic-bezier,动画是从开始到结束时平滑过渡的,而step()步骤函数,将动画分为多个步骤(帧),在多个步骤中急剧过渡,来显示动画效果。

steps.png

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()计时函数的一个使用示例,它还能挖掘出更多的应用场景,如滴答的时钟等。

参考链接

posted @ 2019-12-23 10:23  大圣巴巴  阅读(170)  评论(0编辑  收藏