Home > Article > Web Front-end > How to use css @keyframes rule
@keyframes is a rule of CSS that can be used to define the behavior of a period of CSS animation; it needs to be used together with the animation attribute to create simple animation effects. Use animation properties to control the appearance of animations and bind animations to selectors.
How to use css @keyframes rules?
Animations can be created through @keyframes rules.
Syntax
@keyframes animationname {keyframes-selector {css-styles;}}
animationname: Required. Defines the name of the animation.
keyframes-selector: required. Percentage of animation duration.
Legal values:
● 0-100%
● from (same as 0%)
● to (same as 100% )
css-styles Required. One or more legal CSS style attributes
Description:
The principle of creating animation is to gradually change one set of CSS styles into another set of styles . This set of CSS styles can be changed multiple times during the animation.
Specify the time when the change occurs as a percentage, or through the keywords "from" and "to", which are equivalent to 0% and 100%. 0% is the start time of the animation, 100% is the end time of the animation. For best browser support, you should always define 0% and 100% selectors.
Note: Please use the animation property to control the appearance of the animation and bind the animation to the selector.
css @keyframes attribute Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s 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;} } </style> </head> <body> <p><strong>注意:</strong>@keyframes不兼容IE 9 and 以及更早版本的浏览器.</p> <div></div> </body> </html>
Rendering:
The above is the detailed content of How to use css @keyframes rule. For more information, please follow other related articles on the PHP Chinese website!