Add animations to your website easily with CSS

,

There’s been a long history of disgusting animations on websites since the early days of the web, things such as the <marquee> tag which allowed web developers to scroll text the page in a jagged fashion, also not forgetting the ever present animated GIF which allow for multiple pictures to appear in a slideshow like fashion.

This is some extremely annoying marquee text scrolling for your pleasure..

However now with ever increasing CSS3 support for modern browsers we can make the most of 2D & 3D animations. Even the old enemy is getting on-board with the new IE10 achieving some impressive  Acid Test scores abd also proving to be quite successful with the HTML5 support!

Adding animate.css

So.. with this in mind step in designer Dan Eden. His project animate.css allows developers to easily add a whole host of animations by simply adding CSS classes to any HTML element.

Here’s just a shortened list of what’s achievable.

  • Flippers
  • Fading entrances
  • Fading exits
  • Bouncing entrances
  • Bouncing exits
  • Rotating entrances
  • Rotating exits
  • Lightspeed

animatecss

Checkout this example

Click me for demo.