CSS3 Animations: Getting started

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

animation

and

\@keyframes

.

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

\@keyframes

rule has been applied. Only difference is delay in animation.

Infinite

property allowing this animation to run in infinite loop.

One more thing is noticeable is

alternate

property in

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.