Framer 运动 - 如何进行简单的 CSS 颜色过渡

Question

我想做这种颜色过渡效果，但是以成帧运动的方式

css 示例 https://codepen.io/impressivewebs/pen/zqpEg

这是我尝试过的，但没有成功

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

我的尝试

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

谢谢

Answer 1

根据文档，如果您使用变体，则可以像这样使用 backgroundColor 属性。希望这对您有所帮助；）

这是工作的代码笔： 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"
      }
    }
  };