CSS3逐帧动画 - 替代gif动画

in 前端 with 0 comment

这次要做的小程序设计给过来一个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。
完结撒花。
接下来就可以轻松控制动画的进行了。

Responses