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

This article mainly introduces how to use Css3 animation properties, the article is very detailed, has a certain reference value, interested friends must read it!

Animation properties of CSS3

The following table lists the @ keyframes rule and all animation properties:

Property description CSS

@ keyframes prescribes animation.

The abbreviated property of all animation properties of animation, except the animation-play-state property.

Animation-name specifies the name of the @ keyframes animation.

Animation-duration specifies the seconds or milliseconds it takes for an animation to complete a cycle. The default is 0.

Animation-timing-function specifies the speed curve of the animation. Default is "ease".

Animation-delay dictates when the animation starts. The default is 0.

Animation-iteration-count specifies the number of times the animation is played. The default is 1.

Animation-direction specifies whether the animation is played backwards in the next cycle. Default is "normal".

Animation-play-state specifies whether the animation is running or paused. Default is "running".

The following two examples set all animation properties:

OperaSafariChromeFirefoxInternet Explorer

Example

Run the myfirst animation and set all the properties:

Div

{

Animation-name: myfirst

Animation-duration: 5s

Animation-timing-function: linear

Animation-delay: 2s

Animation-iteration-count: infinite

Animation-direction: alternate

Animation-play-state: running

/ * Safari and Chrome: * /

-webkit-animation-name: myfirst

-webkit-animation-duration: 5s

-webkit-animation-timing-function: linear

-webkit-animation-delay: 2s

-webkit-animation-iteration-count: infinite

-webkit-animation-direction: alternate

-webkit-animation-play-state: running

}

The above is all the content of this article "how to use Css3 Animation Properties". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow 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.