CSS3 @ keyframes usage (simple animation implementation), css3 @ keyframes

CSS3 @ keyframes usage (simple animation implementation), css3 @ keyframes

Definition:

The @ keyframes rule allows you to create animations.

The principle of creating an animation is to gradually change one set of CSS styles to another.

You can change the CSS style multiple times during the animation process.

Specify the time when a change occurs by percentage, or use the keywords "from" and "to", which is equivalent to 0% and 100%.

0% is the start time of the animation, and 100% is the end time of the animation.

Always define the 0% and 100% selectors for optimal browser support.

Important:Compatibility problems! @ Keyfrmes is not compatible with IE 9 and earlier browsers.

Syntax:

@keyframes animationname {keyframes-selector {css-styles;}}

 

Animationname	Required. Define the animation name.
Keyframes-selector	Required. Animation duration. Valid value: 0-100% From (same as 0%) To (same as 100%)
Css-styles	Required. One or more valid CSS style attributes.

@ Keyframes mymove {0% {top: 0px;} 25% {top: 200px;} 75% {top: 50px} 100% {top: 100px ;}} @-webkit-keyframes mymove/* Safari and Chrome */{0% {top: 0px;} 25% {top: 200px;} 75% {top: 50px} 100% {top: 100px ;}}
// Multiple feature changes, separated.

@-Webkit-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;}
}

Use the mymove animation method:

Selector {animation: mymove 5S infinite;-webkit-animation: mymove 5S infinite;/* Safari and Chrome, infinite represents an infinite loop, you can also set the number of times n:
Animation-interation-count: n*/
}

Summary: @ keyframes is closely related to animation. If you want to have a thorough understanding of it, you need to learn it together with the use of animation.