Development – CSS3 Animations Leadfooted

January 5th, 2013

With the introduction of CSS3 we are able to use animated hover effects and other transitions. These transitions can be induced through the use of so-called easings. Easings differ in the way they start and accelerate or slow down and stop an animation. The website has put together an overview of available easings. On top of that they provide some additional effects complete with source code for your easing pleasure.

All Easings Overview

As to the standard effects of CSS3 we can use predefined and more or less simple ease-in and ease-out effects. If you are into more complex animations, CSS3 allows you to define them along individual Bézier curves. has put up a gallery containing 40 different animation effects that stretch the boundaries of standard easings. Every single effect is equipped with a preview showing the Bézier curve in use. The motion can be previewed from there too. If you want to integrate an effect into your project, lets you copy and paste the necessary code.

Easings for CSS3 plus jQuery Plugin

Easings totally relying solely on CSS3 allow for relatively simple Bézier curves only. For more complex operations including elasticity, we still need JavaScript. Being aware of that not only delivers the Bézier curves for CSS3 but also the correct source code for its accompanying jQuery Easing Plugin, that allows for much more complex animations. The plugin contains all of the easings provided by the website. That way all you need to know is the name of the effect to be used..

Easings for SASS does not stop here. Besides support for CSS3 and jQuery, the developers also offer a special edition for the Compass framework, entitled Ceaser Easing Animation. The extension enables the use of predefined easings without having to specify a Bézier curve.

Conclusion: delivers a decent roundup of different easing effects including the necessary source code to embed them into your website.


Denis works as a freelance web designer since 2005.

Tags: , , , , , ,

3 comments for „ – CSS3 Animations Leadfooted
  1. Luke Etheridge on January 5th, 2013 at 11:56 am

    Literally have been experimenting with CSS3 transitions over the past 3 (or so) months and am loving it. However, this article will help me use a much broader range of effects rather than the usual 3-4 I’m currently using.

    Thanks Denis. Great read.


  2. Waheed Akhtar on January 6th, 2013 at 2:44 pm

    Thanks for this informative article. Will definitely explore these different animations.

  3. on April 15th, 2013 at 8:53 pm

    Perfect for beginners