動效
過渡時間函數transition-timing-function
Setting speed curve of the transition effect.
Overview
| Class | Declarations |
|---|---|
transition-timing-function:smooth | transition-timing-function: var(--easing-smooth);
|
transition-timing-function:soft | transition-timing-function: var(--easing-soft);
|
transition-timing-function:crisp | transition-timing-function: var(--easing-crisp);
|
transition-timing-function:snap | transition-timing-function: var(--easing-snap);
|
transition-timing-function:accelerate | transition-timing-function: var(--easing-accelerate);
|
transition-timing-function:decelerate | transition-timing-function: var(--easing-decelerate);
|
transition-timing-function:overshoot | transition-timing-function: var(--easing-overshoot);
|
transition-timing-function:rewind | transition-timing-function: var(--easing-rewind);
|
transition-timing-function:spring | transition-timing-function: var(--easing-spring);
|
transition-timing-function:ease | transition-timing-function: ease;
|
transition-timing-function:ease-in | transition-timing-function: ease-in;
|
transition-timing-function:ease-out | transition-timing-function: ease-out;
|
transition-timing-function:linear | transition-timing-function: linear;
|
transition-timing-function:step-start | transition-timing-function: step-start;
|
transition-timing-function:step-end | transition-timing-function: step-end;
|
transition-timing-function:<function>,<…> | transition-timing-function: <function>,<…>;
|
transition-timing-function:steps(<stop>,<direction>) | transition-timing-function: steps(<stop>,<direction>);
|
transition-timing-function:frames(<value>) | transition-timing-function: frames(<value>);
|
transition-timing-function:cubic-bezier(<value>,<value>,<value>,<value>) | transition-timing-function: cubic-bezier(<value>,<value>,<value>,<value>);
|
Examples
Choose an easing curve
Use transition-timing-function:* to control acceleration during a transition. Pair it with a duration so the curve is visible.
<button class="transition-property:transform transition-duration:180ms transition-timing-function:ease-out transform:translateY(-2px):hover"> Hover</button>Generated CSS
@layer utilities { .transition-timing-function\:ease-out { transition-timing-function: ease-out }}Use linear timing for continuous motion
Use linear when the transition represents steady progress instead of physical easing.
<div class="transition-property:opacity transition-duration:1s transition-timing-function:linear"> Syncing</div>Keep entrance and exit curves intentional
ease-out works well for elements entering or becoming more prominent. ease-in can work for elements leaving the interface.
<div class="transition-timing-function:ease-out transition-timing-function:ease-in:hover"> Dismiss</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="transition-timing-function:ease-out:hover transition-timing-function:linear@sm transition-timing-function:ease-in@print">...</div>