CSS Keyframe Animation Generator
Generate a CSS @keyframes animation from ready-made presets (bounce, shake, pulse, fade in, slide in, spin, swing, rubber band, flash, wobble) with duration, easing, delay, iteration count and direction — copy the keyframes plus the animation shorthand to apply it.
Input
Length of one animation cycle, in seconds.
Time to wait before the animation starts.
A positive whole number, or "infinite" to loop forever.
Output
More ways to use this tool
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-keyframe-animation-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"animationType": "fadeIn",
"duration": "1",
"timingFunction": "ease-in-out",
"delay": "0",
"iterationCount": "1",
"direction": "normal"
}'Swap in your own key from your account. The tool's fields are the body — no wrapper.
Ask an AI agent
Use the IOTools `css-keyframe-animation-generator` tool (CSS Keyframe Animation Generator) on this input:
YOUR_INPUT_HEREPaste this at any agent connected to the IOTools MCP server, then add your input.
Embed widget
<iframe
src="https://iotools.cloud/embed/css-keyframe-animation-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS Keyframe Animation Generator — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Drop this into your own page — free, no key required, just a link back.
| Cost per API/MCP call | From 5 credits |
|---|---|
| Need more credits? | View pricing |
Also available with
Guides
A CSS keyframe animation defines how an element's style changes over the course of an animation cycle, using the @keyframes at-rule to describe a series of steps (0% to 100%) and the animation shorthand property to apply those steps to an element with a duration, easing, delay, repeat count and direction. Keyframe animations are what let a button pulse, a card fade in, or a notification icon shake — all without JavaScript, and running on the browser's compositor thread for smooth, efficient motion.
This generator builds both halves for you: the @keyframes block with the correct percentage stops and properties for a chosen preset, and the matching .animated-element { animation: ...; } rule that applies it. Copy both into your stylesheet and swap .animated-element for your own selector.
How to use it
- Pick a preset — Bounce, Shake, Pulse, Fade In, Slide In Left, Spin, Swing, Rubber Band, Flash, or Wobble. Each preset is a ready-made sequence of
transform/opacitysteps modeled on the well-known effects popularized by animation libraries like Animate.css. - Set the duration in seconds — how long one full cycle takes.
- Choose a timing function —
ease,ease-in,ease-out,ease-in-out, orlinear— to control the acceleration curve. - Set a delay in seconds if you want the animation to wait before starting.
- Set the iteration count — a whole number like
1or3, orinfiniteto loop forever. - Choose a direction —
normalplays forward each cycle,reverseplays backward,alternateflips direction every other cycle, andalternate-reversestarts reversed and flips. - Copy the generated CSS and paste it into your stylesheet, or download it as a
.cssfile.
FAQ
Why is the selector .animated-element?
It's a placeholder so the CSS is ready to paste — rename it to match the element you want to animate (a class, an ID, or any selector).
Can I use these presets with any HTML element?
Yes. @keyframes animations apply to any element via the animation property; some presets (like Slide In Left) look best on block-level elements with defined dimensions.
What's the difference between iteration-count: infinite and a number?
A number runs the animation that many times and then stops on its final frame (unless animation-fill-mode says otherwise). infinite repeats forever — useful for loaders and spinners like the Spin preset.
Do these animations affect page performance?
Animating transform and opacity (which is what every preset here uses) is GPU-accelerated in modern browsers and is the recommended approach for smooth CSS animation — cheaper than animating layout properties like width, top, or margin.
Can I combine multiple presets on one element?
Not directly in this tool, but you can list multiple comma-separated animation shorthand values by hand once you have two generated blocks, as long as their @keyframes names don't clash.
Privacy
Everything runs locally in your browser — your settings never leave your device, and no CSS is sent to a server to be generated.