CSS3 animation study notes

http://www.w3school.com.cn/cssref/pr_animation.asp

Definition and Usage

The animation property is a shorthand property for setting six animation properties:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

grammar

animation: name duration timing-function delay iteration-count direction;

value	describe
animation-name	Specifies the keyframe name that needs to be bound to the selector. .
animation-duration	Specifies the time, in seconds or milliseconds, to complete the animation.
animation-timing-function	Specifies the speed curve for the animation.
animation-delay	Specifies the delay before the animation starts.
animation-iteration-count	Specifies the number of times the animation should play.
animation-direction	Specifies whether the animation should take turns playing in reverse.

grammar

animation-timing-function: value;

The animation-timing-function uses a mathematical function called the Cubic Bezier function to generate the velocity curve. You can use your own values ​​in this function, or predefined values:

value	describe	test
linear	The speed of the animation is the same from start to finish.	test
ease	default. The animation starts at a low speed, then speeds up and slows down before ending.	test
ease-in	The animation starts at a low speed.	test
ease-out	The animation ends at a low speed.	test
ease-in-out	The animation starts and ends at low speed.	test
cubic-bezier(n,n,n,n)	Own value in cubic-bezier function. Possible values ​​are numbers from 0 to 1.

grammar

animation-direction: normal|alternate;

value	describe	test
normal	Defaults. The animation should play normally.	test
alternate	The animation should take turns playing in reverse.	test

grammar

animation-iteration-count: n|infinite;

value	describe	test
n	A value that defines the number of times the animation is played.	test
infinite	Specifies that the animation should play indefinitely.	test