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.

Leave a Reply

Your email address will not be published. Required fields are marked *