How to use Css3 Animation Properties
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!
