CSS Keyframe Animation Generator

A CSS keyframe animation lets you define style changes at specific points along an animation timeline, with the browser smoothly interpolating between those states. A @keyframes rule names the animation and lists stops - each stop is a percentage (or the keywords from / to) paired with CSS declarations. The animation property (or individual animation-* properties) then attaches those keyframes to an element and controls duration, delay, easing, repetition, direction, and fill behaviour.

CSS transitions trigger automatically when a property value changes - for example when a user hovers over a button - and interpolate between the old and new value in a single step. CSS animations are more powerful: they run independently of state changes, can loop, reverse, and define multiple intermediate keyframe stops, and can start automatically when the page loads without any user interaction. Use transitions for simple hover or focus effects, and animations for anything involving multiple stages, looping, or auto-play behaviour.

animation-fill-mode controls what styles are applied to an element before the animation starts and after it ends. none (the default) means the element returns to its original styles outside the animation period. forwards keeps the styles from the last keyframe applied after the animation finishes. backwards applies the styles from the first keyframe during the delay period before the animation starts. both combines the behaviour of forwards and backwards.

animation-direction controls the order in which keyframes play on each iteration. normal plays from 0% to 100% every cycle. reverse plays from 100% back to 0%. alternate plays forwards on odd iterations and backwards on even ones, producing a smooth back-and-forth effect. alternate-reverse does the same but starts by playing backwards on the first iteration.

Set animation-iteration-count: infinite on the element. You can also use the shorthand - for example animation: spin 2s linear infinite - where infinite is the iteration count value. If you want the animation to loop a specific number of times rather than forever, replace infinite with any positive number, including decimal values like 1.5 to play one and a half cycles.

A positive animation-delay pauses the animation for the specified time before it starts playing, which is useful for staggering multiple animations. A negative delay, such as animation-delay: -1s, starts the animation immediately but as if it had already been playing for that amount of time - so with a 2-second duration, a -1s delay starts the animation halfway through its first cycle. Negative delays are commonly used to offset looping animations so they feel more natural and less synchronised.

For smooth 60fps animations, stick to transform and opacity. These properties are handled by the compositor thread and do not trigger layout recalculation or repaint on every frame. Animating properties like width, height, top, left, margin, or padding forces the browser to recalculate layout on every frame, which is significantly more expensive. When you need to move an element, use translateX or translateY instead of changing positional properties.

A cubic-bezier() function defines a custom easing curve that controls how an animation accelerates and decelerates over time. It takes four values - x1, y1, x2, y2 - representing the control points of a cubic Bézier curve between (0,0) and (1,1). The named easing keywords are all shortcuts: ease is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1), linear is cubic-bezier(0, 0, 1, 1), and ease-in-out is cubic-bezier(0.42, 0, 0.58, 1). Custom curves allow effects like overshooting, springing, or snapping that the named keywords cannot produce.

animation-play-state lets you pause and resume a CSS animation without resetting it. Setting it to paused freezes the animation at its current point in the timeline. Setting it back to running resumes from where it stopped. This is commonly used with JavaScript to toggle animations on user interaction - for example pausing a looping background animation when a modal opens, then resuming when it closes.

Use the @media (prefers-reduced-motion: reduce) media query to tone down or remove animations for users who have enabled the "reduce motion" setting in their operating system. A common approach is to wrap all animation declarations in @media (prefers-reduced-motion: no-preference) so they only apply when the user has no motion preference, or to override animation-duration to an extremely short value like 0.01ms inside the reduce query. This makes your animations inclusive without removing them entirely for everyone else.

Yes. All modern browsers - Chrome, Firefox, Safari, and Edge - support unprefixed CSS animations fully. The -webkit- prefix was dropped from Safari in version 9 and is no longer needed for any currently supported browser. CSS animations generated by this tool are production-ready and can be used without modification for any audience on a current operating system.