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:
Cubic-Bezier.com
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.
CSS cubic-bezier Builder
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
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.
Other ToolsThere are also few other tools for creating visually creating CSS cubic-bezier values:
- Bezier control
- Cubic-bezier tool by Netzgesta.de
Powered By WizardRSS.com | Full Text RSS Feed | Amazon Plugin | Settlement Statement | WordPress Tutorials
.png "English"){kind=small}
