動效
動畫延遲animation-delay
Setting a time to delay before beginning to perform the animation.
Overview
| Class | Declarations |
|---|---|
animation-delay:<delay>,<milliSeconds>,<…> | animation-delay: <delay>,<milliSeconds>,<…>;
|
Examples
Delay animation start
Use animation-delay:* to wait before the first animation cycle begins.
<div class="animation-name:fade animation-duration:300ms animation-delay:120ms"> Staggered item</div>Generated CSS
@layer utilities { .animation-delay\:120ms { animation-delay: 120ms }}Offset looping animations
Negative delays start an animation partway through its cycle. This is useful for spinner segments that should not all begin at the same frame.
<svg class="animation-name:fade animation-duration:1s animation-delay:-120ms"> ...</svg>Stagger a list
Apply increasing delays to siblings when each item should enter after the previous one.
<li class="animation-name:fade animation-delay:0ms">One</li><li class="animation-name:fade animation-delay:80ms">Two</li><li class="animation-name:fade animation-delay:160ms">Three</li>Use duration tokens
Define duration-* tokens when the same delay appears across several animation patterns. This example assumes your project defines a fade keyframe.
@theme { --duration-stagger: 120ms;}<li class="animation:fade|fast|smooth animation-delay:stagger">...</li>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="animation-delay:120ms:hover animation-delay:0ms@sm animation-delay:0ms@print">...</div>