Syntax
animation-timing-function
Setting speed curve of the animation.
Overview
| Class | Declarations |
|---|---|
@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;
|
Conditionally apply
Apply styles based on different states using selectors and applying conditionally.
<div class="@easing:ease:hover @easing:ease@sm @easing:ease@dark @easing:ease@print">…</div>