CSS Animation Builder
CSSBuild CSS @keyframes animations with presets, live preview, and generated CSS
Pick from ten built-in presets like fade, slide, bounce, pulse, spin, or shake, tweak duration, easing, and delay, and watch a live preview loop while you dial it in before copying the generated `@keyframes` rule and animation shorthand. Custom keyframe steps at any percentage (0%, 50%, 100%, or anything between) are supported too, not just the presets, and it can also parse an existing `@keyframes` block you paste in to extract and edit its steps rather than starting from scratch. It only animates standard CSS properties like transform and opacity; it can't morph an SVG path's `d` attribute, and there's no export to a JS animation library like Framer Motion or GSAP, so translating the output to one of those is a manual step if that's your stack. Output is plain, dependency-free CSS.
How to use CSS Animation Builder
- 1.Pick a preset like fade-in, bounce, or spin, tweak duration and easing, then copy the generated @keyframes CSS straight into your stylesheet.
- 2.Watch the live preview loop as you adjust timing and delay to match the animation to a real button or card in your UI.
- 3.Chain multiple keyframe steps (0%, 50%, 100%) with different transforms to build a custom animation instead of starting from a blank @keyframes block.
Frequently asked questions
Use via API, SDK, or MCP
Installnpm install @utilix-tech/sdkUsageimport { css } from '@utilix-tech/sdk'
const animation = css.generateKeyframesCSS('fadeIn', [
{ stop: 0, properties: { opacity: '0' } },
{ stop: 100, properties: { opacity: '1' } }
])
console.log(animation)Runs locally · no API key · no rate limits · Node.js SDK docs →