问题：
长期与图形打交道的朋友应该很清楚支持动画的格式目前只有GIF动画，然而，GIF格式最多只能支持256色，并且只有全透明，不能实现半透明的效果（这就是为什么一些透明的GIF动画在其他背景色里面会出现白色的毛边）。
我们也知道，支持透明最常见的格式是PNG（当然，TIF、BMP也可以，不过用得并不多），曾经也有组织提出过PNG的扩展格式：APNG（Animation PNG），虽然这种格式支持了Alpha通道的半透明动画，然而它最终被否决进入PNG官方标准。目前也只有少数浏览器支持它。
那么，要想在Web上实现透明的帧动画难道只有GIF一个选择吗？难道没有支持Alpha通道实现半透明的解决方案吗？
原理：
现代浏览器都已经支持CSS动画了，在CSS第三版中，有一个animation属性。它实现了动画的功能。熟悉这个属性的话应该会问，这个属性中时间曲线不是cubic-bezier吗？那么要怎样实现帧动画呢？
当然，timing-function除了可以使用cubic-bezier以外，还有一个参数叫做steps。使用这个参数就可以实现帧动画了。
示例：
将下面的图片（多张被合成为了一个png）做成一个动画
以上面这个图片为例，要实现从上到下的帧动画，我们先随便写一个div：
<body>
<div class="tar" ></div>
</body>设定它的宽度和高度刚好等于图片一格的尺寸。然后将上面的图片设置为background-image，通过改变background的posion从而让它动起来。为了让它更有趣，还可以写一个hover，当鼠标放上去的时候显示出现的帧序列，鼠标移开之后返回。于是CSS如下：
.tar {
width: 68px;
height: 100px;
background-image: url('./img.png');
cursor: pointer;
animation: goBack 0.25s steps(4) forwards;
}
.tar:hover {
animation: comeOut 1s steps(10) forwards;
}出现的时候写了comeOut的keyframes，消失的时候写了goBack的keyfreames，那么下面两个keyframes的CSS写成如下效果：
@keyframes comeOut {
from {background-position: 0 0;}
to {background-position: 0 -1000px;}
}
@keyframes goBack {
from {background-position: 0 -1000px;}
to {background-position: 0 -1400px;}
}注意：考虑到兼容旧版的国产浏览器（webkit内核较老），可能需要增加-webkit-前缀。
最后在animation中使用steps的效果是这样（鼠标移入/移出显示效果）正确效果：
下面来对比一下如果不使用steps，而使用cubic-bezier的效果（鼠标移入/移出显示效果）错误效果：
结论：
在需要使用带alpha通道的帧动画时，应制作为透明的png图片，并将它们按照序列排列成一行/列，最后使用animation动画，一定要注意使用steps哦。
Demo：
下载查看完整示例
蓝奏云：https://www.lanzoux.com/i7ndszg
必须 注册 为本站用户， 登录 后才可以发表评论！