CSS (5): Animation and css Animation

CSS (5): Animation and css Animation

• Animation-name

Animation name
Syntax: animation-name: none | <identifier>
The animation name defined by the element must be used with the rule @ keyframes, because the animation name is defined by @ keyframes.

 

• @ Keyframes

Syntax:
@ Keyframes <identifier> {
[From | to | <percentage>] {sRules} [, *]
}
It is called a key frame, which is similar to a key frame in Flash. In CSS3, it mainly starts with "@ keyframes", followed by an animated name with a pair of curly braces "{…}", There are some style rules in brackets for different time periods.

1/* define an animation named "fromLeftToRight" to the right */2 @ keyframes fromLeftToRight {3 from {margin: 0;} 4 to {margin: 100px;} 5}

• Animation-duration

Set the animation duration
Syntax: animation-duration: <time> [, <time>] *

1/* give the div an animation named "fromLeftToRight" for a second. */2 div {3 animation-name: fromLeftToRight; 4 animation-duration: 1 s; 5}

• Animation-timing-function

Animation transition Speed Type
Syntax: animation-timing-function: Internal | linear | internal-in | memory-out | memory-in-out

1/* give the div an animation named "fromLeftToRight", lasting for one second, and the Transition type is bytes-in */2 div {3 animation-name: fromLeftToRight; 4 animation-duration: 1 s; 5 animation-timing-function: animation-in; 6}

• Animation-delay

Set the animation Delay Time
Syntax: animation-delay: <time> [, <time>] *

1/* give the div an animation named "fromLeftToRight". After a delay of one second, execute */2 div {3 animation-name: fromLeftToRight; 4 animation-duration: 1 s; 5 animation-timing-function: animation-in; 6 animation-delay: 1 s; 7}

• Animation-iteration-count

Set the number of animation executions
Syntax: animation-iteration-count: infinite | <number>
Infinite indicates an unlimited number of times

1/* give the div an animation named "fromLeftToRight" and stop it twice */2 div {3 animation-name: fromLeftToRight; 4 animation-duration: 1 s; 5 animation-timing-function: animation-in; 6 animation-iteration-count: 2; 7}

• Animation-direction

Sets whether an animation is executed in reverse order in a loop.
Syntax: animation-direction: normal | reverse | alternate-reverse
Note:
Normal
Reverse: run in the opposite direction
Alternate: the animation runs normally first, then runs in the opposite direction, and continues to run alternately.
Alternate-reverse

1/* give the div an animation named "fromLeftToRight" and repeatedly run */2 div {3 animation-name: fromLeftToRight; 4 animation-duration: 1 s; 5 animation-timing-function: memory-in; 6 animation-iteration-count: infinite; 7 animation-direction: alternate; 8}

• Animation-fill-mode

Sets the animation end state.
Syntax: animation-fill-mode: none | forwards | backwards | both
Note:
None: default value. Do not set the animation status
Forwards: sets the object state to the state when the animation ends.
Backwards: sets the object status to the state when the animation starts.
Both: Set the object status to the animation end or start state.

1/* give the div an animation effect named "fromLeftToRight" and the element is located at the end of the animation */2 div {3 animation-name: fromLeftToRight; 4 animation-duration: 1 s; 5 animation-timing-function: animation-in; 6 animation-iteration-count: 3; 7 animation-fill-mode: forwards; 8}

• Animation-play-state

Set the animation playback status
Syntax: animation-play-state: running | paused

1/* give the div an animation named "fromLeftToRight" and pause the animation when the div is in the hover state */2 div {3 animation-name: fromLeftToRight; 4 animation-duration: 1 s; 5 animation-timing-function: memory-in; 6 animation-iteration-count: infinite; 7} 8 div: hover {9 animation-play-state: paused; 10}

• Animation

Short attributes of an animation
Syntax:
Animation: [animation-name] | [animation-duration] | [animation-timing-function] | [animation-delay] | [animation-iteration-count] | [animation-direction] | <single-animation-fill-mode> | <single-animation-play-state> [, *]