Shulou(Shulou.com)06/01 Report--

Xiaobian to share with you what is the use of animation attribute in css3, I believe most people still do not know how, so share this article for everyone's reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!

css3animation properties

The animation attribute is a shorthand attribute used to set six animation attributes.

Grammar:

animation:namedurationtiming-functiondelayiteration-countdirection;

Description: The six animation attributes that can be set for the animation attribute are:

animation-name: Specify the keyframe name to bind to the selector.

Animation-duration: Specifies the time it takes to complete the animation, in seconds or milliseconds.

Animation-timing-function: Specify the velocity curve of the animation.

Animation-delay: Specify the delay before the animation starts.

Animation-iteration-count: Specifies the number of times an animation should be played.

Animation-direction: Specifies whether the animation should be played in reverse in turn.

Note: The animation-duration attribute must always be set, otherwise the animation will not play when the time length is 0.

Example of using css3animation attribute

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove5sinfinite;

-webkit-animation:mymove5sinfinite;/*SafariandChrome*/

}

@keyframesmymove

{

from{left:0px;}

to{left:200px;}

}

@-webkit-keyframesmymove/*SafariandChrome*/

{

from{left:0px;}

to{left:200px;}

}

Note: Internet Explorer 9 and earlier versions do not support the animation attribute.

The above is "what is the use of animation attribute in css3" all the contents of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.