Deep understanding of CSS animation and cssanimation

Deep understanding of CSS animation and cssanimation
* If directory [1] defines [2] Key Frames [3] animation attributes [4] multi-value [5] before API

Transition implements simple animation through smooth transition between the initial and end states, while animation implements more complex animation effects through the key frame @ keyframes. This article describes how to use animation.

 

Definition

Like transition, animation is also a composite attribute, including animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-play-state, and animation-fill-mode 8 sub-attributes in total

[Note] IE9-not supported; safari4-8, IOS3.2-8.4, android2.1-4.4.4 needs to be added-webkit-Prefix

Animation-name: animation name (default value: none) animation-duration: duration (default value: 0) animation-timing-function: Time function (default value: duration) animation-delay: delay Time (0 by default) animation-iteration-count: number of cycles (1 by default) animation-direction: animation direction (normal by default) animation-play-state: playing status (default value: running) animation-fill-mode: fill mode (default value: none)

Div {width: 300px; height: 100px; background-color: pink; animation-name: test; animation-duration: 3 s; animation-timing-function: progress; animation-delay: 0 s; animation-iteration-count: infinite; animation-direction: normal; animation-play-state: running; animation-fill-mode: none ;} /* about keyframes key frames. */@ keyframes test {0% {background-color: lightblue;} 30% {background-color: lightgreen;} 60% {background-color: lightgray;} 100% {background-color: black ;}}

 

Key Frame

It takes two steps to create an animation by using the animation key frame.

The key frame syntax starts with @ keyframes, followed by the animation name animation-name. From is equivalent to 0%, and to is equivalent to 100%. The code in the curly braces following the percentage represents the corresponding style at this time

@keyframes animation-name{    from | 0%{}    n%{}    to | 100%{}}

[1] The percentage order does not have to be arranged from 0% to 100%, and the browser will automatically parse it in the order of 0%-100%.

[Note] the 0% percentage cannot be omitted.

@keyframes test{    100%{background-color: black;}    60%{background-color: lightgray;}    30%{background-color: lightgreen;}    0%{background-color: lightblue;}}

div{    width: 300px;    height: 100px;    background-color: pink;    animation-name: test;    animation-duration: 3s;    animation-iteration-count: infinite;}

[2] If there is a negative percentage or a percentage higher than 100%, the key frame will be ignored

/* The code corresponding to-20% and 120% is invalid */@ keyframes test {-20% {background-color: red;} 0% {background-color: lightblue ;} 30% {background-color: lightgreen;} 60% {background-color: lightgray;} 100% {background-color: black;} 120% {background-color: yellow ;}}

[3] If 0% or 100% does not specify a key frame, the default attribute value of this element is used.

/* The color corresponding to 0% and 100% is the default value pink */@ keyframes test {30% {background-color: lightgreen;} 60% {background-color: lightgray ;}}

[4] If multiple @ keyframes exist, the browser only recognizes the value in the last @ keyframes.

/* Overwrite the front */@ keyframes test {0% {background-color: lightblue;} 30% {background-color: lightgreen;} 60% {background-color: lightgray ;} 100% {background-color: black; }}@ keyframes test {0% {background-color: blue;} 30% {background-color: green;} 60% {background-color: gray;} 100% {background-color: black ;}}

[5] The null keyframes rules are valid and will overwrite the previous valid key frame rules.

