Demonstration of animation-timing-function effect in CSS3 animation

The CSS3 animation (animation) properties are as follows:

Property	Value	Description
Animation-name	Name	Specifies the keyframes name to use for the element
Animation-duration	Time (MS, s)	Specify how long the animation is
Animation-timing-function	Linear, ease (default), Ease-in, Ease-out, Ease-in-out, Cubic-bezier (n,n,n,n)	Set how the animation will complete a cycle
Animation-delay	Time (MS, s)	Set the delay interval before the animation starts (only once)
Animation-iteration-count	1 (default), N, Infinite	Define the number of animation plays
Animation-direction	Normal (default), reverse, alternate, alternate-reverse	Specifies whether to rotate the animation in reverse
Animation-fill-mode	None (default), forwards, backwards, both	Specifies the style to apply to elements when the animation is not playing (when the animation is complete, or when the animation has a delay that does not start playing).
Animation-play-state	Running, paused	Specify whether the animation runs or pauses

This blog post mainly records the animation-timing-function of the various values of the dynamic effect, convenient for future inspection.

1. Linear: Animation from beginning to end speed is the same, constant change

2. Ease: slow-speed

3. Ease-in: slow, constant speed

4. Ease-out: Constant speed, slow

5. Ease-in-out: Slow-speed, constant-speed

The summary of the above 5 animations is based on a visual description, please refer to the detailed instructions

6. Cubic-bezier (0.68,-0.55, 0.27, 1.55): 4 parameters set by themselves

　　Bessel functions are often used to create a rebound effect of the animation, parameter related view Details

Animation-timing-function effects in CSS3 animations