Framer Motion duration属性无法控制动画时长问题求助

问题出在Framer Motion的duration单位是秒，而非毫秒。你设置的100000相当于100000秒（约27小时），动画会极其缓慢，看起来像是瞬间完成，导致你误以为时长设置不生效。

修正步骤： #

• 把duration值改成以秒为单位的数字，比如设置2表示动画持续2秒：

planBoxControls.start({
  opacity: 1,
  scale: 1,
  transition: {
    delay: 0,
    duration: 2, // 动画持续2秒
    opacity: { ease: 'linear' },
    scale: { ease: 'backOut' },
  },
});

• 如果需要让淡入和缩放动画使用不同时长，可以在单个属性的过渡配置中单独指定：

planBoxControls.start({
  opacity: 1,
  scale: 1,
  transition: {
    delay: 0,
    opacity: { ease: 'linear', duration: 3 }, // 淡入3秒完成
    scale: { ease: 'backOut', duration: 2 }, // 缩放2秒完成
  },
});

验证方法： #

先设置一个极小的duration值（比如0.5，即0.5秒），观察动画速度是否明显变快，以此确认设置是否生效。

如果还是存在问题，检查项目中是否有全局的Framer Motion过渡配置（比如通过motion.config设置了默认duration），这种情况下需要在当前动画中显式覆盖全局配置。

内容的提问来源于stack exchange，提问作者Yaniv Sagy