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。
完结撒花。
接下来就可以轻松控制动画的进行了。

本文由 hunsh 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Dec 28, 2019 at 02:39 am

← → ↓ ↑
Responses