Create animations using @keyframes in CSS3, examples

Animation properties can gradually change from one value to another, such as size, quantity, percentage, and color. With @keyframes you can create animations that are created by gradually changing from one CSS style setting to another. Animation in the work is also a lot of, next to introduce you how to use the animation.

I. @keyframes rules of grammar
You can change CSS styles several times during the animation process. The specified change occurs when you use%, or the keyword "from" and "to", which is the same as 0% to 100%. 0% is the start animation, and 100% is when the animation is complete. For best browser support, you should always define a selector of 0% and 100%.

@keyframes is an animation that can be understood as a group composed of multiple transform.
Grammar:
@keyframes Animation Name {
from{Css1}
to{CSS2}
}

@keyframes Animation Name {
0% {CSS1}
50% {CSS2}
100% {CSS3}
}
Note: Use the Animation property to control the appearance of the animation, and also use a selector to bind the animation.

Second, animation attribute value

When this animation is called with animation, animation consists of six attributes:

ANIMATION-NAME Specifies the name of the keyframe to bind to the selector
Animation-duration animation Specifies how many seconds or milliseconds to complete
Animation-timing-function set how the animation will complete a cycle
Animation-delay to set the delay interval before the animation starts
Animation-iteration-count defines how many times an animation plays
Animation-direction Specifies whether the animation should be rotated in reverse
Animation: Animation name time speed curve starts when the number of delayed play turns reverse play
Let's take a look at:

Let the square go from the upper left corner to the lower right corner to the lower left corner and finally back to the upper left corner, and the color will change as well.

div{animation:mymove5s infinite;

 -webkit-animation:mymove5s infinite;/* Safari and Chrome */

}

@keyframes mymove

{

 0%  {top:0px;left:0px;background:red;}

 25% {top:0px;left:100px;background:blue;}

 50% {top:100px;left:100px;background:yellow;}

 75% {top:100px;left:0px;background:green;}

 100%{top:0px;left:0px;background:red;}

}

@-webkit-keyframes mymove/* Safari and Chrome */

{

 0%  {top:0px;left:0px;background:red;}

 25% {top:0px;left:100px;background:blue;}

 50% {top:100px;left:100px;background:yellow;}

 75% {top:100px;left:0px;background:green;}

 100%{top:0px;left:0px;background:red;}

}

The above content introduces the use of animation methods, we also need to do their own, more knock, try different effects!