CSS Animation Generator
Build a bounce, entrance, fade, zoom, spin or swing. Tune timing and playback, inspect the first iteration and export readable keyframes with reduced-motion support.
1. Design your animation
Only the controls named for your motion affect its keyframes. Shape, size, color and label are demo styling, included in the HTML demo but separate from the exported motion CSS.
2. Preview & export
Add the ts-motion class to your own element and include the CSS. The HTML demo includes a checkbox to pause motion. Reduced-motion devices show a static, visible element. Infinite animations on a real site also need a user-visible pause control.
Duration: 0.2–30 seconds; delay: 0–30 seconds; 1–20 iterations or infinite. Setting changes pause and restart the preview. Scrubbing seeks within the first iteration with selected easing and direction. The preview scales its motion space to fit small screens. This tool exports CSS/HTML, not GIF/video. No processing upload or saved project history. Website ads and analytics follow the privacy information.
Using CSS Animation Generator
Generate bounded preset keyframes with readable timing properties, an on-demand preview and a self-contained HTML demo.
- Choose a motion or quick preset and set duration, delay, iterations, easing, direction and fill mode.
- Adjust the controls named for your motion. Press Play or Restart, or scrub the first iteration while paused.
- Copy motion CSS for your own ts-motion element or download CSS and a standalone HTML demo.
Example
A 1.2-second bounce moves up 60 pixels at its midpoint and returns to the start. Choose Slide entrance with one iteration and both fill mode to keep the final visible state after it finishes.
Questions & answers
Does the preview start automatically?
No. It starts paused; press Play or Restart. Editing settings rebuilds and pauses it. Your device reduced-motion preference keeps it static and disables playback controls.
What does reduced-motion support do?
Exported CSS includes prefers-reduced-motion: reduce, disabling the animation and restoring a visible, untransformed element. Infinite motion on your real site also needs a usable pause control; the downloaded HTML demo includes a pause checkbox.
Which controls affect each motion?
Distance affects bounce and slide. Starting scale affects zoom. Angle affects spin and swing. Fade changes opacity only. Duration, delay, iterations, easing, direction and fill apply to all motions.
How do directions and fill modes work?
Reverse plays an iteration backward. Alternate switches direction each iteration; alternate-reverse starts backward. Forwards retains the final animation state, backwards applies the starting state during a delay, both does both, and none restores the base style outside the active animation.
What does the scrubber show?
It pauses and seeks to a percentage of the first iteration after the initial delay. Selected easing and direction still apply. It is not a complete timeline for multiple iterations, and the 100% boundary can use fill behavior or start the next iteration.
How do I use the exported CSS?
Add class ts-motion to your own element and include the generated CSS. The CSS contains keyframes and motion properties. Demo size, shape, color and label are separate styling, included only in the standalone HTML demo. Use a unique ts- keyframe name to avoid collisions.
Can I import custom keyframes or export GIF?
No. This tool focuses on six preset motion shapes with adjustable parameters and CSS/HTML export. The standalone HTML requires no animation library or scripts.
What are the limits?
Duration 0.2–30 seconds, delay 0–30, 1–20 iterations or infinite, distance 0–120 pixels, zoom scale 0.1–2 and rotation 0–360 degrees. Demo labels are at most 40 characters and escaped in HTML.
Is project data uploaded or saved?
Generation and preview run locally without a processing upload or saved project history. Website ads and analytics follow the privacy information.
Related tools
A useful next step for your task.
Developer & DataCSS Gradient GeneratorCreate linear, radial and conic gradients with editable color stops, positions, opacity and presets. Copy CSS or export a PNG and settings JSON.
Developer & DataCSS Box Shadow & Border Radius GeneratorDesign layered inset and outer box shadows, four corner radii, borders and colors with live previews. Copy or download CSS in pixels or rem units.
Developer & DataSeamless Pattern GeneratorCreate repeating dots, checkerboards, stripes, diagonal lines and grids with custom colors and transparency. Export PNG tiles/full images, vector…
Developer & DataHTML Minifier & BeautifierMinify or beautify HTML locally with parser-based processing, protected script and preformatted content, byte-size statistics and a sanitized…
Help improve this tool
Report a problem or suggest an improvement
Describe the issue without pasting private tool input. Feedback goes to our admin inbox.