Transition timing function

Syntax

Class
Properties
ease-linear
transition-timing-function: linear;
ease-in
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
ease-out
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
ease-in-out
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
<div class="t1 w-128 h-1 bt-1-black relative"> <div class="t1 w-16 h-16 -ml-8 -mt-8 bg-c-blue rounded-full absolute left-0 transition-all duration-1000 hover://left-128 ease-in-out"></div> </div> <div class="t1 w-128 h-128 b-1-black relative mt-24"> <div class="t1 w-128 h-0 relative relative top-128 transition-all duration-1000 ease-linear hover://top-0"> <div class="t1 w-16 h-16 -ml-8 -mt-8 bg-c-blue rounded-full absolute left-0 transition-all duration-1000 hover:///left-128 ease-in-out"></div> </div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
ease-linear
t1 ease-linear
.t1.ease-linear { transition-timing-function: linear; }
ease-in
t1 ease-in
.t1.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
ease-out
t1 ease-out
.t1.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
ease-in-out
t1 ease-in-out
.t1.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }