Syntax
transition-timing-function
Setting speed curve of the transition effect.
Overview
| Class | Declarations |
|---|---|
~easing:`function`,`…` | transition-timing-function: `function`,`…`;
|
~easing:ease | transition-timing-function: ease;
|
~easing:ease-in | transition-timing-function: ease-in;
|
~easing:ease-out | transition-timing-function: ease-out;
|
~easing:linear | transition-timing-function: linear;
|
~easing:step-start | transition-timing-function: step-start;
|
~easing:step-end | transition-timing-function: step-end;
|
~easing:steps(`stop`,`direction`) | transition-timing-function: steps(`stop`,`direction`);
|
~easing:frames(`value`) | transition-timing-function: frames(`value`);
|
~easing:cubic-bezier(`value`,`value`,`value`,`value`) | transition-timing-function: cubic-bezier(`value`,`value`,`value`,`value`);
|
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="transition-timing-function:ease:hover transition-timing-function:ease@sm transition-timing-function:ease@dark transition-timing-function:ease@print">…</div>