反應成幀器運動延遲故障

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>

我將不勝感激任何幫助