Easings.net – CSS3 Animations Leadfooted
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 Easings.net 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.
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.
Easings.net 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, Easings.net lets you copy and paste the necessary code.
Easings for CSS3 plus jQuery Plugin
Easings for SASS
Easings.net 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: easings.net 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.