Loading…
Loading…
Build custom keyframe animations with visual easing editor
Animation Preset
Fade In · 1s · ease-out · 1×
@keyframes fadeInAnim { 0% { opacity: 0; } 100% { opacity: 1; } } .animated { animation: fadeInAnim 1s ease-out forwards; }
Run your projects on Claude Code?
We packaged the .claude config that runs this site — 26 specialist agents, 14 workflow skills, and 6 rule files from 31 real production incidents. From $9.
Get the Claude Code Production Pack — $29CSS animations, defined in the CSS Animations Level 1 specification, enable declarative keyframe-based motion without JavaScript. An @keyframes rule defines the animation states at specific percentages of the animation duration; the animation shorthand property binds the keyframes to an element with duration, delay, iteration count, fill mode, and easing function. The cubic-bezier() timing function — from the CSS Transitions specification — shapes the rate of change between keyframes with four control points, enabling custom easing curves beyond the built-in ease, ease-in, ease-out, and ease-in-out presets.
The generator maintains an animation model with eight properties: animation-name (linked to the @keyframes rule), animation-duration, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-timing-function, and the selected preset. Changing any property updates the CSS output and triggers a re-play of the live preview element.
The cubic-bezier visual editor renders a 200x200 canvas with the unit square. Two draggable control points (P1 in the lower third, P2 in the upper third) define the shape of the curve. The curve is drawn using the browser's Canvas bezierCurveTo() method. As you drag, the cubic-bezier(x1,y1,x2,y2) values update in the animation shorthand output.
The 13 preset animations each define a complete @keyframes block. For example, the Bounce preset generates @keyframes with from {opacity: 0; transform: translateY(-30px)} and to {opacity: 1; transform: translateY(0)} combined with a cubic-bezier(0.34,1.56,0.64,1) overshoot curve.
A developer adds an entrance animation to a card component that fades in and slides up when mounted, copying the @keyframes and animation CSS from the Fade Up preset.
A frontend engineer creates a custom loading indicator with a pulsing ring, adjusting the Pulse preset's cubic-bezier to create an elastic bounce at the peak size.
A designer implements a shake animation for a failed form validation state, using the Shake preset and setting iteration-count to 1 with fill-mode: forwards.
A developer replicates a complex easing curve from a Framer Motion animation by matching the cubic-bezier control points in the visual editor and exporting the pure CSS equivalent.
Pick an animation preset — fade, slide, bounce, spin, and more
Adjust duration, delay, iteration count, and fill mode
Use the cubic-bezier editor for custom easing curves
Copy the generated @keyframes CSS code
About the CSS Animation Generator
Yes. Select 'custom cubic-bezier' as the timing function to open the visual editor. Drag the two control points to shape your curve, or use presets like Bounce and Elastic.
13 presets: Fade In/Out, Slide In (4 directions), Bounce, Pulse, Shake, Spin, Flip, Zoom In/Out. Each generates the corresponding @keyframes code.
Everything runs in your browser. No data is sent to any server.
A cubic Bezier curve is defined by four points: the start (0,0) and end (1,1) are fixed; the two control points (P1 and P2) are adjustable. The curve maps animation progress (X axis) to the actual movement amount (Y axis). A steep early rise creates a fast-start-slow-end ease-out; a flat start with steep end creates ease-in. The visual editor lets you drag P1 and P2 directly.
fill-mode controls what styles apply before and after the animation runs. "forwards" retains the final keyframe styles after the animation ends (prevents snapping back). "backwards" applies the first keyframe styles during the delay period. "both" does both. For one-time entrance animations, "forwards" is usually what you want.
Add the CSS animation with animation-play-state: paused by default. Use the Intersection Observer API in JavaScript to detect when the element enters the viewport, then change animation-play-state to running. The generator outputs the @keyframes and animation shorthand; the intersection trigger requires a small JavaScript event listener.
Builder/critic agent prompts with brakes built in
Open →DeveloperFormat, validate & diff JSON — runs entirely in browser
Open →DeveloperTest regex live — railroad diagrams + plain English explained
Open →DeveloperOne color in, full design system out
Open →