Describe the animation, get @keyframes rules and selectors written for the element ids in your SVG. Copy the style block or the whole SVG.
Updated .
CSS @keyframesGenerator
A CSS @keyframes generator writes the keyframe rules and the animation properties that apply them. Here, you describe the motion ("swing the bell, then settle") and SVG Weave writes @keyframes plus #id selectors for the elements in your SVG, with duration, easing, delay, and iteration count included. It targets SVG graphics specifically, not arbitrary HTML.
From prompt to @keyframes
Load an SVG with ids
Upload or paste an SVG, or generate one. The editor adds a unique id to every element and group so the CSS has something to select.
Say what moves and how
Prompts like "bounce the button, 1.2s, ease-out" or "fade in each bar one after another" map to duration, easing, and delay values.
Copy the style block
Copy the SVG with embedded CSS, or lift the style block into your own stylesheet. If you move it out, keep the ids on your elements.
How the generated CSS is written
- Selectors by id
- Rules target the ids already in your SVG, so the CSS is easy to read and to move to another file.
- Explicit transform-origin
- Rotation and scale pivot points are set deliberately rather than left to browser defaults.
- Staggered delays
- Ask for items to appear in sequence and the output offsets animation-delay across the elements.
- Plain CSS, no libraries
- Nothing to install and no runtime. The output is a style block inside an SVG file.
What the generated CSS looks like
The output is a single style block. Each animated element gets a selector like #bell { animation: swing 2.4s ease-in-out infinite; } and a matching @keyframes rule with multiple stops for a more natural curve, for example 0%, 30%, 60%, 100%. Where possible, loops start and end on identical frames so there is no visible jump when the animation repeats.
The generator is told never to use inline style="animation" attributes, because all animation belongs in one style block where you can read and edit it.
SVG-specific details that trip people up
In SVG, transform-origin does not behave like it does on HTML boxes, and browsers have historically defaulted differently. The generator is instructed to always set explicit transform-origin values rather than rely on defaults. In your own edits you will often also want transform-box: fill-box or view-box so that origin percentages refer to the shape rather than the whole canvas.
It also avoids animating the d attribute with CSS, since that is not reliably supported across browsers. If you ask for path morphing it should use SMIL animate instead, and for a shape-to-shape change the transition mode between two SVGs is usually a better route.
Timing, easing, and stagger
Say what you want in the prompt: "2 second loop", "ease-out", "stagger the three bars by 0.2s". The AI turns that into duration, timing-function, and animation-delay values. If you give no timing, the defaults favor ease-in-out for organic motion, a bouncy cubic-bezier for playful requests, and linear only for continuous rotation. Durations stay at 0.3 seconds or longer.
Which properties it uses
Most output is transform (translate, rotate, scale, skew) and opacity, since these are the cheapest properties for browsers to animate. Fill, stroke, stroke-dashoffset, and filter effects are available when the prompt asks for color change, line drawing, or glow. Stroke drawing needs both stroke-dasharray and stroke-dashoffset, and the generator is told to set both.
Made with SVG Weave
Buoy with a blinking lamp and a swinging bell
Drawn from "A striped navigation buoy with a small bell and a lamp on top, floating on sea waves" with the lighthouse drawing as a style reference, then animated with "Bob and tilt the buoy on the waves, swing the bell slightly, blink the lamp every few seconds, and roll the waves at different speeds". Unedited output of the product pipeline.
Compass needle that swings and settles
Drawn from "A ship's compass rose seen from above with a navy needle tipped in coral" with the lighthouse drawing as a style reference, then animated with "Swing the needle back and forth around north and settle, then pulse the coral tip softly, in a smooth loop". Unedited output of the product pipeline.
Questions
Can this generate keyframes for HTML elements?
It is built for SVG. It reads the SVG you provide and writes selectors for the ids inside it. The keyframe syntax is standard CSS, so you can adapt it to HTML, but selectors and transform-origin handling are written for SVG.
Which CSS properties does it animate?
Mostly transform and opacity. It can also animate fill, stroke, stroke-dashoffset, and filter when asked. It avoids animating the d attribute with CSS.
How do I set duration and easing?
State them in the prompt, for example "3 seconds, ease-in-out" or "cubic-bezier bounce". If you do not, the generator chooses easing based on the kind of motion.
Why does my rotation pivot in the wrong place?
In SVG, transform-origin depends on transform-box. With the default, percentages and keywords often resolve against the whole SVG canvas. Setting transform-box: fill-box (or view-box with explicit pixel values) fixes it. The generator sets explicit origins, but check them if you edit the code.
Can I stagger multiple elements?
Yes. Ask for a stagger, for example "0.2s between each bar". The output uses a different animation-delay per element id.
Does the CSS work outside the SVG file?
If you inline the SVG in HTML, the style block applies to its ids. If you load the SVG through an img tag, the animation runs from the embedded style block but external CSS cannot reach inside it.
Does it respect prefers-reduced-motion?
Not automatically. You can ask for it in the prompt, or add a @media (prefers-reduced-motion: reduce) rule that pauses animations yourself.
What does it cost?
An average render is about 18 credits. Credit packs start at 150 credits for $5.
Generate @keyframes for your SVG
Buy a credit pack, from $5, and start in the editor.
Related tools
SVG Animation Generator
Describe the motion in plain English and get an animated SVG with embedded CSS @keyframes. Works on SVGs you upload, paste or generate. No JavaScript.
Text to SVG Generator
Generate a static SVG illustration or icon from a text description, with an optional reference SVG for style. 50 credits per generation. Clean vector code.