Developers · Agents

The motion you design is the motion that ships

Every animation made with Animate It exports as CSS, as JSON, or as a prompt for your coding agent. Same times, same values, same curves as Figma.

Install the skill Read skill.md

Workflow

Three steps to shipped

From the plugin to your repo, without anyone guessing a curve.

Open Code

In the plugin, pick a preset and press the code button in the stack header. The code is sized for the selected layer.

Pick a format

CSS to paste as is, JSON for any platform, or an AI prompt that carries the rules with it.

Paste and ship

Into your stylesheet, your app, or your coding agent. The numbers match Figma's timeline.

Formats

Three formats

Card Rise on three cards, 0.08s apart, as the Code panel gives it.

CSS

One @keyframes per property over the whole run, each with its own curve. Parts that share a CSS property animate registered custom properties. Stagger is a --delay on each element.

JSON

animate-it/motion v1: every keyframe's time, value, and the cubic-bezier to the next one. Works for React, SwiftUI, Compose, games.

AI prompt

The format rules plus the JSON, asking your agent to use the library your project already has and to keep the numbers exact.

@property --ai-y { syntax: "<length>"; inherits: false; initial-value: 0px; }

@keyframes card-rise-translate-y {
  0%      { --ai-y: 40px; animation-timing-function: ease-out; }
  85.714% { --ai-y: 0px; }
  100%    { --ai-y: 0px; }
}

.card-rise {
  translate: 0px var(--ai-y);
  box-shadow: 0px var(--ai-shadow-y) var(--ai-shadow-blur) 0px
    rgb(0 0 0 / var(--ai-shadow-alpha));
  animation: card-rise-opacity 0.7s linear both,
    card-rise-translate-y 0.7s linear both, …;
  animation-delay: var(--delay, 0s);
}

Agent skill

Teach your agent the format once

With the skill installed, paste the JSON and say “add this”. It has recipes for CSS, Motion for React, GSAP, Web Animations, SwiftUI, and Compose. No setup at all? Use the AI prompt tab instead.

Claude Code, this project

mkdir -p .claude/skills/animate-it-motion && curl -o .claude/skills/animate-it-motion/SKILL.md https://animateit.pro/skill.md

Claude Code, every project

mkdir -p ~/.claude/skills/animate-it-motion && curl -o ~/.claude/skills/animate-it-motion/SKILL.md https://animateit.pro/skill.md

Cursor

mkdir -p .cursor/rules && curl -o .cursor/rules/animate-it.mdc https://animateit.pro/skill.md

Claude.ai and Claude Desktop

Download skill.md, put it in a folder named animate-it-motion as SKILL.md, zip the folder, and upload it under Settings, Capabilities, Skills.

Reference

The format at a glance

Each keyframe has a time in seconds, a value, and the cubic-bezier of the move to the next one. The full guide is in skill.md.

opacity0..1

translateX, translateYpx, y down

scaleX, scaleY× around the center

rotatedeg, clockwise

blurpx

shadowX/Y/Blur/Spread, shadowAlphapx, 0..1 · additive

strokeWidth, cornerRadiuspx · additive

trimStart, trimEnd0..1 along a path

fillColor, strokeColor#rrggbb