3 Tools For Easier CSS3 “Transition Timing Functions” (Cubic-Bezier)

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 ease, linear, ease-in, ease-out or ease-in-out the 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: