Build CSS keyframe animations with a visual timeline, easing curves, and live preview.
CSS animations are timing problems: every motion is a set of percentage stops, a duration, and an easing curve, and the browser interpolates between them. This tool turns that structure into a visual editor - you place keyframes on a timeline, pick an easing curve for each segment, and watch the result run in a live preview before copying the generated CSS. The surprise most people hit: an animation is not a permanent change. When it finishes, the element snaps back to its pre-animation styles unless the generated code sets animation-fill-mode to forwards or both.
A concrete input and expected output from the current implementation.
Input
Name it cardIn. Slide a card up and fade it in: from opacity 0, transform translateY(24px) to opacity 1, transform translateY(0). Duration 0.6s, easing ease-out, play once, hold the final state.
Expected output
@keyframes cardIn {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card {
animation: cardIn 0.6s ease-out both;
} Every value in the output follows from the input: the two stops become the from/to keyframes, 0.6s and ease-out land in the animation shorthand, and "hold the final state" becomes the both fill mode - the setting that keeps the card at its final frame instead of letting it snap back once the run ends.
The timeline positions become percentage stops in a @keyframes rule: a marker at the start is 0%, the end is 100%, and anything between is its position along the duration as a percentage. Dragging a marker updates those percentages, and the generator writes the stops in ascending order, each carrying only the properties you changed there. Percentages are fractions of the duration, not distances the element moves.
An easing curve is a timing function between two stops, not a shape for the whole animation: a three-stop animation runs one curve from 0% to 50% and another from 50% to 100%. The preview runs the emitted CSS in the page, so the motion you see is the interpolation the browser actually performs, including the hold at the end when a fill mode is set.
Because the default fill mode is none: after the final iteration, the element returns to the styles it had before the animation. For an exit animation such as a fade-out, that means it pops back into view. Set animation-fill-mode: forwards to keep the last frame, or both to also apply the first frame during a delay. The builder's hold-end-state option emits exactly this.
Usually the property, not the curve. Animating top, left, width, or height makes the browser recalculate layout on every frame, which is the classic source of jank. Animating transform and opacity does not, so express movement as translate() or scale() and visibility as opacity, and keep the animation on a short duration.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.