Home > Article > Web Front-end > CSS3 - @keyframes
CSS3 - @keyframes
- 零下一度Original
- 2017-06-29 11:54:071518browse
Syntax
@keyframes animationname {keyframes-selector {css-styles;}}| Value | Description |
| animationname | Required. Defines the name of the animation. |
| keyframes-selector |
##Required. The percentage of animation duration. Legal values:
|
| css-styles | Required. One or more legal CSS style properties.
Definition and Usage
With the @keyframes rule, you can create animations.
The principle of creating animation is to gradually change one set of CSS styles into another set of styles.
You can change this set of CSS styles multiple times during the animation process.
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.Browser support
Currently, browsers do not support @keyframes rules.
Firefox supports alternative @-moz-keyframes rules.
Opera supports alternative @-o-keyframes rules.
Safari and Chrome support alternative @-webkit-keyframes rules.
Example:
<!DOCTYPE html><html><head><style>
div{width:100px;height:100px;background:red;position:relative;animation:mymove 5s infinite;-moz-animation:mymove 5s infinite; /* Firefox */-webkit-animation:mymove 5s infinite; /* Safari and Chrome */-o-animation:mymove 5s infinite; /* Opera */}@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;}}
@-moz-keyframes mymove{ /* Firefox */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;}}
@-o-keyframes mymove {/* Opera */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><b>注释：</b>本例在 Internet Explorer 中无效。</p><div></div>
</body>
</html>
The above is the detailed content of CSS3 - @keyframes. For more information, please follow other related articles on the PHP Chinese website!