Motion & color keywords don’t mix.

#motion #animation #react #javascript

At least as it stands now.

Kind of makes sense, but if you stumble for a bit, maybe this helps you save 10–15 minutes of your time.

❌ Don’t

<motion.div
  initial={{ backgroundColor: "white" }}
  animate={{ backgroundColor: "black" }}
  transition={{ duration: 3, repeat: Infinity, repeatType: "reverse" }}
  style={{ width: "10em", height: "10em" }}
/>

✅ Do

<motion.div
  initial={{ backgroundColor: "#FFFFFF" }}
  animate={{ backgroundColor: "#000000" }}
  transition={{ duration: 3, repeat: Infinity, repeatType: "reverse" }}
  style={{ width: "10em", height: "10em" }}
/>