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.

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