CSS Animation Builder

@keyframes lets you define a sequence of CSS states that an element transitions through over time. You give the animation a name, then specify property values at percentage points (0% is the start, 100% is the end, with optional midpoints). The element smoothly interpolates between these states. You apply it with the animation shorthand property, controlling duration, timing, iteration count, and direction.

fill-mode controls the element's style before and after the animation runs. none (default): the element reverts to its original style before and after. forwards: the element keeps the final keyframe style after the animation ends — useful for 'slide in and stay'. backwards: the element applies the first keyframe style during the delay period. both: combines forwards and backwards. Use forwards when you want a one-shot animation that lands at a new state.

alternate makes the animation play forward on odd iterations and backward on even iterations, creating a smooth back-and-forth effect without a jarring reset. It's ideal for pulsing, bouncing, or breathing effects. alternate-reverse starts backward on the first iteration. For infinite looping animations, alternate looks more natural than normal (which resets abruptly). Combine with ease-in-out for the smoothest result.

cubic-bezier(x1, y1, x2, y2) defines a custom speed curve for the animation. The four values control two control points on a Bézier curve between (0,0) and (1,1). x values must be 0–1; y values can go outside 0–1 for overshoot effects. Example: cubic-bezier(0.34, 1.56, 0.64, 1) creates a bouncy overshoot. Use cubic-bezier.com to visually design custom curves and copy the values.

To animate multiple properties, add them all to a single @keyframes rule. For example: 0% { transform: scale(1); opacity: 0; } 100% { transform: scale(1.2); opacity: 1; }. You can also use multiple animation declarations with a comma: animation: grow 1s ease, fade 1s ease;. This tool generates single-property keyframes — for multi-property animations, combine the generated keyframe values manually.

CSS animations are GPU-accelerated when you animate transform and opacity — the browser composites these on the GPU without repainting the page. Animating color, background-color, width, height, margin, or padding triggers layout recalculations and/or repaints, which are much more expensive. For smooth 60fps animations, stick to transform and opacity whenever possible. Use will-change: transform on the element to hint the browser to promote it to its own composite layer.