https://www.cnblogs.com/sandraryan/
例子的笔记来自慕课网视频css动画部分
先解释一下：逐帧动画是特殊的关键帧动画
适用于无法进行补间计算的动画。 但是资源占用会比较多。
例子：
原始图片是这样的
现在把它做成一个动画
<style> div{ width: 100px; height: 100px; margin: 50px auto; border: 1px solid black; background-image: url("animal.png"); background-repeat: no-repeat; } @keyframes run{ 0%{ background-position: 0 0; } 12.5%{ background-position: -100px 0; } 25%{ background-position: -200px 0; } 37.5%{ background-position: -300px 0; } 50%{ background-position: 0 -100px; } 62.5%{ background-position: -100px -100px; } 75%{ background-position: -200px -100px; } 87.5%{ background-position: -300px -100px; } 100%{ background-position: 0 0; } } div:hover{ animation: run 1s linear infinite; animation-timing-function: steps(1); } </style> </head> <body> <div></div> </body>
解析一下步骤
首先，把图片作为该盒子的背景，并设置no-repeat。
其次，给不同的阶段设置不同的背景位置，设置animation属性。（个人觉得原理类似于雪碧图）
然后，你就会发现效果非常鬼畜。。。是因为每一帧之间仍旧是有补间的，要把这个去掉。
最后加上，animation-timing-function: steps(1);这个属性值为的是制定每个关键帧之间有几个画面，属性值设为1，就是两帧之间只有一个画面。
over