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. All Easings Overview by Andrey Sitnik and Ivan Solovev on https://easings.net/ 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 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 Easings.net 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

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. (dpe)