Use CSS3 to produce animated effects, and CSS3 to produce animated effects.
Related attributes:
@ Keyframes rule: Define an animation
Syntax: @ keyframes animationname {keyframes-selector {CSS-style ;}}
Animationname: animation name
Keyframes-selector: animation duration (0% ~ 100%) from (indicating 0%) to (indicating 100%)
CSS-style: The style to be set;
For example, define an animation named myanimation:
@ Keyframes myanimation {
0% {font-size: 10px ;}
50% {font-size: 30px ;}
100% {font-size: 100px ;}}
Animation attribute: composite of the following attributes
Animation-name: animation name
Animation-duration: animation completion time
Aniamtion-timing-function: animation speed setting (linar/animated-in/animated-out/animated-in-out)
Animation-delay: the delay interval before the animation starts.
Animation-iteration-count: Number of playbacks (n/infinite)
Animation-direction: animation playback direction (normal/reverse
<!doctype html>