Css Animation Generator

Generators REST API MCP

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 MCP tool findutils:css_animation_generator. See the REST reference →

Use in the browser View as Markdown

Call it over MCP

Tool name findutils:css_animation_generator · no API keys · 120 requests/min per IP

Claude Code

claude mcp add findutils --transport http https://mcp.findutils.com/

Claude Desktop — claude_desktop_config.json

{
  "mcpServers": {
    "findutils": {
      "url": "https://mcp.findutils.com/"
    }
  }
}

Raw JSON-RPC (any MCP client) — verified example

curl -X POST https://mcp.findutils.com/ \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "tools/call",
    "params": {
      "name": "css_animation_generator",
      "arguments": {
        "preset": "fade-in",
        "format": "css"
      }
    }
  }'

Input 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 a REST endpoint

The same tool answers plain HTTP at POST /api/tools/css-animation-generator/execute — no key, 60 requests/min.

Open the REST reference for Css Animation Generator →

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