// build CSS keyframe animations visually
Build CSS @keyframe animations visually. Add keyframes, control timing, easing and properties with a live preview. Export clean CSS instantly — free, no sign-up.
Choose from 25+ preset animations to start instantly, or build from scratch by adding keyframe stops with the + button.
Each keyframe has a percentage position and a set of CSS properties. Add transform, opacity, color and any custom property you need.
Adjust duration, delay, easing, iterations and direction in the settings panel. The live preview updates instantly. Copy the CSS output and paste into your project.
CSS Animation Generator lets you build @keyframes animations visually with a live preview element, timeline editor, and configurable animation properties. It generates clean, ready-to-paste CSS including the @keyframes block and the animation shorthand — free and browser-based.
CSS @keyframes define the intermediate states of an animation. Each keyframe specifies a percentage of the animation's total duration and the CSS property values at that point. The browser interpolates the values between keyframes to produce the animated motion. The animation property then references the keyframe name and sets timing parameters.
The animation shorthand combines all animation sub-properties in one declaration: animation: name duration timing-function delay iteration-count direction fill-mode. Individual sub-properties like animation-duration and animation-timing-function are also valid and are sometimes preferred for readability or when overriding a single property in a media query.
CSS transition animates a property from one state to another when triggered by an event such as hover or focus. CSS animation with @keyframes plays automatically, can loop indefinitely, can run in multiple directions, and can define any number of intermediate states — not just a start and end. Animations are appropriate for continuous effects like loaders, while transitions suit interactive state changes.
animation-fill-mode controls the styles applied to the element before the animation starts and after it ends. forwards keeps the styles from the last keyframe after the animation completes. backwards applies the first keyframe styles during the delay period. both applies both rules. none (default) returns the element to its pre-animation styles.
Easing functions control the rate of change between keyframes. ease starts and ends slowly with a faster middle. linear moves at a constant rate. ease-in starts slowly and accelerates. ease-out starts fast and decelerates. cubic-bezier() accepts four custom control point values for any custom curve, enabling spring, bounce, and elastic effects.
Yes. Each keyframe can contain any number of CSS property declarations. You can simultaneously animate transform, opacity, background-color, border-radius, and any other animatable property within a single @keyframes block. The browser interpolates each property independently according to the keyframe stops defined for it.
CSS animations bring interfaces to life without JavaScript. A well-crafted @keyframes animation can guide user attention, communicate state changes, provide loading feedback, and add personality to an interface. Building these animations from scratch requires memorising syntax and iterating through many file saves and refreshes. This CSS Animation Generator eliminates that friction with a visual editor and live preview.
A CSS animation consists of two parts. The @keyframes rule defines the animation sequence — a series of percentage-based stops each containing property declarations. The animation property on the element binds a keyframe rule by name and sets the timing parameters: duration, delay, easing, iteration count, direction, and fill mode. The browser interpolates between the keyframe stops to produce smooth motion.
The animation shorthand packs all parameters into a single declaration in the order: name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state. For example: animation: slideIn 0.4s ease-out 0.1s 1 normal forwards. Any parameter can be omitted if you want to use its default value. For complex animations or when overriding individual parameters in responsive rules, the individual properties — animation-duration, animation-timing-function, and so on — are clearer.
The transform property is the most commonly animated CSS property because it is hardware-accelerated and does not trigger reflow. Combining translateX, translateY, scale, and rotate in a single transform value produces smooth, performant motion. This generator lets you set transform values at each keyframe stop and handles the correct CSS syntax automatically.
The preset library covers the most-used animation patterns: fade in and out, slide from each direction, bounce in, zoom in, shake, rotate, pulse, flip, swing, rubber band, jello, and more. Each preset loads a complete set of keyframes and animation parameters that you can use directly or modify as a starting point. Presets are particularly useful when learning how specific effects are structured.