当前位置: 首页 > Web前端 > CSS

CSS3帧动画

时间:2023-03-30 13:54:50 CSS

制作帧动画时,一般采用Sprite图片的方式,通过切换图片的位置,使其不断播放,从而形成动画。精灵图精灵图的制作可以用指南针来制作,也可以借助一些小工具来制作。提供了一个在线制作精灵图的网站。CSSSpritesGenerator逐帧动画我们可以使用css3关键帧来进行逐帧动画。sprite{height:78px;宽度:28px;背景:url(images/people.png)不重复;背景尺寸:112px78px;动画:人物.5s步(1,开始)无限;}@keyframes人物{0%{background-position:00}25%{background-position:-28px0;}75%{background-position:-56px0}100%{background-position:-84px0;}}如果动画没有设置steps(1,start/end),动画帧之间会使用默认的transition方式,此时观察到的动画会变成一个滑动方法,这不是我们想要的。为此,我们需要使用steps函数。stepssteps(number_of_steps,direction)steps计时函数接受两个参数,steps(n,start/end),其中n为正整数,表示分为若干步完成执行,后一个参数可选,以及默认是结束。start表示一个左连续函数,在每个区间开始时发生阶跃变化,直到区间时间结束end表示一个右连续函数,在每个区间结束时发生阶跃变化关于steps()的更多信息,请参阅如何在CSS动画中使用steps()。对于人物行走的动画,由于是一个连续循环的过程,设置开始或者结束是可行的。对比background-position和translate3d方法background-position会导致重绘,而translate3d不会。(引起回流和重绘的属性可以查看csstriggers这个网站,这个网站的介绍可以查看这个答案。)同时translate3d会开启GPU渲染加速,性能更好。总之,translate3d方法是优越的。使用translate3d改造后的代码,使用after伪类填充背景,然后控制元素的移动,实现逐帧动画。.sprite{overflow:hidden;//设置超出隐藏高度:78px;宽度:28px;}.sprite:after{内容:"";//添加内容,内容会显示出来display:block;宽度:112px;高度:78px;背景:url(images/people.png)不重复;背景尺寸:112px78px;动画:人物.5s步(1,开始)无限;}@keyframes人物{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(-28px,0,0)}75%{变换:translate3d(-56px,0,0)}100%{transform:translate3d(-84px,0,0)}}