Framer motion - How to do a simple css color transition

Question

I want to do this color transition effect but in framer motion way

css example https://codepen.io/impressivewebs/pen/zqpEg

This is what I attempted, but didn't work

     transition:{
    delay:2,
    backgroundColor: "1.5s ease"
  }

my attempt

https://codesandbox.io/s/variants-framer-motion-forked-m3qui

Thank you

Answer 1

according to documentation, the backgroundColor property can be used like this if you are using variants. hope this helps you out ;)

Here is the working codepen: https://codesandbox.io/s/variants-framer-motion-forked-9y3lo?file=/src/App.js

  const variants = {
    hidden: {
      height: 100,
      width: 100
    },
    visible: {
      backgroundColor: ["#60F", "#09F", "#FA0"],
      transition: {
        delay: 1,
        duration: 2,
        ease: [0.075, 0.82, 0.165, 1],
        repeat: Infinity,
        repeatType: "reverse"
      }
    }
  };