In-depth understanding of CSS3 Animation frame animation (steps)_html/css_WEB-ITnose

Author: Aaron's Blog

Website: http://www.cnblogs.com/aaronjs/p/4642015.html

-------- -------------------------------------------------- -------------------------------------------------- --------------------

I have used CSS3 5 years ago, and it has always been a cutting-edge technology including company projects.

Recently I was writing about the Qixi Festival theme of MOOC.com, and I used a lot of CSS3 animations. But I really settled down and carefully went into the various properties of CSS3 animations and found that it is still very deep. Here I will write about frame animations. Understanding of attributes

We know that CSS3 Animation has eight attributes

animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode
animation-timing-function

Most of 1-7 are introduced, but animation-timing-function is The attribute that controls time

In addition to the commonly used cubic Bezier curve, there is also a confusing steps() function

animation transitions in ease mode by default. It will insert tweening animation between each key frame, so the animation effect is coherent

In addition to ease, transition functions such as linear and cubic-bezier will also insert tweening for it. But some effects do not require tweening, but only need to jump between key frames. In this case, the steps transition method should be used

animation-timing-function to specify the speed curve of the animation

on the w3school website above The usage method is given, but a very important step is missed

To put it simply, we have been using animation to basically implement linear gradient animation

such as

position From the starting point to the end point at a fixed time
The size changes linearly at a fixed time
The color changes linearly, etc.

See the linear animation of the effect: http://sandbox.runjs.cn/show/ 5u3ovsfb

Intercept the CSS as follows

.test1 {    width: 90px;    height: 60px;    -webkit-animation-name: skyset;    -webkit-animation-duration: 2000ms;    -webkit-animation-iteration-count: infinite; /*无限循环*/    -webkit-animation-timing-function: linear;}@-webkit-keyframes skyset {    0% { background: red;}    50%{ background: blue}    100% {background: yellow;}}

timing-function: linear defines a uniformly changing animation, that is, transitioning from red to blue in 2 seconds From color to yellow, it is a very linear color change

If you want to achieve a frame animation effect instead of a linear change, you need to introduce the step value. In other words, there is no transition effect, but one frame. Changes

You can also see the test frame animation: http://sandbox.runjs.cn/show/t5xqz6i4

Understanding steps

The steps function specifies a step function

The first parameter specifies the number of intervals in the time function (must be a positive integer)

The second parameter is optional and accepts two values: start and end, specifying the number of intervals in each interval There is a step change in the starting point or end point, and the default is end.

step-start is equivalent to steps(1,start). The animation is divided into 1 step. When the animation is executed, the part at the left endpoint is the start;

step-end is equivalent to steps(1 ,end): The animation is divided into one step. When the animation is executed, it starts from the end endpoint. The default value is end.

Look at the wrong understanding of the W3C specification transition-timing-function

steps first parameter:

steps(5, start)

The first parameter number of() is the specified number of intervals, that is, the animation is divided into n steps for staged display. It is estimated that most people understand it as the number of changes written in keyframes

For example:

@-webkit-keyframes circle {    0% {}    25%{}    50%{}    75%{}    100%{}}

I have always thought that the 5 in steps (5, start) refers to 0% 25% 50% 75% 100% in keyframes divided into 5 equal intervals

Why this misunderstanding occurs? Let’s look at an example

When the keyframes of keyframes have only 2 rules, suppose we have a 400px length sprite image

@-webkit-keyframes circle {    0% {background-position-x:0;}    100%{background-position-x: -400px;}}    

If you set steps (5, start) at this moment, you will find that the 5 pictures will have the effect of frame animation, because the 5 steps in the 0% ? 100% rule are divided into 5 equal parts

In fact, such a keyframe effect will be executed internally

@-webkit-keyframes circle {    0% {background-position-x: 0;}    25% {background-position-x: -100px;}    50% {background-position-x:-200px;}    75%{background-position-x: -300px;}    100%{background-position-x: -400px;}}　　

Slightly modify this rule and add a 50% state

@-webkit-keyframes circle {    0% {background-position-x: 0;}    50% {background-position-x: -200px;}    100%{background-position-x: -400px;}}

Then the effect of using steps(5, start) will be messed up

You will be very confused at this moment, so the key is to understand the target point of the first parameter, first introduce a core point:

timing-function acts between every two keyframes, rather than the entire animation

Then the first parameter is easy to understand. The settings of steps are for between two keyframes. Instead of the entire keyframes, so the first parameter corresponds to the change of each step

. In other words, it changes 5 times between 0-25, and 5 times between 25-50. Changes between 50-75 5 times, and so on

The second parameter is optional, accepting two values ​​​​start and end, specifying a step change at the starting point or end point of each interval , the default is end

Let’s look at the difference between step-start and step-end through the case

@-webkit-keyframes circle {    0% {background: red}    50%{background: yellow}    100% {background: blue}}

step-start: Yellow and blue switch each other

step-end: Red and yellow switch between each other

Both parameters will selectively skip the front and back parts, start skips 0%, end skips 100%

step- During the change process of start, the interval animation is filled with the display effect of the next frame, so 0% to 50%? directly displays yellow yellow

Step-end is the opposite of the above. It fills the interval animation with the display effect of the previous frame, so 0% to 50% directly displays red red

Quoting the working mechanism of a step from w3c Figure

Summary:

steps function, which can pass in two parameters, the first is an integer greater than 0, which divides the interval animation into specified equal parts number of small interval animations, and then determine the display effect based on the second parameter.

After the second parameter is set, it is actually synonymous with step-start and step-end. The display effect is judged in the divided small interval animation. It can be seen that: steps(1, start) is equal to step-start, steps(1, end) is equal to step-end

The core point is: timing-function acts between every two key frames, rather than the entire animation.

demo: http://designmodo.com/steps-css-animations/