CSS 3 Animation 2D

Animation is divided into two, 1, each frame animation animation is a frame 2, keyframe animation, to determine the key frame of the computer will automatically over

If you encounter an incompatibility problem in the animation, you also want to prefix

@-webkit-keyframes Rule @-webkit-animation Property

Keyframe Animation: @keyframes + animation name

The last frame of the first frame

From: First frame animation
To: Last frame animation

@keyframes donghua{

from {
width:100px;height:100px;
}
to {
width:20px;height:200px
}

keyframe Animation: @keyframes + animation name

Setting keyframes in the form of progress
@keyframes myanimation{
0%{width:50px; height:100px}
50%{width:100px;height:100px}
100%{width:100px;height:200px}
}

Invoke animation

To invoke an optional property of an animation

(3) Setting the animation delay time
Animation-delay:1s;

(4) Set the direction of the animation direction
Normal: Default direction
Reverse: Invert
Alternate: Successive inversion

Animation-direction:alternate;

(5) Set the number of times the animation executes iteration
Trigger an animation execution condition and keep the condition
Infinite: Unlimited or digital

Animation-iteration-count:1;

(6) Set the fill state before and after the element plays
None: Default value;
Backwards: The same state as the first frame before the element animation is set
Forwards: Sets the state of the element after the animation is complete and the last frame is the same
Both:backwards+forwards

Animation-fill-mode:both;

(7) Controlling the state of element animation playback
Running: execution;
Paused: Pause

animation-play-state:paused;

(8) control the animation to play the form of motion
animation-timing-function:ease-in;

Linear uniform

Ease buffering

Ease-in from slow to fast

Ease-out from fast to slow

Ease-in-out from slow to fast and slow

CSS 3 Animation 2D