Animation & Motion · Free generator

CSS Keyframes Generator

Free · no sign-up Live preview · copy or download the CSS

Six production-ready animations — bounce, pulse, shake, spin, fade-in, slide-up — with duration, easing and loop controls. Watch the chip perform, copy the complete @keyframes block.

Settings

Generated CSS — updates live


Ready-made examples — click any card to copy its CSS
Proven starting points. Clicking a card copies the full CSS to your clipboard.


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 30 minCSS Animations & KeyframesKeyframes and the animation shorthand in full.STEP 2 · 25 minCSS TransformsThe verbs these frames animate.STEP 3 · 20 minCSS Performance & Best PracticesWhy transform/opacity only.


  1. CSS Cubic Bezier EditorAnimation & Motion
  2. CSS Hover Effects GeneratorAnimation & Motion
  3. CSS Neon Text GeneratorShadows & Effects
  4. CSS Button GeneratorTypography & Buttons
  5. CSS Gradient GeneratorBackgrounds & Color
  6. CSS Text Gradient GeneratorTypography & Buttons


How it works


A keyframe block is a timeline of percentage waypoints; the browser interpolates between them each cycle. Comma-shared frames (0%, 100%) start and end identically for seamless loops; the shake's staggered pairs zig-zag. Everything here animates transform/opacity only — the compositor-cheap pair from the Performance lesson.


For one-shot entrances add animation-fill-mode: both (the slide-up example does) so the element holds its final frame instead of snapping back — and stagger siblings with animation-delay for cascade reveals.


Run the code — try it yourself
Give the three loader dots the bounce animation at .9s infinite — then stagger them with animation-delay .15s and .3s on the second and third.


exercise.html — editable


Frequently asked questions
The animation snaps back to the start when it ends.
Add fill-mode: forwards (or both) — by default styles revert after the last frame.
Loop forever or play once?
Ambient/loaders: infinite. Entrances and feedback (shake, pulse-once): a count. Respect prefers-reduced-motion either way.
Can one element run two animations?
Comma-separate them in one animation declaration — a spin and a pulse can run simultaneously.
Why does replay need that odd reset in JS?
Restarting requires removing the animation, forcing a reflow, then re-adding — the same trick this page's Replay button performs.


Keep going
These six cover most product motion: loaders, attention, feedback, entrances. Own the timeline model in the Animations lesson, then give each animation personality with a curve from the Cubic Bezier editor.
CSSmatic is a non-profit project, made by developers for developers.