These CSS cubic-bezier timing functions are variables that can be used with CSS3 animations and transitions. The provided timing functions are the same as the jQuery UI demo: easing functions.
{% highlight scss %} @include transition(all, 5s, $ease-in-circ); {% endhighlight %}Many of the timing functions below may look the same in this demo, but in complex animations, they are intricately different.
$ease-in-quad
$ease-out-quad
$ease-in-out-quad
$ease-in-cubic
$ease-out-cubic
$ease-in-out-cubic
$ease-in-quart
$ease-out-quart
$ease-in-out-quart
$ease-in-quint
$ease-out-quint
$ease-in-out-quint
$ease-in-sine
$ease-out-sine
$ease-in-out-sine
$ease-in-expo
$ease-out-expo
$ease-in-out-expo
$ease-in-circ
$ease-out-circ
$ease-in-out-circ
$ease-in-back
$ease-out-back
$ease-in-out-back