【Foreword】
This article summarizes the use of CSS steps to achieve frame-by-frame animation.
Frame-by-frame animations in web pages can be roughly divided into two categories of implementation methods, namely, using JS control and using CSS alone. The advantages and disadvantages of the two are generally summarized as follows: JS animation is more controllable, but High overhead and complex implementation. CSS animation implementation is simpler than JS.
PS: It is rumored that CSS animation performance is better, but the web environment is too complicated. Which performance is better may need to be tested according to the specific situation. Common web animation forms reference: Summary of 9 common implementation methods of web animation
In addition, in the animation controlled by JS, it can be divided into canvas animation controlled by JS, SVG animation, and animation realized by directly controlling the position of pictures and elements. In a word, JS animations are more complicated.
【main body】
The standardization of animation effects is directly realized through CSS, and the resource consumption is small.
Disadvantages: Old IE does not support, modern browser support is different, and the interactive function is weak. So only for modern browsers
[The principle of CSS to achieve frame-by-frame animation]
CSS frame-by-frame animation is achieved by constantly changing the background of each stage in the keyframes.
For example, using different backgrounds at 0% and 100% respectively achieves the simplest screen switching.
The general practice is to first make a sprite image from different frames of the animation, and then continuously change the background-position to achieve the transformation effect, but there are such problems when using it directly: The default animation transition method of CSS animation is smooth and smooth. The transition will cause a similar sliding effect to the frame-by-frame animation, so the steps attribute in the animation-timing-function of the animation time function is needed to set the transition method.
Here is the demo comparison first:
.avatar {
height: 200px;
width: 200px;
background: url(http://ww1.sinaimg.cn/large/67c839fajw1f2staqebnxj20nk05wjru.jpg) no-repeat 0 0;
/*visibility: hidden; */
}
.above:hover {
-webkit-animation: run .6s steps(1) infinite;
/*-webkit-animation: run .6s steps(1) infinite; */
}
.down:hover {-webkit-animation: run .6s linear infinite;}
@keyframes run {
0% {background-position: 0 0;}
25% {background-position: -200px 0;}
50% {background-position: -400px 0;}
75% {background-position: -600px 0;}
100% {background-position: 0 0;}
}
@keyframes run2 {
0% {background-position: 0 0;}
100% {background-position: -800px 0;}
}
<h3>tips: hover over the image to preview the effect</h3> <p>Use the steps property to control the time function</p> <div class = 'avatar above'></div> <p>Use linear control time function</p> <div class = 'avatar down'></div>
The difference between these two animations is only the time function parameter in the animation:
.above:hover {
-webkit-animation: run .6s steps(1,start) infinite;
} /* Use steps to achieve frame-by-frame animation */
.down:hover {
-webkit-animation: run .6s linear infinite;
} /* The regular time function linear produces a smooth sliding effect*/
【Understand steps】
For the understanding of the steps attribute, I have read several blogs, but the more I talk about it, the more evil it is. From my understanding, this attribute is used to control the transition (tween) method of the animation keyframes. Conventional CSS animation transitions are smooth. , as shown in the demo above, the browser will automatically insert a tween animation for the interval of the key frame (friends who have learned flash should be familiar with these concepts), so that there will be no visual flickering, css controls the transition method The attribute is animation-timing-function, its value can be set in addition to the Bezier curve Cubic-bezier (similar ease, linear, etc. are also curve functions) and our steps, the syntax of this attribute is steps(number, start|end) accepts two parameters, the first parameter is a positive integer, which divides an animation into number segments, and the second parameter is the change position of the key frame, the default is end
steps divide the animation into n segments (n is the first parameter), which is to set the number of intervals of the tween animation, such as the transition from white to black, the regular curve function will gradually tween the gray in it, and if it is set to steps (2), then there is only one tween in the middle that is gray with rgb of 125, and start and end can be understood as the jump timing of the key frame. When set to start, the key frame completes the jump at 0 seconds. The jump is done, so what we see visually is one frame after the first keyframe
Setting its first parameter to steps(1) means that the animation will not be segmented, that is, the tween animation will not be inserted, which also realizes frame-by-frame playback. Setting two keyframes, segmented by steps(4), saves the need to manually set the percentage keyframes in keyframes.
So in the comparison demo, we can add another animation to achieve the same effect:
@keyframes run2 {
0% {background-position: 0 0;}
100% {
background-position: -800px 0; /* 直接将后关
键帧设置为图片末尾，在animation属性设置中就可以利
用steps分段的特性来省去手动设置keyframes
*/
}
}
等效转换：
.above:hover {
-webkit-animation: run .6s steps(4) infinite;
/*-webkit-animation: run .6s steps(1) infinite; */
}
@keyframes run {
from{background-position:0px 0px;}
to{background-position: -800px 0px;}
}
等价于
.above:hover {
-webkit-animation: run .6s steps(1) infinite;
/*-webkit-animation: run .6s steps(1) infinite; */
}
@keyframes run {
0% {
background-position: 0 0;
}
25% {
background-position: -200px 0;
}
50% {
background-position: -400px 0;
}
75% {
background-position: -600px 0;
}
100% {
background-position: 0 0;
}
}
.