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.