Motion
animation-timing-function
Setting speed curve of the animation.
Overview
| Class | Declarations |
|---|---|
animation-timing-function:smooth | animation-timing-function: var(--easing-smooth);
|
animation-timing-function:soft | animation-timing-function: var(--easing-soft);
|
animation-timing-function:crisp | animation-timing-function: var(--easing-crisp);
|
animation-timing-function:snap | animation-timing-function: var(--easing-snap);
|
animation-timing-function:accelerate | animation-timing-function: var(--easing-accelerate);
|
animation-timing-function:decelerate | animation-timing-function: var(--easing-decelerate);
|
animation-timing-function:overshoot | animation-timing-function: var(--easing-overshoot);
|
animation-timing-function:rewind | animation-timing-function: var(--easing-rewind);
|
animation-timing-function:spring | animation-timing-function: var(--easing-spring);
|
animation-timing-function:ease | animation-timing-function: ease;
|
animation-timing-function:ease-in | animation-timing-function: ease-in;
|
animation-timing-function:ease-out | animation-timing-function: ease-out;
|
animation-timing-function:linear | animation-timing-function: linear;
|
animation-timing-function:step-start | animation-timing-function: step-start;
|
animation-timing-function:step-end | animation-timing-function: step-end;
|
animation-timing-function:<function>,<…> | animation-timing-function: <function>,<…>;
|
Examples
Set keyframe easing
Use animation-timing-function:* to control how keyframes progress between each keyframe stop.
<div class="animation-name:fade animation-duration:300ms animation-timing-function:ease-out"> Enters</div>Generated CSS
@layer utilities { .animation-timing-function\:ease-out { animation-timing-function: ease-out }}Use linear timing for rotation
Continuous indicators usually need linear so the motion does not speed up and slow down every cycle.
<svg class="animation-name:rotate animation-duration:1s animation-timing-function:linear"> ...</svg>Match easing to intent
Use ease-out for entrance motion and ease-in for exit motion. Prefer linear for clocks, progress, and loading rotation.
<div class="animation-timing-function:ease-out animation-timing-function:ease-in:hover"> Dismiss</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="animation-timing-function:ease-out:hover animation-timing-function:linear@sm animation-timing-function:ease-in@print">...</div>