css制作动画(动效的序列帧图)

相信 animation 大家都用过很多，知道是 CSS3做动画用的。而我自己就只会在 X/Y轴 上做位移旋转，使用 animation-timing-function 规定动画的速度曲线，常用到的 贝塞尔曲线。但是这些动画效果都是连续性的。

今天发现个新功能 animation-timing-function 的另外个属性值 steps()功能符，可以让动画不连续，就是制作逐帧动画。

steps(n,start/end)

第一个参数 number 为把动画分为 n 步阶段性展示，表示把我们的动画分成了多少段；

第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。

第二个参数具体说就是，emmmm.....................我寄几也没详细看(没理解)，附上传送门你们看下张鑫旭大神的讲解  CSS3 animation属性中的steps功能符深入介绍

这里只需要第一个参数就好了

这张素材宽高：2128*241、总共为8帧，故 steps(8)

CSS3 animation属性中的steps实现GIF动图(逐帧动画)

.main {

margin: 100px auto;

width: 266px;

height: 241px;

background: url(./people.jpg);

background-size: 2128px;

animation: sprite 1s steps(8) infinite

}

@keyframes sprite {

0% {

background-position: 0 0

}

100% {

background-position: 100% 0;

}

}

ok，大功告成，效果预览，当然这张GIF来的

css3 animation 属性众妙

animation中的steps()逐帧动画

在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ...

css3 animation实现逐帧动画

css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...