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.

Class	Declarations
`animation-timing-function:function,…` `/` `@easing:function,…`	`animation-timing-function: function, …`
`@easing:ease`	`animation-timing-function: ease`
`@easing:ease-in`	`animation-timing-function: ease-in`
`@easing:ease-out`	`animation-timing-function: ease-out`
`@easing:linear`	`animation-timing-function: linear`
`@easing:step-start`	`animation-timing-function: step-start`
`@easing:step-end`	`animation-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>