"2016.11.23" CSS3 animated animation effect

Property	Describe
@keyframes	Defining animations
Animation	Performing animations
Animation-name	Animation name
Animation-duration	The amount of time it takes to complete this animation is the number of seconds
Animation-timing-function	Speed of change during animation execution Linear The speed of the animation from beginning to end is The same. Test Ease Default. Animations at low speed Start, then speed up, Slows down before the end. Test Ease-in The animation starts at low speed. Test Ease-out The animation ends at low speed. Test Ease-in-out Animations start at low speed and end. Test
Animation-delay	How long is the delay after the execution of the animation unit is seconds and only takes effect once
Animation-iteration-count	How many times to perform animation n (1,2,3,4 ...) infinite infinity, loop
Animation-direction	The next direction the animation executes
Animation-play-state	Whether the animation executes
Animation-fill-mode	The state of the animation is done Value Describe None Does not change the default behavior. Forwards When the animation is complete, keep the last property value (defined in the last Keyframe). Backwards For a period of time specified by Animation-delay , before the animation is displayed, apply the Start property value ( Defined in the first keyframe). Both Both forward and backward fill modes are applied.

Syntax ①: Two states, from representing the initial state, to representing the final turning state

@keyframes Animation name {

from{

}

to{

}

}

Syntax ②: Split by percent (0-100%)

@keyframes Animation name {

0%{

}

20%{

}

40%{

}

60%{

}

80%{

}

100%{

}

}

"2016.11.23" CSS3 animated animation effect