Create custom CSS keyframe animations visually. Add keyframes, adjust timing, and preview animations in real-time.
Create CSS @keyframes animations visually, define keyframes on a timeline, set properties at each point, preview the animation in real time, and copy the generated CSS.
Initializing in your browser…
Design custom CSS buttons with text, background (solid/gradient), border, shadow, and hover effects controls. 12 presets including 3D, Neon, Ghost, and Pill styles
Create custom CSS clip-path shapes visually. Drag points to customize polygons, circles, and complex shapes.
Create stunning CSS gradients with linear/radial/conic types, angle control, position control, multiple color stops, 11 presets, and reverse/randomize features
You want a subtle "fade and rise" entrance for cards as they scroll into view, as reusable CSS.
Animation settings
Name fadeInUp · from opacity 0 / translateY(16px) · to opacity 1 / translateY(0) · 400ms ease-out
Generated CSS
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeInUp .4s ease-out both; }Animating `opacity` and `transform` keeps the work on the GPU compositor, so the entrance stays at 60fps instead of triggering layout. The generator emits the `@keyframes` plus the shorthand, including `both` so the element keeps its final state and does not flash back, ready to paste into a stylesheet.
Create CSS @keyframes animations visually, define keyframes on a timeline, set properties at each point, preview the animation in real time, and copy the generated CSS.
The CSS Animation Generator builds a `@keyframes` block and matching `.animated-element` rule visually, then shows the result live on a 96px gradient box you can Play, Pause, and Restart. You start from one of eight presets, each of which loads its own keyframes plus a tuned duration and easing: Fade In (0.5s ease-out, opacity 0 to 1), Slide Up (0.6s ease-out, opacity plus translateY(20px) to 0), Bounce (1s cubic-bezier with six keyframes stepping translateY through -30px and -15px), Pulse (1.5s ease-in-out, scale 1 to 1.1), Shake (0.5s ease-in-out, translateX +/-10px), Spin (1s linear, rotate 0 to 360deg), Flip (0.6s ease-out, perspective(400px) rotateY 360deg), and Glow (2s ease-in-out animating box-shadow blur and rgba(59,130,246) intensity). Applying a preset clones its keyframes with fresh IDs and bumps the preview so the new animation restarts immediately.
The keyframes editor lets you place each stop on a 0-100% offset slider (step 1) and the tool keeps them sorted by offset; Add inserts a new stop 25% past the current last (capped at 100%), and removal is blocked below two keyframes with a toast warning so the animation always has a start and end. Per keyframe you get one-click quick-add buttons for `opacity` (defaults to 1), `transform` (defaults to none), and `backgroundColor` (defaults to #ffffff), and any value is freely editable as text. On output the generator converts camelCase property names to kebab-case via a regex (so `backgroundColor` becomes `background-color`), and the animation name is sanitized to `[a-zA-Z0-9_-]` as you type so it stays a valid CSS identifier.
Timing is controlled by a Duration slider from 0.1s to 5s (step 0.1) and six easing options: linear, ease, ease-in, ease-out, ease-in-out, and cubic-bezier. Choosing cubic-bezier reveals four numeric inputs (x1, y1, x2, y2, default 0.25/0.1/0.25/1, step 0.05, clamped 0-1) that emit a literal `cubic-bezier(...)` value. You also set iteration count (1, 2, 3, or infinite), direction (normal, reverse, alternate, alternate-reverse), and fill-mode (none, forwards which is the default, backwards, both, written out as a separate `animation-fill-mode` line). The generated CSS is copy-to-clipboard, the full configuration is encoded into a shareable URL, and the whole thing runs client-side with no server round-trip.
Selecting Bounce loads a 1s cubic-bezier animation with six keyframes that move translateY from 0 to -30px (20%), back to 0 (40%), to -15px (60%), and settle at 0 (80-100%), giving a damped double-hop.
Start from Spin (1s linear, rotate 0deg to 360deg), set iterations to infinite, then use the Share button to encode duration, easing, iteration count, direction, fill-mode and name into the URL for a teammate to reopen.
Design custom loading animations without pulling in a library.
Create entrance animations for elements as they come into view.
Build subtle hover and focus animations that make UI elements feel responsive.
Animating transform and opacity is GPU-accelerated and performs well. Avoid animating layout properties like width, height, or margin.
Yes. Use animation-delay to stagger animations or list multiple animation names on a single element.
This runs as client-side JavaScript. Keys, tokens, payloads, and other inputs never leave your device.