CSS3逐帧动画 - 替代gif动画

这次要做的小程序设计给过来一个 gif 的过渡动画，要实现闸门的下拉和升起。

gif 动画可以自定义循环周期，可以是 n 次也可以是无限次，无限次难以把握回收元素的时机，n 次想要重新展示在小程序中也是难事，重写 image 的 src 和将图片放在 background，改 class 也没有用，无法使 gif 重新播放，遂更改思路，使用 css3 的动画实现。

先放上效果图

我们先将动画的每一帧制作成雪碧图，最好是一列或者一行比如这样

每一帧之间不要有边距

然后直接上代码

.demo{

    height:20px;

    width:30px;

    background:url(image.png) no-repeat;

    background-size:300px 20px;

    animation: p1 steps(n,end) 1.5s infinite;

}

@keyframes p1 {

    100% {background-position: 0 -300px;}

}

height 和 width 是你想显示的高度

n 是帧数

我这是横图，所以 background-size 的宽度应该为 height*n，高度即同上 width。

完结撒花。

接下来就可以轻松控制动画的进行了。