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

Editor to share with you how to use the animation-name attribute in css. I hope you will get something after reading this article. Let's discuss it together.

Css3animation-name attribute

What: the animation-name attribute specifies a name for the @ keyframes animation.

Syntax:

Animation-name:keyframename | none

Keyframename: specifies the name of the keyframe that needs to be bound to the selector.

None: specifies no animation (can be used to override animation from cascading).

Note: always set the animation-duration property, otherwise when the length is 0, the animation will not be played.

An example of using the css3animation-name attribute

Div

{

Width:100px

Height:100px

Background:red

Position:relative

Animation-name:mymove

Animation-duration:5s

/ * SafariandChrome*/

-webkit-animation-name:mymove

-webkit-animation-duration:5s

}

@ keyframesmymove

{

From {left:0px;}

To {left:200px;}

}

@-webkit-keyframesmymove/*SafariandChrome*/

{

From {left:0px;}

To {left:200px;}

}

Note: the animation-name attribute is not supported in InternetExplorer9 and earlier versions.

Note: always specify the animation-duration property, otherwise the animation will not be played if the length of time is 0.

After reading this article, I believe you have a certain understanding of "how to use the animation-name attribute in css". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.