Keyframe Generator
Shimmer, pulse, spin, marquee and the rest — with a note on what each one is for. Adjust duration, easing and repeat, watch it on a real element, then copy it as a Tailwind v4 theme token or plain CSS.
Presets
Preview
Output
The plain CSS version includes a reduced-motion guard; add the equivalent yourself if you use the Tailwind token.
@theme {
--animate-shimmer: shimmer 2000ms linear infinite;
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
}
/* class="animate-shimmer" */Frequently asked
How do I use the Tailwind v4 output?
Paste the @theme block into your CSS. Tailwind turns --animate-shimmer into an animate-shimmer utility, and the @keyframes nested inside the block travels with it — no config file involved.
Why does the CSS version include a reduced-motion block but the Tailwind one does not?
Because a theme token is just a value; where you apply it is your decision. If you use the Tailwind output, add your own guard — either a motion-reduce:animate-none utility on the element or a media query in your CSS.
Should a spinner use easing?
No. Rotation should be linear. Any easing makes the spinner speed up and slow down each turn, which reads as stuttering rather than smooth.
Why is shimmer better than pulse for skeletons, or the other way round?
Shimmer implies direction and progress, which suits short waits where content is genuinely on its way. Pulse is quieter and wears better over long or open-ended waits. If you are unsure, pulse is the safer default — it is harder to find annoying.
Anything to watch out for with marquee?
Two things. Duplicate the content so the loop has something to scroll into, which is why the translate goes to -50% rather than -100%. And pause it on hover and focus, otherwise anyone trying to read or click an item is chasing a moving target.