title: How to animate background-image in framer-motion?
body: <p>I'm trying to learn framer-motion together with reactjs + styled components. I wonder how to add smooth animation/transition on the background-image of a div.</p>
  <p>Here's the variants that I have tried:</p>
  <pre><code>const parentVariants = {
      car: {
          backgroundImage:  `url(${CarImage})`,
          transition: {duration: 0.5}
      },
      house: {
          backgroundImage:  `url(${HouseImage})`,
          transition: {duration: 0.5} 
      },
      mountain: {
          backgroundImage:  `url(${MountainImage})`,
          transition: {duration: 0.5}
      }
  }
  
  const Test = () =&gt; {
      const [background, setBackground] = useState('car')
      const changeBackground = (image) =&gt; setBackground(image)
  
      return (
          &lt;Parent
              variants={parentVariants}
              initial='car'
              animate={`${background}`}
          &gt;
              &lt;Car onMouseEnter={() =&gt; changeBackground('car')}&gt;Car&lt;/Car&gt;
              &lt;House onMouseEnter={() =&gt; changeBackground('house')}&gt;House&lt;/House&gt;
              &lt;Mountain onMouseEnter={() =&gt; changeBackground('mountain')}&gt;Mountain&lt;/Mountain&gt;
          &lt;/Parent&gt;
      )
  }
  
  </code></pre>
  <p>But apparently, no smooth transition occurred. The background-image just immediately changed.</p>