CSS3 - @keyframes-HTML Tutorial-php.cn

CSS3 - @keyframes

零下一度

Release： 2017-06-29 11:54:07

Original

1563 people have browsed it

Syntax

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

Copy after login

Required. One or more legal CSS style properties.

Value	Description
animationname	Required. Defines the name of the animation.
keyframes-selector	##Required. The percentage of animation duration. Legal values: 0-100% ##from (same as 0%) to (same as 100%)
css-styles

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>

Copy after login

The above is the detailed content of CSS3 - @keyframes. For more information, please follow other related articles on the PHP Chinese website!