Syntax

Transition Timing Function

Setting speed curve of the transition effect.

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

Overview

ClassDeclarations
~easing:function,transition-timing-function: function,;
~easing:easetransition-timing-function: ease;
~easing:ease-intransition-timing-function: ease-in;
~easing:ease-outtransition-timing-function: ease-out;
~easing:lineartransition-timing-function: linear;
~easing:step-starttransition-timing-function: step-start;
~easing:step-endtransition-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);

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="transition-timing-function:ease:hover transition-timing-function:ease@sm transition-timing-function:ease@dark transition-timing-function:ease@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.