CSS Keyframe Animation Templates

Features

• Seven presets: fade in, slide up, pop, pulse, shake, spin, float
• Duration from 100 to 10000ms, with five easing curves
• Loop forever or play once
• The preview loops and pauses on hover, so you can study a frame
• A `prefers-reduced-motion` rule is included automatically — it respects the system setting
• The animation name carries a random suffix, so it cannot collide with yours
• The output includes both the `@keyframes` and the rule that uses it, ready to paste
• Syntax-highlighted code with a one-click copy button
• Everything is computed in your browser

How to use

1. Pick an animation; the preview starts looping at once
2. Adjust duration and easing — use linear for spin, or the easing will show a visible hitch
3. Choose looping or a single play
4. Copy the code, and keep that `prefers-reduced-motion` block with it

FAQ

Why is a `prefers-reduced-motion` block added automatically?

Because animation makes people unwell, and that is not a small thing. Users with vestibular disorders — an inner-ear condition — get dizzy and nauseous from movement and scaling animations, and the operating system has a switch meant for them: `prefers-reduced-motion`. Those three lines mean those users are not made ill by your page. The cost is three lines of CSS. It is not an accessibility bonus; it is the baseline of not hurting people.

Why is there a random string after the animation name?

Because `@keyframes` names are global. If your project already has one called `fade-in`, the block you paste will override it (or be overridden) — showing up as "some places animate differently now", intermittently, and very hard to trace. A random suffix makes collision impossible. It also solves a second trap: with a changed name the browser considers the keyframes new and replays the animation when you adjust a parameter.

What is wrong with infinite looping animations?

Two things. It competes for attention: constant motion keeps pulling the eye, so unless the animation *is* the status (a loading spinner), it should not loop forever. And it holds the compositor thread, which costs battery on low-end devices and in power-saving modes. So let spinners loop; for hints and decorative drift, play once or twice, or cap it with something like `animation-iteration-count: 3`.

How do I stagger an entrance?

Give each element an increasing `animation-delay`: 0ms for the first, 80ms for the second, 160ms for the third. Two cautions. Keep the total to five or six items (beyond that the later ones arrive after the user has looked away). And during the delay an element holds its starting state (transparent or offset), so if you do not want it appearing and then jumping, add `animation-fill-mode: backwards`.