Technology Inside Out!

Index ¦ Archives ¦ Atom ¦ RSS

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





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


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


property allowing this animation to run in infinite loop.

One more thing is noticeable is


property in


. 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.

© The Geeky Way. Built using Pelican. Theme by Giulio Fidente on github.

Disclaimer Privacy policy