CSS animation to Figma Motion: move real timing into your design file

A CSS animation is a precise description of motion. Most designers never get to use it that way. They get a screen recording or a link, and they rebuild the movement by eye.

This guide covers CSS animation to Figma Motion: why by-eye rebuilds drift, what a CSS animation really contains, how to convert it by hand, and how to bring in the real timing with Capture Motion instead.

Why designers re-animate CSS by eye

The animation already exists in code. The design file is where decisions get made, so the motion has to live there too. But the CSS sits in a repo or a live site, and Figma cannot read it.

So the usual path is to watch the animation, guess the numbers, and build something that looks close. It is quick to start and slow to finish.

The trouble is drift. A design file that approximates the motion gives developers a target that is slightly wrong. Developers then match the target, or ignore it and ship the original.

• Duration is easy to misjudge. A few frames either way changes how a button or card feels.
• Easing is hard to read from video. Two curves can look alike in a recording and feel different in the product.
• Small tracks get missed. A card entrance may move, fade and scale, each with its own delay.
• Reviews go in circles. If the design and the build disagree, nobody knows which one is the source of truth.

The fix is to start from the real numbers. The rest of this guide shows two ways to get them.

What a CSS animation actually contains

Before you move one into Figma, it helps to know the parts. Every CSS animation or transition is built from the same handful of pieces.

• Properties. What changes: opacity, transform, color, box-shadow, and so on. Each animated property is its own track.
• Keyframes. The values at points along the way. A transition has two, a start and an end. An @keyframes rule can have many.
• Duration. How long one run takes.
• Delay. How long to wait before it starts. Staggered lists often use a different delay on each item.
• Easing. The curve that shapes progress over time, such as ease-out or a custom cubic-bezier().
• Trigger. What starts it: page load, hover, click, or scroll into view. This part is often missing from a handoff.

A Figma Motion timeline holds the same kind of data: layer properties, keyframes, durations and easing. That shared shape is what makes the conversion possible.

For a closer look at the curves, see our guide to CSS easing functions.

CSS animation to Figma Motion: the manual route

You can do this without any tool. It takes patience, and it works best for one small animation.

1. Read the CSS in DevTools

Open Chrome DevTools and inspect the animated element. In the Styles panel, look for transition and animation declarations. Then find the matching @keyframes rule further down the stylesheet.

Write down every animated property, the duration, the delay, the easing and the trigger. Check parent and child elements too, since motion is often split across several of them.

Here is a typical rule. The values are an example, not taken from a real site.

.card {
  animation: card-in 520ms cubic-bezier(.22, 1, .36, 1) 80ms both;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

From this you can read two tracks, opacity and translateY, a 520 ms duration, an 80 ms delay and one custom easing curve.

2. Convert the easing

CSS describes easing as a cubic-bezier() with four numbers, or as a keyword like ease-in-out. In Figma Motion you set easing on each keyframe or track.

Use the closest match the timeline offers. If your version lets you enter or edit a curve, enter the same four numbers. Check what your version supports, since the interface is still developing.

Keep one rule: the same curve on every track that moves together, so the parts still feel like one motion.

3. Rebuild the keyframes

Create the layer in Figma, add the animation to the timeline, and set each keyframe by hand. Match the start value, the end value, the duration and the delay for every track.

Watch for two common slips. CSS delays are in milliseconds or seconds, so check the unit. And both or forwards fill modes decide what the element looks like before and after the run.

Then play it next to the live page and compare. This works, and for a single fade it is fine. For a card with six tracks and a stagger, it is slow, and it leaves room for small mistakes.

The Capture Motion route

Capture Motion is a Chrome extension plus a Figma plugin. Instead of reading the CSS and rebuilding it, you record the animation as it plays and carry it across.

That matters for CSS because the stylesheet is only part of the story. What ran in the browser is the truth, and the capture shows every track with its true timing, easing and keyframes.

1. Open the page in Chrome and find the animation you want to move.
2. Open the extension. Click the Capture Motion extension icon in the toolbar.
3. Click "Pick element on page". Then click the element you want to capture. If several children animate together, pick the container.
4. Trigger the animation. It records while the animation plays, whether that is a hover, a click, a scroll or a page load.
5. Review the tracks. Every track is listed with its true timing, easing and keyframes. A live preview lets you replay it. This step needs no account.
6. Copy the capture as JSON for Figma. Sign in with a free account (Google or email) to copy or download.
7. Paste it into the plugin. Open the Capture Motion plugin in Figma and paste. It turns the capture into a Figma Motion timeline with every keyframe editable.

The same capture can go other places too. You can copy it as an LLM prompt for ChatGPT or Claude, as HTML and CSS you can open as a working page, or as a React component. One capture serves design and code.

If you want a deeper walk through the Figma side, read how to import a website animation into Figma.

What to check after import

A capture gets you most of the way. A short review catches what is left.

• Replay it beside the original. Use the live preview in the extension and play the Figma timeline next to it. Look at feel, not only numbers.
• Count the tracks. Make sure each property you noted in DevTools is on the timeline.
• Check delays and staggers. If the source staggers a list, confirm each item starts when it should.
• Check easing on each track. Parts of one motion should usually share a curve.
• Swap in your own layers. Keep layer names and structure so the tracks still line up.
• Write the trigger down. Note whether it runs on load, hover, click or scroll, so developers do not have to guess.
• Plan for reduced motion. Decide what the animation becomes for people who ask for less movement.

When the manual route is still the right call

A capture is not always the answer. The manual route wins in a few cases.

• The animation is yours and still in design. If there is no page to record yet, you are designing the motion, not copying it.
• It is one simple transition. A single opacity fade with a known duration takes a minute to build by hand.
• You want to learn the pieces. Reading @keyframes and rebuilding it once teaches you how timing and easing fit together.
• You are changing the motion on purpose. If the goal is a new feel, copying the old numbers helps less than experimenting.

For everything with several tracks, a stagger, or a trigger you cannot easily reproduce, recording the real thing saves time and removes the guesswork.

Where to go next

If you do not have an animation to capture yet, browse the gallery. It has ready made components you can send to Figma and edit on the timeline.

If you are also building the animation in code, see CSS keyframes to Framer Motion for the same idea on the React side.