CSS3, css3 Animation

CSS3, css3 Animation
Syntax

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

Value	Description
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.

 

Definition and usage

By using the @ keyframes rule, you can create an animation.

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.

For optimal browser support, you should always define the 0% and 100% selectors.

Note: Use the animation property to control the animation appearance and bind the animation with 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>