Syntax

Transition Timing Function

Setting speed curve of the transition effect.

🚧This page is still under construction and some content may not be complete.

Class	Declarations
`~easing:function,…`	`transition-timing-function: function,…;`
`~easing:ease`	`transition-timing-function: ease;`
`~easing:ease-in`	`transition-timing-function: ease-in;`
`~easing:ease-out`	`transition-timing-function: ease-out;`
`~easing:linear`	`transition-timing-function: linear;`
`~easing:step-start`	`transition-timing-function: step-start;`
`~easing:step-end`	`transition-timing-function: step-end;`
`~easing:steps(stop,direction)`	`transition-timing-function: steps(stop,direction);`
`~easing:frames(value)`	`transition-timing-function: frames(value);`
`~easing:cubic-bezier(value,value,value,value)`	`transition-timing-function: cubic-bezier(value,value,value,value);`

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="transition-timing-function:ease:hover transition-timing-function:ease@sm transition-timing-function:ease@dark transition-timing-function:ease@print">…</div>

Transition Timing Function

Overview

Conditionally apply