Framer Motion vs CSS Animations: Which Should AI Use for Your App?

When you ask Cursor or Claude to "add animations," the AI has to make a choice: Framer Motion or CSS. Most of the time, it defaults to CSS transitions because they're simpler. But simpler isn't always better.

Here's when each approach wins — and why it matters for AI-generated code.

CSS Animations: The default

CSS transitions and keyframes are built into the browser. No dependencies, no JavaScript overhead.

Best for:

Example — CSS hover:

.card {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

Clean, fast, zero JavaScript. If this is all you need, CSS wins.

Framer Motion: The power tool

Framer Motion is a React animation library that handles what CSS can't.

Best for:

Example — spring hover with stagger:

<motion.div
  whileHover={{ scale: 1.02, y: -2 }}
  transition={{ type: "spring", damping: 20, stiffness: 300 }}
>
  {items.map((item, i) => (
    <motion.div
      key={item.id}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: i * 0.05 }}
    />
  ))}
</motion.div>

This creates motion that *feels* physical — it overshoots slightly, settles naturally. CSS can't do spring physics.

What AI tools get wrong

When you prompt an AI without constraints, it tends to:

This is why motion prompts exist. They tell the AI: "Use Framer Motion for interactions. Use these specific spring values. Stagger children by 50ms. Wrap route changes in AnimatePresence. Check prefers-reduced-motion."

The practical answer

Use CSS when:

Use Framer Motion when:

For most vibe-coded React apps: Framer Motion is the better default. The natural feel of spring physics is worth the 30KB, and AI tools generate better Framer Motion code when given proper constraints.

How motion prompts handle this

UI Motion Prompts are built around Framer Motion because it gives AI tools the most control. Each prompt specifies:

The AI doesn't have to choose — the prompt makes the decision based on what produces the best result.

Motion is only half the problem

Of course, smooth motion is only one piece of why so many AI-generated apps look generic. The bigger problem is the design system underneath — the colors, typography, spacing, and component shapes that Lovable, Cursor, Claude, and Bolt repeat across every project. If your site has the same gradient hero, the same pill buttons, and the same boxy card grid as every other vibe-coded landing page, no amount of animation will fix that. Our recommended design system pack is the Rottoways design system pack — you paste it into your AI tool and it replaces the default "AI slop" aesthetic with a coherent, professional visual language while keeping your copy untouched. Pair it with motion prompts and you fix both layers at once.

Get motion prompts for star ratings, page transitions, scroll reveals, and more at uimotionprompts.com.