逐帧动画

核心原理

逐帧动画是将一连串的连续动作的静态图片，合并成一张雪碧图，通过 CSS 改变背景图的位置（background-position），让画面从一帧跳动到下一帧

使用 animation-timing-function 的 step() 函数实现，它会将动画周期分割成 n 个等距的断点：

• 语法：steps(number_of_steps, direction)
• number_of_steps：整数，表示将动画过程分为多少帧

雪碧图的逐帧动画

把 loading 动画所有帧合并到一张雪碧图

第一种：通过 background-position 移动

第二种：通过 transform: translateX() 移动，这样可以更好的利用 GPU 加速，且便于缩放（推荐）

块的逐帧动画

有时候，多个相似块之间的 transoform 动画切换，比补间动画的效果要好

如以下的loading补间动画，因为块和块之间需要浏览器补充过渡帧，所以会有残影

animation: rotate 2s linear infinite;

但这种情况，多个点之间的位置直接切换，可以出现不带残影的效果，有时候会更好

animation: rotate 1s steps(24) infinite;

如其他棋盘的多个不同透明度方块之间的位移切换，也许使用逐帧动画的效果会更好