Animation utilities and keyframes
Animation utilities can apply predefined motion patterns, while custom animations are useful when the motion is specific to the product. Animation should have a clear purpose: loading feedback, attention to a new status, or a transition that helps users understand a state change.
For custom keyframes, define a named animation in the appropriate theme or CSS layer for your Tailwind version, then use the resulting utility. Keep duration and iteration sensible, and respect reduced-motion preferences. Do not animate large areas continuously without a user benefit.
Custom pulse indicator (CSS plus markup)
@keyframes task-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.92); }
}
.task-pulse {
animation: task-pulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.task-pulse { animation: none; }
}đź’ˇ This custom CSS illustrates a named animation and a reduced-motion fallback. In a Tailwind project, you can integrate the animation with the version's supported theme or utility mechanisms. Ensure the indicator also has a textual status so animation is not the only signal.
Knowledge Check
What should a production UI do for users who prefer reduced motion?