Return CSS @keyframes animation code (or Tailwind config, Web Animations API / React, or Framer Motion code) from a named preset such as fade-in, bounce, pulse, shake, spin, or from custom keyframes with transform, opacity, filter and color properties.
This page documents the HTTP endpoint POST /api/tools/css-animation-generator/execute. See the MCP reference →
Call it over REST
POST https://api.findutils.com/api/tools/css-animation-generator/execute · no API keys · 60 requests/min per IP
Execute — verified arguments
curl -X POST https://api.findutils.com/api/tools/css-animation-generator/execute \
-H "Content-Type: application/json" \
-d '{
"preset": "fade-in",
"format": "css"
}'Parameter schema for this endpoint
curl https://api.findutils.com/api/tools/css-animation-generatorInput schema
| Argument | Type | Required | Description |
|---|---|---|---|
| preset | string (fade-in | slide-in-up | slide-in-down | slide-in-left | slide-in-right | zoom-in | flip-in | fade-out | slide-out-up | zoom-out | bounce | pulse | shake | wobble | jello | heartbeat | spin | float | swing | morph | color-shift | glow) | no | Built-in animation preset. Ignored when keyframes is given. |
| keyframes | array | no | Custom keyframes: [{ offset: 0-100, properties: { translateX, translateY, rotate, scale, scaleX, scaleY, skewX, skewY, opacity, blur, brightness, contrast, saturate, hueRotate, borderRadius, backgroundColor, color } }]. |
| name | string | no | Animation / class name (CSS identifier). |
| duration | number | no | Duration in milliseconds. |
| timing_function | string | no | Easing: a CSS timing function, a cubic-bezier(...) or a preset name such as "ease-out-back", "bounce", "spring". |
| iteration_count | string | no | Number of iterations or "infinite". |
| direction | string (normal | reverse | alternate | alternate-reverse) | no | Animation direction. |
| fill_mode | string (none | forwards | backwards | both) | no | Animation fill mode. |
| delay | number | no | Start delay in milliseconds. |
| format | string (css | tailwind | react | framer | all) | no | Output format. "all" returns every format. Default: "css". |
Example arguments (verified)
{
"preset": "fade-in",
"format": "css"
}Also an MCP tool
Claude, Cursor, and any MCP client can call this tool as
findutils:css_animation_generator after one connect command.
Connect once
claude mcp add findutils --transport http https://mcp.findutils.com/More Generators tools
Barcode Generator
Generate a 1D barcode as an SVG string from text.
Box Shadow Generator
Generate a CSS box-shadow declaration from offset, blur, spread, colour, opacity, and inset settings, or from a named preset (subtle, soft,
Caption Generator
Generate a social-media caption from a topic using built-in templates (no AI): picks a template for the content type and tone, fills in the
Color Palette Generator
Generate a harmonious colour palette from a base hex colour: complementary, analogous, triadic, tetradic, split-complementary, or monochroma
Glassmorphism Generator
Generate the CSS for a glassmorphism (frosted glass) card: semi-transparent background, backdrop-filter blur and saturation (with the -webki
Gradient Generator
Generate a CSS linear, radial, or conic gradient from colour stops (2 to 10) and an angle, or from a preset (sunset, ocean, forest, fire, pu
Hashtag Generator
Generate relevant hashtags from keywords using a built-in, rule-based database (no AI): matches keywords against topic categories, scores po
Linkedin Post Generator
Assemble a LinkedIn post from a hook, a body, a call to action and hashtags, or from one of seven built-in templates (thought leadership, st