CSS3 animation per frame animation

Objective

CSS3 Loading Animation

Animation introduction

Definition and usage

The animation property is a shorthand property that is used to set six animation properties.

Animation:name Duration timing-function delay interation-count direction;

Value	Describe
Animation-name	Specifies the name of the keyframe that needs to be bound to the selector
Animation-duration	Specify the time taken to complete the animation, in seconds or milliseconds
Animation-timing-function	Speed curve for specified animation
Animation-delay	Specify the delay before the animation starts
Animation-interation-count	Specify the number of animations to play
Animation-direction	Specifies whether the animation should rotate backwards

Animation-timing-function has 9 values, ease | Linear | ease-in | Ease-out | Ease-in-out | Step-start | Step-end | Steps ([, [Start | end]]?) | Cubic-bezier (x1, y1, x2, y2)

Ease: Animation starts slowly, then accelerates, finally slows down, defaults (Cubic-bezier (0.25,0.1,0.25,1))
Linear: Animation is the same speed from beginning to end (equals Cubic-bezier (0,0,1,1))
Ease-in: Starts at low speed (equals Cubic-bezier (0.42,0,1,1))
Ease-out: End at low speed (equals Cubic-bezier (0,0,0.58,1))
Ease-in-out: Animation starts and ends at low speed (equals Cubic-bezier (0.42,0,0.58,1))

Steps ([N, [Start | end]]) step function, this function can divide the animation average into basically equal, n is a natural number, meaning to divide an animation evenly into N, until the average to finish the animation. There is a difference with linear. Linear is the animation as a whole, the middle without power, and steps is the animation segment average execution.

Animation-direction, specifies whether the animation is moving in the opposite direction, value: normal | Reserve | Alterative-reserve | Alterative

Reserve--Reverse rotation

Alterative--Start normal rotation, after sowing once and then reverse, if set animation-iteration-count:1 the value is invalid

Alterative-reserve--Start for reverse rotation, after sowing once after the return to normal rotation, alternating rotation, set count of 1, the value is invalid

Animation-play-state, new property, defines whether the animation is running or paused, the property value is running and paused

Animation-fill-mode, defines the state after the animation has finished playing, with a value of none | Forwards | Backwards | Both

Forward refers to the state in which the animation is stopped, backwards refers back to the beginning of the animation,

Browser support

Reference Links:

Using Css3-animation to animate frames per frame

CSS3 animation per frame animation