How to copy an animation from any website

You see a card that lifts just right, a menu that unfolds with a nice overshoot, or a hero line that staggers in. You want the same feel in your own product. The question is how to get the real numbers out of the page instead of guessing them from a screen recording.

There are two ways to do it. The manual way uses Chrome DevTools and works well for simple CSS. The fast way uses the Capture Motion extension, which records every animated property while the animation plays. This guide covers both, and where each one stops working.

What you are actually copying

An animation is a small set of data. To rebuild one, you need:

• The properties that change, such as transform, opacity or clip-path.
• The keyframes: the value of each property at each point in time.
• Duration and delay, per property and per element. A stagger is just a list of delays.
• The easing curve, which decides most of how the motion feels.
• The trigger: page load, scroll, hover, click.

The HTML and the images are the least useful part. Copying the markup of a page rarely gives you the motion, because the motion often lives in a stylesheet rule you cannot see until a class is added, or in JavaScript.

The manual way: Chrome DevTools

For animations built with CSS keyframes or transitions, DevTools has everything you need. It just takes a few panels and some patience.

1. Open DevTools on the element. Right-click the animated element and choose Inspect. The Elements panel opens with the node selected.
2. Open the Animations panel. Click the three-dot menu (Customize and control DevTools), then More tools > Animations. You can also press Cmd+Shift+P (Ctrl+Shift+P on Windows), type "Animations" and pick Show Animations.
3. Trigger the animation. The panel records animations as they start. Reload the page, scroll, or click whatever starts the motion. Each burst of animations appears as a group at the top of the panel.
4. Slow it down. Set the playback speed to 25% or 10% and replay the group. Now you can see the order things move in and how far each one travels.
5. Read the timing. Click a group. Each animated element gets a row with a bar for its delay and duration. Click the node name on a row to select it in the Elements panel.
6. Find the rules in Styles. In Elements > Styles, look for the animation or transition declaration on the node. Click the animation name to jump to its @keyframes rule, and click the small curve icon next to any easing value to open the easing editor.
7. Write it down. Copy the @keyframes block and the shorthand into your own stylesheet, then repeat for every element in the group.

For a single fade-in, this takes two minutes. You end up with something like this:

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

.card {
  animation: card-in 520ms cubic-bezier(.22, 1, .36, 1) both;
}
.card:nth-child(2) { animation-delay: 60ms; }
.card:nth-child(3) { animation-delay: 120ms; }

If you prefer the console, document.getAnimations() lists every running CSS animation, CSS transition and Web Animation on the page, with its keyframes and timing. Our guide to inspecting CSS animations in Chrome DevTools shows a snippet that prints all of it in one go.

Where the manual way breaks down

DevTools is honest about what the browser knows. The trouble is that a lot of modern motion is not something the browser sees as an animation.

Three other things make it slow even when the animation is plain CSS:

• Hover states. The moment you move the mouse to DevTools, the hover ends. You can force :hover with the :hov toggle in Styles, but that does not fire JavaScript mouseenter handlers. Our guide on capturing hover animations goes through the workarounds.
• Many tracks. A hero section can animate twenty elements with different delays. Reading each one by hand and keeping them in sync is where an afternoon goes.
• Easing that is hard to read. A linear() spring with thirty stops, or per-keyframe easing, does not fit on a sticky note. See how to find the easing curve of an animation.

The fast way: Capture Motion

Capture Motion is a Chrome extension that records an animation while it plays and turns it into data. It reads the keyframes, durations, delays and easing of every animated property, and it works with CSS transitions and keyframes, the Web Animations API, GSAP and Lottie.

1. Install the extension from the Chrome Web Store and pin it to the toolbar.
2. Open the page with the animation you want and start Capture Motion from the toolbar.
3. Pick the element. Hover the page and click the element, or its container if several children animate together.
4. Play the animation. Trigger it the way a visitor would. For hover animations, the extension sets a real :hover state through the Chrome DevTools Protocol, which is attached only during the capture.
5. Preview the result. The capture replays in the extension so you can check it matches what you saw. Capture and preview need no account.
6. Take the code. The popup shows the capture as code in CSS, React and GSAP tabs (plus Lottie when the source is Lottie). With a free account, click Copy on the tab you need, or download a self-contained HTML and CSS file.
7. Or send it on. The main Capture Motion button copies the capture as JSON; paste it into the Capture Motion Figma plugin and it is rebuilt as a Figma Motion timeline. Copy for LLM copies the same JSON with a ready-made instruction for ChatGPT or Claude.

If the next step is code, animation to code explains what each export contains. If the next step is design, see how to import a website animation into Figma.

Which way should you use?

Be honest about the size of the job.

• Use DevTools when it is one CSS animation or transition, you want to understand how it works, or you cannot install extensions on your machine.
• Use Capture Motion when the animation is driven by GSAP, Lottie or other JavaScript, when it has many elements with staggered timing, when it only runs on hover, or when you need it in Figma rather than in code.

Doing a few by hand first is worth it either way. Once you have read a dozen easing curves in the Styles pane, you start to see why some motion feels expensive and some feels cheap.

Respect the site you are copying from

Studying how a site moves is how most motion designers learn. Taking its assets is different. A few ground rules:

• Copy the motion, not the content. Timing and easing are the useful part; the illustrations, photos, icons, fonts and Lottie files belong to someone.
• Rebuild with your own assets and your own brand. A copied animation dropped onto someone else's artwork is just their page again.
• If you need a specific asset, check its licence or ask the owner.
• Do not ship another company's distinctive signature animation as your own. Use it as a reference and change it until it fits your product.

If you only need a common pattern, such as an animated avatar stack or a slide to confirm button, the Capture Motion gallery has ready animated components you can customize and export without copying anyone.