One of the exciting features in CSS3: "transitions" come with a
transition-timing-function which lets us to define an acceleration curve, so that the speed of the transition can vary over its duration. This is simply how we accomplish easing animations with pure CSS.
If we want to use custom easing animations rather than the pre-defined ones like
cubic-bezier property, which enables us to define a cubic bezier curve to use as the easing function, reaches to our help.
However, setting the
cubic-bezier values can be challenging and a visual representation of the curve makes things much easier. Here are 3 great tools that help creating custom easing values:
The application works with drag 'n' drops and/or keyboard shortcuts.
By updating the curve, it auto-generates the
cubic-bezier values. And, you can save them for future use by attaching friendly names and even share each with a unique link.
A similar tool which enables creating the values for the curve with drag 'n' drops and also compare the custom one with the pre-defined values.
Ceaser comes with values/transitions of Penner Equations (with approximate values) which means there are many new built-in transitions besides the default ones.
Also, you can create new ones easily and test them on different transition values like width, height or opacity.
There are also few other tools for creating visually creating CSS cubic-bezier values: