Transition

Transition Timing Function

Style syntax for setting speed curve of the transition effect.

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

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

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<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 [sr-only]

Conditionally apply