Animation

Animation Timing Function

Style syntax for setting speed curve of the animation.

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

Overview [sr-only]

ClassDeclarations
animation-timing-function:function, / @easing:function,animation-timing-function: function,
@easing:easeanimation-timing-function: ease
@easing:ease-inanimation-timing-function: ease-in
@easing:ease-outanimation-timing-function: ease-out
@easing:linearanimation-timing-function: linear
@easing:step-startanimation-timing-function: step-start
@easing:step-endanimation-timing-function: step-end
@easing:steps(stop,direction)animation-timing-function: steps(stop, direction)
@easing:frames(value)animation-timing-function: frames(value)
@easing:cubic-bezier(value,value,value,value)animation-timing-function: cubic-bezier(value, value, value, value)

Conditionally apply

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

<div class="@easing:ease:hover @easing:ease@sm @easing:ease@dark @easing:ease@print"></div>
PREVIOUS
Animation Play State

Style syntax for setting whether an animation is running or paused.

NEXT
Accent Color

Style syntax for setting the accent color of user interface elements or controls.

MIT License © Aoyue Design LLC.