Alpha通道帧动画在Web上的实现

问题：

长期与图形打交道的朋友应该很清楚支持动画的格式目前只有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

Alpha通道帧动画在Web上的实现

在网页字体加载期间所有文本都保持可见状态

WordPress使用webP格式减少图片体积

微信小程序中组件无法使用全局样式 (app.wxss)

datetimepicker控件在formvalidation框架中的问题

Alpha通道帧动画在Web上的实现

在网页字体加载期间 所有文本都保持可见状态

WordPress使用webP格式减少图片体积

微信小程序中组件无法使用全局样式 (app.wxss)

datetimepicker控件在formvalidation框架中的问题

在网页字体加载期间所有文本都保持可见状态