反应成帧器运动延迟故障

Question

这是我使用 Framer-motion 的网站。 https://farhadf.com/

如果您在 chrome 的三个选项卡上打开它并刷新并检查 header par，您会看到文本动画开始重叠。

  <div className={styles.container}>
          <div className={styles.h2}>
            <motion.h2
              animate={{
                y: [-100, 0, 0, 100],
              }}
              transition={{
                duration: 2.5,
                repeatType: "loop",
                repeat: Infinity,
                repeatDelay: 5,
              }}
            >
              I develope <span style={{ color: color }}>websites</span>
            </motion.h2>
          </div>
          <div className={styles.h2}>
            <motion.h2
              animate={{
                y: [-100, 0, 0, 100],
              }}
              transition={{
                duration: 2.5,
                repeatType: "loop",
                repeat: Infinity,
                repeatDelay: 5,
                delay: 2.5,
              }}
            >
              I produce <span style={{ color: color }}>music</span>
            </motion.h2>
          </div>
          <div className={styles.h2}>
            <motion.h2
              animate={{
                y: [-100, 0, 0, 100],
              }}
              transition={{
                duration: 2.5,
                repeatType: "loop",
                repeat: Infinity,
                repeatDelay: 5,
                delay: 5,
              }}
            >
              I develope <span style={{ color: color }}>games</span>
            </motion.h2>
          </div>
          <h1>
            Hello, I’m <strong style={{ color: color }}>Farhad Faraji</strong>,
            Web Developer, Game Designer,
            <br />
            Music Producer & Audio Engineer.
          </h1>
        </div>

我将不胜感激任何帮助