CSS animations is a great tool design website in very cool fashion without any gif images and reduced page size.
~(Keep\ in\ mind\ IE8\ and\ IE9\ are\ stone\ age\ browsers\ and\ CSS3\ animation\ won't\ work\ with\ it).~
There are two basic keyword used to generate animations using
Example: Animation Demo
animation: \<animationName> \<animationTime> \<numberOfAnimation> :Defined as class property
\@keyframes :* A Rule which define your animation.
Note: you need to add -webkit- suffix to above properties in order to work in Chrome and safari.
One more a simple CSS3 loader like Facebook loading
How does it works:
See in HTML and CSS tab, there is 3 divs and only one
\@keyframesrule has been applied. Only difference is delay in animation.
property allowing this animation to run in infinite loop.
One more thing is noticeable is
animation. watch carefully 2st div it is completing animation and then again going in reverse direction which is making this animation smooth.
Note: Infinite animation is not working after embedding. Please click on Edit this pen to open at CodePen.