On the usage resolution of animation animation properties in CSS3

This article is mainly for you to introduce in detail the Animation animation attribute usage in CSS3, teach you how to use animation animation, interested in small partners can refer to

To use animation animations, familiarize yourself with the grammar rules of Keyframes,keyframes: Naming is preceded by "@keyframes", followed by the "name of the animation" plus a pair of curly braces "{}", which are the different time-period style rules in parentheses. Different keyframes are represented by the from (equivalent to 0%), to (equivalent to 100%), or percent (for best browser support, percent recommended), as follows to define a simple animation:

@keyframes Myfirst/* Define the animation name */    {       0%   {background:red; left:0px; top:0px;}/* Define the starting frame style, 0% can be converted to from*/    25%  {background:yellow; left:200px; top:0px;}       50%  {background:blue; left:200px; top:200px;}       75%  {background:green; left:0px; top:200px;}       100% {background:red; left:0px; top:0px;}/* Define end frame style, 100% can be converted to to*/    }

@keyframes is defined so that it works, it must be bound to a selector by animation, otherwise the animation will have no effect. The properties of the animation are listed below:

All of the above properties are set below

Animation-name:myfirst;   animation-duration:5s;   Animation-timing-function:linear;   Animation-delay:1s;   Animation-iteration-count:infinite;   Animation-direction:alternate;   animation-play-state:running;

All of the above code can be abbreviated as follows:

Animation:myfirst 5s linear 2s infinite alternate;   animation-play-state:running;

Browser Compatibility

Internet Explorer 10, Firefox, and Opera support @keyframes rules and animation properties.

Chrome and Safari need a prefix of-webkit-.

Note: Internet Explorer 9, and earlier versions, do not support @keyframe rules or animation properties.

The following is a complete code example of the KeyFrames and animation properties described above:

<! DOCTYPE html>
The above code shows a square along a square trajectory movement, the cardinal number in the positive direction of movement, even several times in the opposite direction of movement, motion process also with color changes. Specific effect, the reader can run the code observation on its own.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!