Use the free Keyframe Animation Generator below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
What Keyframes Actually Are
A keyframe animation is a list of snapshots: what an element should look like at certain points in time, with the browser filling in the movement between them. A transition moves between two states, but a keyframe animation can pass through many states, loop forever, pause, reverse, or follow a complex path. The tool above builds a simple version with three snapshots: the start, a middle step you control, and the end. The preview box loops your animation, so you can judge it as a repeating motion rather than a single jump.
The middle step is where the character lives. At the start and end, the box sits in its normal place, at normal size, fully visible. In the middle, it can move sideways, spin, grow, shrink, or fade. The browser interpolates between those snapshots smoothly, so the box glides out and glides back. Because the start and end match, the loop has no jump: the end of one cycle is the start of the next. That clean loop is what makes keyframe animations useful for loading indicators, attention cues, and decorative motion.
How to Use the Generator
Move the midpoint sliders one at a time and watch the preview. The move slider shifts the box sideways at the halfway point, up to 200 pixels in either direction. The rotation slider spins it, up to a full turn each way. The scale slider grows it to twice its size or shrinks it to a third. The opacity slider fades it, down to barely visible. The duration slider sets how long one full cycle takes, from half a second to five seconds.
Start with one change at a time. A box that only moves is clear and easy to judge. A box that only spins is equally clear. Once you like a single effect, combine two: a move plus a slight scale, or a spin plus a fade. Combining all four at full strength usually looks chaotic, because the eye cannot follow a box that moves, spins, grows, and fades all at once. Restraint is the skill here. Pick the one effect that carries the meaning, and let the others stay small or at zero.
Designing Motion That Means Something
Motion should communicate, not just decorate. A gentle pulse draws attention to a new message without shouting. A small lift suggests something is clickable. A fade suggests something is leaving or arriving. A spin suggests processing or play, depending on context. Before you add an animation, ask what it tells the user. If the answer is nothing, the animation is decoration, and decoration should be subtle enough to ignore.
Performance: Animate the Cheap Properties
Not all animated properties cost the same. Transform and opacity are cheap, because the browser can animate them on the graphics processor without recalculating the layout. Width, height, top, left, and margin are expensive, because changing them forces the browser to reflow the page, which can stutter on phones. The tool above only animates transform and opacity, which is the right habit: move with translate, spin with rotate, grow with scale, and fade with opacity, and your animations stay smooth.
Also keep animated elements small and few. One animated box is smooth on almost any device. Twenty animated boxes, especially large ones, can still struggle. If a page feels janky, reduce the number of animated elements before you blame the code. Test on a mid-range phone, not just a fast desktop, because your users will not all have your hardware. The copied code uses the same cheap properties, so it carries this good practice into your own site.
From a Loop to a Real Animation
The generated code is a starting point, not a finished design. The animation name, myMove, can be renamed to something meaningful, like pulseBadge or slideHint. The keyframes can gain more steps: add a 25 percent and a 75 percent snapshot for a more complex path, or change the end state so the animation runs once and stays at its final position. To run once instead of looping, change infinite to forwards, so the element holds its last keyframe when the animation ends.
Frequently Asked Questions
Why does my animation jump at the end of each loop? That happens when the last keyframe does not match the first. This tool keeps them identical, so the loop is seamless. If you edit the code, keep the 0 percent and 100 percent snapshots the same for a clean loop.
Can I animate colour with keyframes? Yes, but colour animation is more expensive than transform and opacity. Use it sparingly, for small elements, and prefer transform and opacity for anything that moves.
How do I stop the animation after one play? Remove infinite from the animation rule and add forwards, so the element finishes at its last keyframe and stays there.
Build a loop above, tune it until it feels calm and clear, and copy the code. The best animation is the one users notice only when it helps them.
Related tools
- Generador de Animaciones por Fotogramas (Spanish version)
- Loading Spinner Maker
- Hover Effect Preview