語法
過渡時間函數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);
|
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>