What the generator emits
A complete animation shorthand plus the matching @keyframes block. The shorthand reads name, duration, easing, delay, iteration count and direction — the preview runs it on infinite alternate so you can judge the feel without re-triggering.
Choosing a preset
Bounce and pulse suit attention states; fade and slide are entrance motion; rotate is for spinners; shake signals an error. Keep durations short — 200–400ms for UI feedback, up to 1s for entrances.
Accessibility: respect reduced motion
Roughly one in three users has motion sensitivity enabled at the OS level. Always wrap decorative animation in a media query:
@media (prefers-reduced-motion: reduce) {
.animated { animation: none; }
}This is a WCAG 2.1 success criterion (2.3.3), not a nicety.
Performance rules
- Animate only
transformandopacity— they run on the compositor - Avoid animating
width,height,toporbox-shadow; they force layout or paint each frame - Add
will-change: transformsparingly — it costs memory per layer - Infinite animations keep the GPU awake; pause them when off-screen or inactive
Frequently Asked Questions
Why does my animation not run?
Usually the shorthand order is wrong or the keyframes name does not match. Copy the generated block as a pair — the animation name and @keyframes must be identical.
Can I animate multiple properties?
Yes, put several declarations inside each keyframe step. The preview preset animates transform only, which is the performant default.
How do I delay the start?
Add a third time value to the shorthand (duration then delay), for example animation: popIn 0.6s 0.2s ease-out.
Privacy & Your Data
CSSmith runs entirely in your browser. Whatever you type, paste or upload is processed on your own device and never sent to a server — there is no backend to store it.