CSS Animation Generator
Build CSS @keyframes animations visually with live preview. Pick a preset or create custom keyframes, adjust timing and easing, and copy the generated CSS.
Advertisement
Presets
Live Preview
Animation Properties
Keyframes (2)
Generated CSS
@keyframes myAnimation {
0% {
background-color: #ffc107;
border-radius: 8px;
}
100% {
background-color: #ffc107;
border-radius: 8px;
}
}
.animated-element {
animation: myAnimation 1000ms ease 0ms infinite normal none;
}Advertisement
How to Use the CSS Animation Generator
This CSS animation generator lets you build @keyframes animations visually without writing code by hand. Start by choosing one of the eight built-in presets — Fade In, Slide Up, Bounce, Pulse, Shake, Spin, Flip, or Zoom In — to load a working animation instantly. Each preset configures the keyframes, timing function, iteration count, direction, and fill mode automatically, giving you a solid foundation to customize further. You can also start from scratch by editing the two default keyframes at 0% and 100%.
The live preview panel shows your animation running in real time on a colored box element. Use the Play, Pause, and Restart buttons to control playback, and switch between 0.5x, 1x, and 2x speed to inspect fast or slow animations more closely. Every change you make to the animation properties or keyframes updates the preview instantly, so you always see exactly what your CSS will produce.
In the animation properties section, you can set a custom animation name (used in the @keyframes rule), adjust the duration from 100ms to 5000ms using a slider, and configure the delay from 0ms to 3000ms. Choose a timing function from the dropdown — ease, linear, ease-in, ease-out, ease-in-out, or cubic-bezier for custom easing. When you select cubic-bezier, a dedicated editor appears with four number inputs for the control points and quick-access presets for common curves like ease, ease-in-out, and a bouncy overshoot effect.
The iteration count buttons let you choose 1, 2, 3, or infinite repetitions. The direction buttons control whether the animation plays normally, in reverse, or alternates back and forth. The fill mode buttons determine what happens before and after the animation runs — whether the element snaps back to its original state or retains the final keyframe's styles.
The keyframe editor displays all your keyframes sorted by percentage. Each keyframe card includes sliders for position (0–100%), translateX, translateY, scale, rotate, skewX, and opacity, plus a color picker for background color and a slider for border radius. Add new keyframes with the "+ Add Keyframe" button, which automatically inserts a new keyframe at the midpoint of the largest gap in your timeline. Remove any keyframe except the minimum two required.
Once your animation looks right, the generated CSSpanel at the bottom shows the complete @keyframes rule and animation shorthand property ready to copy into your stylesheet. Click "Copy CSS" to copy everything to your clipboard. Use the Share button to generate a URL that preserves your animation name, duration, and timing function, making it easy to share your work with teammates or save it for later. All processing happens entirely in your browser — nothing is sent to a server.
Frequently Asked Questions
What are CSS animations?
CSS animations allow you to animate HTML elements without JavaScript by defining a set of styles at various points during the animation sequence. They consist of two parts: the animation property applied to an element (which controls duration, timing, delay, and other behavior) and @keyframes rules that define the actual style changes at each stage of the animation. CSS animations are hardware-accelerated by most browsers, making them smooth and performant for common effects like fades, slides, rotations, and scaling.
What are @keyframes in CSS?
The @keyframes at-rule defines the stages and styles of a CSS animation sequence. Each keyframe specifies what CSS properties should be applied at a given percentage of the animation timeline, from 0% (the start) to 100% (the end). You can define as many keyframes as needed between 0% and 100% to create complex multi-step animations. The browser automatically interpolates (tweens) between each keyframe, creating smooth transitions from one state to the next.
How do CSS animation timing functions and easing work?
Timing functions control the acceleration curve of a CSS animation. The built-in options are: "ease" (slow start, fast middle, slow end), "linear" (constant speed throughout), "ease-in" (slow start, fast end), "ease-out" (fast start, slow end), and "ease-in-out" (slow start and end). For precise control, you can use cubic-bezier(x1, y1, x2, y2) to define a custom easing curve. The four values define control points on a bezier curve that maps animation progress to visual progress.
What does animation-fill-mode do?
The animation-fill-mode property determines how styles are applied before the animation starts and after it ends. With "none" (the default), the element returns to its original styles when the animation is not running. "forwards" keeps the styles from the last keyframe after the animation completes. "backwards" applies the styles from the first keyframe during the animation-delay period before it starts. "both" combines the behavior of forwards and backwards, applying first-keyframe styles during the delay and retaining last-keyframe styles after completion.
What does animation-direction control?
The animation-direction property sets whether an animation plays forward, backward, or alternates between the two. "normal" plays from 0% to 100% on every iteration. "reverse" plays from 100% to 0%. "alternate" plays forward on odd iterations and backward on even iterations, creating a back-and-forth effect. "alternate-reverse" starts backward on the first iteration then alternates. This property is especially useful for creating natural-looking looping animations like pulsing or bouncing effects.
Are CSS animations supported in all modern browsers?
Yes, CSS animations including @keyframes, the animation shorthand property, and all timing functions are fully supported in all modern browsers: Chrome, Firefox, Safari, Edge, and Opera. They also work on mobile browsers including iOS Safari and Chrome for Android. No vendor prefixes (-webkit-, -moz-) are needed for current browser versions. The cubic-bezier() timing function and all animation sub-properties (delay, fill-mode, direction, iteration-count) have universal support across modern platforms.