What CSS properties can I animate?

Any property listed as animatable in the CSS specification. This includes transform, opacity, color, background-color, width, height, top, left, border-radius, box-shadow, clip-path, and many others. Properties that are not animatable (like display or font-family) are accepted in keyframes but browsers will ignore the interpolation and snap to the end value.

What is fill-mode and when should I use forwards?

Fill-mode controls what happens before an animation starts (if there is a delay) and after it ends. fill-mode: forwards holds the element at the final keyframe state after the animation completes. fill-mode: backwards applies the first keyframe values during the delay period. fill-mode: both does both. Use forwards when you want the element to stay in the animated end state rather than snapping back to its original styles.

What is the difference between animation-direction: alternate and running the animation in reverse?

animation-direction: alternate runs the animation forward on odd iterations and backward on even iterations, creating a ping-pong effect without writing a separate reverse keyframe set. animation-direction: reverse always runs the keyframes from 100% to 0%. Use alternate for bouncing effects; use reverse when you want a permanent direction change.

Can I chain multiple animations on one element?

Yes. Separate multiple animation values with commas on the animation property: animation: slide-in 0.3s ease, pulse 1.5s ease 0.3s infinite;. The tool supports generating multiple animations and combining them into the comma-separated shorthand.

How do I pause an animation on hover?

Add animation-play-state: paused to the element's :hover state. The tool does not generate hover states, but the output includes a comment showing the exact property and value to add to your :hover selector. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.

What timing functions are available?

The tool provides linear, ease, ease-in, ease-out, ease-in-out, and custom cubic-bezier() values. It also supports step functions (step-start, step-end, steps(n, start), steps(n, end)) for creating discrete, frame-by-frame animations. Use the Cubic Bezier Visualizer to design custom timing curves.

CSS Animation Keyframe Builder

This tool builds CSS keyframe animations using a visual timeline editor. Define your keyframe stops, set the animated CSS properties and values at each stop, choose your timing function and duration, and the tool outputs the complete @keyframes block and animation shorthand property. Everything runs in your browser. Your animation configurations never leave your device.

How this tool works

CSS animations work through two components: a @keyframes rule that defines the animation states at specific points in time, and the animation property on the target element that references the keyframe name and controls playback. @keyframes syntax: `css @keyframes animation-name { 0% { property: value; } 50% { property: value; } 100% { property: value; } } `

Worked example

You want a button that pulses gently to draw attention, scaling up slightly and brightening. Keyframes: - 0%: transform: scale(1); box-shadow: 0 0 0 0 rgba(26,35,126,0.4); - 70%: transform: scale(1.05); box-shadow: 0 0 0 10px rgba(26,35,126,0); - 100%: transform: scale(1); box-shadow: 0 0 0 0 rgba(26,35,126,0);

Frequently asked questions

What CSS properties can I animate?
Any property listed as animatable in the CSS specification. This includes transform, opacity, color, background-color, width, height, top, left, border-radius, box-shadow, clip-path, and many others. Properties that are not animatable (like display or font-family) are accepted in keyframes but browsers will ignore the interpolation and snap to the end value.
What is fill-mode and when should I use forwards?
Fill-mode controls what happens before an animation starts (if there is a delay) and after it ends. fill-mode: forwards holds the element at the final keyframe state after the animation completes. fill-mode: backwards applies the first keyframe values during the delay period. fill-mode: both does both. Use forwards when you want the element to stay in the animated end state rather than snapping back to its original styles.
What is the difference between animation-direction: alternate and running the animation in reverse?
animation-direction: alternate runs the animation forward on odd iterations and backward on even iterations, creating a ping-pong effect without writing a separate reverse keyframe set. animation-direction: reverse always runs the keyframes from 100% to 0%. Use alternate for bouncing effects; use reverse when you want a permanent direction change.
Can I chain multiple animations on one element?
Yes. Separate multiple animation values with commas on the animation property: animation: slide-in 0.3s ease, pulse 1.5s ease 0.3s infinite;. The tool supports generating multiple animations and combining them into the comma-separated shorthand.
How do I pause an animation on hover?
Add animation-play-state: paused to the element's :hover state. The tool does not generate hover states, but the output includes a comment showing the exact property and value to add to your :hover selector. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.
What timing functions are available?
The tool provides linear, ease, ease-in, ease-out, ease-in-out, and custom cubic-bezier() values. It also supports step functions (step-start, step-end, steps(n, start), steps(n, end)) for creating discrete, frame-by-frame animations. Use the Cubic Bezier Visualizer to design custom timing curves.