Choose an animation preset, set how long it runs, how it eases, how many times it repeats and how far it moves, and the tool writes the @keyframes block and the rule that applies it. The code is plain CSS with no library needed. There is no looping preview on this page, so each preset is described below and in the guide; paste the code into your page to see it move.
Easing is the speed profile of the motion. Ease-out starts fast and slows to a stop, which feels natural for things arriving on screen because it matches how objects settle. Ease-in starts slow and ends fast, which suits things leaving. Ease-in-out suits movement that starts and ends in view, and linear is for loops such as spinners where any change in speed would show as a stutter.
The overshoot option uses a cubic Bezier curve that goes slightly past the target and returns, which gives buttons and cards a springy feel. Use it for small distances; over a large distance the overshoot looks like a mistake.
The delay is useful for staggering several items: give the first card a delay of zero, the second 0.1 seconds, the third 0.2 seconds and so on, and the group appears as a ripple instead of all at once. Keep the total stagger under about half a second or visitors will wait for the last item.
Do not animate things that people need to read or click while they move. A button that slides in over a full second can be missed or tapped in the wrong place. Let the content settle quickly and use the longer loops only for decoration.
Properties like width, height, top and margin force the browser to recalculate the page layout on every frame, which makes animation janky on weaker devices. Transform and opacity do not, and every preset here uses only those two. If you need something to grow, use scale rather than width.
The prefers-reduced-motion media query is the standard way to respect a visitor's system setting. Inside it, the generated code turns the animation off completely. For loops that carry meaning, such as a loading spinner, you may prefer to slow it down rather than stop it.
It is a set of named waypoints. The @keyframes block lists what the element should look like at points along the timeline, such as from and to or 0%, 50% and 100%, and the animation property tells an element which block to play and how fast.
In order: the keyframes name, duration, timing function, delay, iteration count, direction and fill mode. For example, fade-in 2s ease-in-out 0.5s 3 normal forwards plays the fade-in block over 2 seconds, after a 0.5 second wait, three times.
It controls what the element looks like before and after the animation. Forwards keeps the final frame, backwards applies the first frame during the delay, both does both, and none returns the element to its normal style.
Slides start the given number of pixels away and move to their normal place. Zoom in starts at one minus the scale amount: a scale amount of 20% starts at 0.8 size. Pulse grows to one plus the scale amount, so 20% grows to 1.2 times. Shake swings a quarter of the distance each side.
Yes, but only by separating them with a comma in one animation property. Two animations that both set transform will fight each other, so combine them in one keyframes block or wrap the element in a second element.
Related: CSS shadow generator, CSS layout generator, CSS gradient generator.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.