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

This article mainly introduces how to use the animation properties of Css3, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

The animation property is an abbreviated property that sets six animation attributes:

Animation-name specifies a name for @ keyframes animation: mymove

Animation-duration defines how long it takes for an animation to complete a cycle, in seconds or milliseconds

Animation-timing-function specifies the speed curve of the animation liner ease ease-in ease-out ease-in-out

Animation-delay defines when the animation starts

Animation-iteration-count specifies the number of times the animation is played n | infinite;n | unlimited times

Animation-direction defines whether the animation should be played in reverse in turn normal | alternate; positive | negative

Animation-play-state specifies whether the animation is running or paused paused | running

Animation-fill-mode specifies whether the animation is visible before or after the animation is played.

None | forwards keeps the last attribute | backwards start attribute | both before and after both

@-moz- Firefox @-webkit- Google and Apple @-o-Opon

Example:

@ keyframes mymove

{

From {top:0px;}

To {top:200px;}

}

@-moz-keyframes mymove / * Firefox * /

{

From {top:0px;}

To {top:200px;}

}

@-webkit-keyframes mymove / * Safari and Chrome * /

{

From {top:0px;}

To {top:200px;}

}

@-o-keyframes mymove / * Opera * /

{

From {top:0px;}

To {top:200px;}

}

Div

{width:100px

Height:100px

Background:red

Position:relative

Animation:mymove 5s infinite

-webkit-animation:mymove 5s infinite; / * Safari and Chrome*/

}

Thank you for reading this article carefully. I hope the article "how to use the animation properties of Css3" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.