Basic usage of animation attributes in CSS3, and animation attributes in css3

Basic usage of animation attributes in CSS3, and animation attributes in css3

CSS3 adds an exciting attribute: animation, although animations made using animation are not as smooth as those made using flash or javascript, however, it has obvious advantages in terms of code volume and browser performance.

The basic usage of animation is:

animation: name keeping-time animate-function delay times iteration final;

First parameter: name (animation-name ):

The name of the animation, that is, the name of the animation process. CSS3 uses the "Key Frame keyframes" to define the animation, as shown in the following figure:

@-webkit-keyframes name{    0%{        opacity: 0;    }    100%{        opacity: 1;    } }

Prefix-webkit-indicates the webkit kernel browser (Chrome, Safari, and ever-changing opera). The above Code defines an animation named name, which changes the transparency from 0 ~ 100% is the whole process. Of course, you can also define multiple segments such as: 0% ~ 20 ~ 50% ~ 100%.

The second parameter is keeping-time (animation-duration ):

The duration of the entire animation, which must contain the time unit, s or ms;

Third parameter: animate-function (animation-timing-function ):

The besell curve of the motion mode (Animation Mode), which can be set to sequence, sequence-in, sequence-out, linear, sequence-in-out, and cubic-bezr (num1, num2, num3, num4 ).

Fourth parameter: delay (animation-delay ):

The animation delay execution time, in the unit of s or ms. It is worth noting that even if the delay time is 0, the time unit must be added. If it is written as 0, it is okay in Chrome and Safari (webkit), but it is invalid in FF (gecko.

Fifth parameter: times (animation-iteration-count ):

Number of times the animation is cyclically executed. Unit: None. infinite is an infinite loop.

Sixth parameter: iteration (animation-direction ):

For an animation loop, the loop mode is: alternate (even forward playback, odd backward playback), normal (Forward playback each time ).

Seventh parameter: final (animation-fill-mode ):

The final state of an animation (up to 100%). The options include backward (back to initial state), forwards (stopped in final state), none, and both.

Each parameter can also be written separately. Remember to add the browser prefix when using it:

.classname{    -webkit-animation:name 6s linear 0ms infinite normal forwards;    -moz-animation:name 6s linear 0ms infinite normal forwards;    -o-animation:name 6s linear 0ms infinite normal forwards;    animation:name 6s linear 0ms infinite normal forwards;}

The advantage of writing without a prefix at the end is that when animation is recognized by all browsers, the style above can be overwritten when the prefix is discarded.