Animation Preset
Fade In · 1s · ease-out · 1×
@keyframes fadeInAnim { 0% { opacity: 0; } 100% { opacity: 1; } } .animated { animation: fadeInAnim 1s ease-out forwards; }
CSS 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
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 — $29