Css3 animation and css3 animation library

Css3 animation and css3 animation library
CSS3 Animation

When you create an animation in @ keyframes, bind it to a selector. Otherwise, no animation effect will be generated.

You can bind an animation to a selector by specifying at least two CSS3 animation attributes:

• Specifies the animation name
• Specifies the animation duration

Bind the "myfirst" animation to the div element. Duration: 5 seconds:

Div {animation: myfirst 5S;-moz-animation: myfirst 5S;/* Firefox */-webkit-animation: myfirst 5S;/* Safari and Chrome */-o-animation: myfirst 5S;/* Opera */}

Note: You must define the animation name and duration. If the duration is ignored, the animation is not allowed because the default value is 0.

Use percentages to specify the time when the change occurred, or use the keywords "from" and "to", equivalent to 0% and 100%.

0% is the start of the animation, and 100% is the completion of the animation.

To get the best browser support, you should always define the 0% and 100% selectors.

Attribute description

@ Keyframes	Specifies the animation.	3
Animation	The short attribute of all animation properties except the animation-play-state attribute.	3
Animation-name	Specifies the name of the keyframes animation.	3
Animation-duration	Specifies the seconds or milliseconds that an animation takes to complete a cycle. The default value is 0.	3
Animation-timing-function	Specifies the animation speed curve. The default value is "renew ".	3
Animation-delay	Specifies when the animation starts. The default value is 0.	3
Animation-iteration-count	Specifies the number of times an animation is played. The default value is 1.	3
Animation-direction	Specifies whether the animation is played reversely in the next cycle. The default value is "normal ".	3
Animation-play-state	Specifies whether the animation is running or paused. The default value is "running ".	3
Animation-fill-mode	Specifies the State beyond the animation time of an object.	3

For example:

Div {animation-name: myfirst; animation-duration: 5S; animation-timing-function: linear; animation-delay: 2 s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running;/* Firefox: */-moz-animation-name: myfirst;-moz-animation-duration: 5S; -moz-animation-timing-function: linear;-moz-animation-delay: 2 s;-moz-animation-iteration-count: infinite;-moz-animation-direction: alternate;-moz-animation-play-state: running;/* Safari and Chrome: */-webkit-animation-name: myfirst;-webkit-animation-duration: 5S; -webkit-animation-timing-function: linear;-webkit-animation-delay: 2 s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-play-state: running;/* Opera: */-o-animation-name: myfirst;-o-animation-duration: 5S; -o-animation-timing-function: linear;-o-animation-delay: 2 s;-o-animation-iteration-count: infinite;-o-animation-direction: alternate;-o-animation-play-state: running ;}

Abbreviated form:

Div {animation: myfirst 5S linear 2 s infinite alternate;/* Firefox: */-moz-animation: myfirst 5S linear 2 s infinite alternate;/* Safari and Chrome: */-webkit-animation: myfirst 5S linear 2 s infinite alternate;/* Opera: */-o-animation: myfirst 5S linear 2 s infinite alterate ;}