# Framer Motion vs CSS Animation: When to Use Which (2026)

> CSS is a complete animation system for interface states: transitions for hover, focus and press, keyframes for loops, @starting-style for entry, and scroll-driven timelines in current browsers. Motion, formerly Framer Motion, adds what CSS cannot express: springs that keep velocity when a gesture is interrupted, drag and pointer gestures, layout and exit animations for React components, and orchestration across many elements. Start with CSS and add Motion only for the components that need physics or coordination. A single hover does not justify the download.

Updated November 2026. Source: https://www.exodeui.com/compare/framer-motion-vs-css/

## Frequently asked questions

### Can CSS do everything Framer Motion can?

No. CSS handles states and loops well, and current browsers add scroll timelines and view transitions. It cannot carry velocity through an interruption, track a drag gesture, or animate a component out of the DOM without a delayed unmount. Those are the jobs Motion exists for.

### Is Framer Motion worth the bundle size?

Only if you use the parts CSS lacks. Our September 2026 test measured 80 KB gzip for Motion in a minimal app, and LazyMotion can reduce what loads first. A project that only animates hover and press should stay on CSS.

### How do I animate an element that is being removed with CSS?

Keep it mounted until the animation finishes. That means delaying the unmount in JavaScript, which is most of what AnimatePresence does for you. CSS alone has no exit hook for a node that is already gone.

### Do CSS view transitions replace Framer Motion?

No. The View Transitions API handles page-level and shared-element transitions, and it is supported in current Chrome, Firefox and Safari (Chrome 111+, Firefox 144+, Safari 18+). It is not a gesture or physics engine, and it does not animate a component that stays on screen and reacts to state.

### Can CSS make a spring?

It can approximate one. The linear() easing function (Chrome 113+, Firefox 112+, Safari 17.2+) takes a list of points, so you can trace a spring curve. It is a fixed curve: it cannot read velocity, so it cannot react to an interruption the way a real spring does.

### What about scroll animations in CSS?

Scroll-driven animations (animation-timeline) are supported in current Chrome, Firefox and Safari (Chrome 115+, Firefox 159+, Safari 26+) and cover simple progress and reveal effects. Motion is easier when the scroll value feeds React state or several properties at once.

### Which should I start with?

CSS, then add Motion to the components that need springs, gestures, layout or exit animation. That order keeps the bundle small and makes the cases where a library earns its place obvious.

## Related

- [Framer Motion vs GSAP](https://www.exodeui.com/compare/framer-motion-vs-gsap)
- [How to animate a button in React](https://www.exodeui.com/learn/how-to-animate-a-button-in-react)
- [Interruptible animation in React](https://www.exodeui.com/learn/interruptible-animation-react)
- [View Transitions API](https://www.exodeui.com/learn/view-transitions-api)
- [Animation and Core Web Vitals](https://www.exodeui.com/learn/animation-core-web-vitals)
- [Accessible motion and reduced motion](https://www.exodeui.com/learn/accessible-motion-reduced-motion)