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.

Overview [sr-only]

ClassDeclarations
transition-timing-function:function, / ~easing:function,
~easing:easetransitionTiming-function: ease
~easing:ease-intransitionTiming-function: ease-in
~easing:ease-outtransitionTiming-function: ease-out
~easing:lineartransitionTiming-function: linear
~easing:step-starttransitionTiming-function: step-start
~easing:step-endtransitionTiming-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>
PREVIOUS
Transition Property

Style syntax for setting the CSS properties to which a transition effect should be applied.

NEXT
Content

Style syntax for replacing an element with a generated value.

MIT License © Aoyue Design LLC.