/* Overwrite the front */@ keyframes test {0% {background-color: lightblue;} 30% {background-color: lightgreen;} 60% {background-color: lightgray ;} 100% {background-color: black ;}@ keyframes test {}

 

Animation attributes

Animation name

Animation-name

Value: none | <single-animation-name> [, <single-animation-name>] *

Initial Value: none

Apply to: All elements

Inheritance: None

<Single-animation-name>: none | Custom animation name

[1] If multiple animations attempt to modify the same attributes, the animation list will overwrite the previous one.

/* The Order of the animation-name is test1 and test2, And they modify the same attributes and overwrite the previous attributes. Therefore, test2 is valid and test1 is invalid */div {width: 300px; height: 100px; background-color: pink; animation-name: test1, test2; animation-duration: 3 s; animation-iteration-count: infinite ;} @ keyframes test2 {0% {background-color: blue;} 30% {background-color: green;} 60% {background-color: gray;} 100% {background-color: black ;}@ keyframes test1 {0% {background-color: lightblue;} 30% {background-color: lightgreen;} 60% {background-color: lightgray ;} 100% {background-color: black ;}}

[2] if the other seven sub-attributes of the animation are different from the animation name length, the length of the animation name list determines the final length. The excess values are unique and the missing values are repeated in order.

div{    width: 300px;    height: 100px;    position: relative;    background-color: pink;    animation-name: test1,test2,test3;    animation-duration: 3s,1s;    animation-iteration-count: infinite;}@keyframes test1{    0%{background-color: lightblue;}    30%{background-color: lightgreen;}    60%{background-color: lightgray;}    100%{background-color: black;}}@keyframes test2{    0%{font-size: 20px;}    30%{font-size: 30px;}    60%{font-size: 40px;}    100%{font-size: 50px;}}@keyframes test3{    0%{left: 0px;}    30%{left: 30px;}    60%{left: 40px;}    100%{left: 50px;}}

<Div> test text </div>

 

Duration

Duration refers to the animation completion time.

Animation-duration

Value: <time> [, <time>] *

Initial Value: 0 s

Apply to: All elements

Inheritance: None

animation-duration: <time>[,<time>]*

0 s means that the animation has no time, and the duration cannot be negative.

Animation-name: test1, test2; <! -- When the duration of test1 is set to a negative value, the animation duration becomes invalid. Therefore, test2 has no animation effect --> animation-duration:-1 s, 1 s;

 

Time Functions

Animation-timing-function

Value: <single-timing-function> [, <single-timing-function>] *

Initial Value: bytes

Apply to: All elements

Inheritance: None

The time function of animation is similar to the time function of transition. The time function can be applied to the entire animation or to a certain percentage of two key frames.

div{    width: 300px;    height: 100px;    position: relative;    background-color: pink;    animation-name: test;    animation-duration: 5s;    animation-iteration-count: infinite;}@keyframes test{    0%{left: 0px;animation-timing-function: ease;}    20%{left: 50px;animation-timing-function: linear;}    40%{left: 100px;animation-timing-function: ease-in;}    60%{left: 150px;animation-timing-function: ease-out;}    80%{left: 200px;animation-timing-function: step-start;}    100%{left: 250px;animation-timing-function: step-end;}}

 

Number of cycles

Animation-iteration-count

Value: infinite | <number> [, infinite | <number>] *

Initial Value: 1

Apply to: All elements

Inheritance: None

The default value is 1, which can be an integer or decimal number, but cannot be 0 or negative. If infinite, the animation is infinite.

 

Animation direction

The animation direction is used to determine whether the animation needs reverse playback.

Animation-direction

Value: <single-animation-direction> [, <single-animation-direction>] *

Initial Value: normal

Apply to: All elements

Inheritance: None

<Single-animation-direction> = normal | reverse | alternate-reversenormal: Forward playback reverse: reverse playback alternate: If the animation is played only once, it is the same as forward playback. If you play more than two times, the effect of an even number of times is reverse playback of alternate-reverse: If the animation is played only once, it is the same as reverse playback. If you play more than two times, the even number of times is positive.

[Note] safari does not support the reverse attribute or the alternate-reverse attribute.

 

Animation status

Animation-play-state

Value: running | paused [, running | paused] *

Initial Value: running

Apply to: All elements

Inheritance: None

Running indicates playing, paused indicates pausing the animation

 

Delay Time

Defines the time delay when the animation starts playing.

Animation-delay

Value: <single-animation-delay> [, <single-animation-delay>] *

Initial Value: 0 s

Apply to: All elements

Inheritance: None

<single-animation-delay>= <time>[,<time>]*

If this value is negative, it indicates that the animation start time is changed from 0 s to the absolute value of the delay time.

 

Fill Mode

Define the action before and after the animation start frame.

[Note] android2.1-3 does not support animation-fill-mode.

Animation-fill-mode

Value: <single-animation-fill-mode> [, <single-animation-fill-mode>] *

Initial Value: none

Apply to: All elements

Inheritance: None

<single-animation-fill-mode> = none | forwards | backwards | both

None: After the animation ends, the element is moved to the initial state. [note] the Initial State does not refer to the element state of 0%, but the element property value forwards: the position of an element at the animation end [note] the position at the animation end is not necessarily defined by 100%, because the animation may reverse motion or the number of animations may be decimal backwards: in the animation-delay Time, the element is immediately moved to the starting position of the animation. If the element does not have animation-delay, the effect is the same as that of none. [note] the starting position of the animation is not necessarily the position defined by 0%, because the animation may reverse motion. Both: both forwards and backwards

[Note] when the duration of the animation-duration is 0 s, the animation-fill-mode is still applicable. When the value of the animation-fill-mode is backwards, fill the animation in any animation-delay phase. When the value of animation-fill-mode is forwards, the animation is retained on the 100% key frame.

 

Multi-Value

Animation

Value: <single-animation> [, <single-animation>] *

Initial Value: None

Apply to: All elements

Inheritance: None

<single-animation> = <single-animation-name> || <single-animation-duration> || <single-animation-timing-function> || <single-animation-delay> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

[Note] the duration is before and after the delay time. If only one time exists, the duration is

div{    width: 300px;    height: 100px;    background-color: pink;    animation: 1s test1,infinite test2 2s 1s;}@keyframes test1{    30%{background-color: red;}    60%{background-color: blue;}    100%{background-color: green;}}@keyframes test2{    100%{color: white;}}

 

API

Animation involves three events: animationstart, animationend, and animationiteration. The bubbles of these three events are both yes and cancelalbe is no.

[Note] For safari, the animation events are webkitAnimationStart, webkitAnimationEnd, and webkitAnimationIteration.

[Note] animation events only support DOM2-level event handlers.

Animationstart

Occurs at the beginning of the animation

[1] If delay exists and delay is positive, the element will trigger the event after the delay is completed.

[2] If delay is a negative value, the element first changes the initial value to the absolute value of delay, and then triggers this event.

OSb. addEventListener ('animationstart', function () {this. innerHTML = 'animation Start'; this. style. background = 'lightgreen' ;}, false );

 

Animationend

Occurs at the end of the animation

Test. addEventListener ('animationend', function () {this. style. background = "lightgreen"; this. innerHTML = 'animation termination';}, false );

 

Animationiteration

This event is triggered only when the number of iteration-count cycles exceeds 1 at the end of an animation loop.

var i = 0;oSb.addEventListener('animationiteration',function(){    i++;    this.innerHTML = i;},false);

[Supplement]

The animation effect of the animation is re-triggered only when the animation-name is changed.

oSb.style.animationName = 'none';setTimeout(function(){    oSb.style.animationName = 'test';},100);