CSS Animation Generator

Define a @keyframes rule with named stages (from/to or percentages), then apply it with the animation shorthand: animation: slidein 0.5s ease-out. This tool lets you visually build keyframes and preview the animation in real-time.

Transitions animate between two states triggered by a change (like hover). Animations use @keyframes to define multi-step sequences that can loop, reverse, and run independently. Use transitions for simple state changes, animations for complex or looping motion.

Animate only transform and opacity — these run on the GPU compositor thread without triggering layout or paint. Avoid animating width, height, top, left, or margin, which cause expensive reflows. Use will-change sparingly to hint the browser about upcoming animations.

Yes — use animation-timing-function with built-in keywords (ease, linear, ease-in-out) or custom cubic-bezier() curves for precise control. You can also use steps() for frame-by-frame animation. animation-delay offsets the start, and animation-fill-mode controls the element's style before/after the animation.