css图片滑动切换图_CSS帧动画

前言

是不是很多人认为只有连续的变化才叫动画。

上图是连续旋转变化，下图是断断续续切换状态，请查看以下两个动画：

是否认知的感觉又强烈了一点呢？

假设我把下图的 loading 播放速度加快，继续看：

是否发现和图一的 loading 一样了，是否发现认知出现了偏差？

这种肉眼可见的断断续续的动画(如图一的下图，图二的下图其实也是，只是速度快而已，感知不明显)称为帧动画，又叫序列帧动画，定格动画，逐帧动画等，是一种动画技术，其原理为将每帧不同的图像连续播放，从而产生动画效果。

简而言之，实现帧动画需要两个条件：

1. 相关联的不同图像，即动画帧；

2. 连续播放。

---

原理

CSS 帧动画是通过不断变换