如何实现CSS Marquee的周期性变速与平滑暂停循环效果

Got it, let's solve this marquee speed cycle problem! The core challenge is to create a seamless loop where the marquee slows, speeds up, pauses, and repeats—without any jarring jumps between phases. We can achieve this by calculating exact position keyframes that align with each speed phase, ensuring transitions are smooth.

Full Working Code #

Here's the updated CSS and your existing HTML, modified to fit the speed cycle requirements:

.marquee { 
  width: 100%; 
  margin: 0 auto; 
  overflow: hidden; 
  white-space: nowrap; 
  box-sizing: border-box; 
  /* Total cycle duration: 3s (slow) + 5s (fast) + 2s (pause) = 10s */
  animation: marquee-cycle 10s linear infinite; 
  background: red; 
  color: white; 
} 

@keyframes marquee-cycle {
  /* Phase 1: 0s - 3s (30% of total cycle) — slow speed (120s full duration) */
  0%, 30% { 
    animation-timing-function: linear;
  }
  0% {
    text-indent: -150em;
  }
  30% {
    /* Calculate how far we move in 3s at 120s full speed: 3/120 = 2.5% of total distance */
    text-indent: calc(-150em + (150em * 3/120));
  }

  /* Phase 2: 3s - 8s (50% of total cycle) — fast speed (20s full duration) */
  30%, 80% { 
    animation-timing-function: linear;
  }
  80% {
    /* Calculate total distance moved: 2.5% (slow phase) + (5/20 = 25%) (fast phase) = 27.5% */
    text-indent: calc(-150em + (150em * (3/120 + 5/20)));
  }

  /* Phase 3: 8s - 10s (20% of total cycle) — pause (no movement) */
  80%, 100% { 
    animation-timing-function: linear;
  }
  100% {
    /* Keep position identical to 80% to pause movement */
    text-indent: calc(-150em + (150em * (3/120 + 5/20)));
  }
}

<p class="marquee">creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits<span style="white-space: pre-wrap;"></span></p>

Key Explanations #

Let’s break down how this works:

1. Total Cycle Duration: We set the animation to 10s total (3+5+2) so each phase aligns perfectly with your timing requirements.
2. Position Calculations:
   • The original marquee takes 120s to move from -150em to 0em. We calculate how much distance it covers in each phase to ensure smooth transitions:
     • Slow phase (3s): Moves 3/120 = 2.5% of the total 150em distance.
     • Fast phase (5s): At 20s full speed, 5s covers 5/20 = 25% of the total distance.
     • Pause phase (2s): No movement, so we hold the position from the end of the fast phase.
3. Seamless Transitions: By matching the text-indent value at the start/end of each phase, we eliminate any jumps. The linear timing function ensures consistent speed within each phase.

This setup will repeat the cycle indefinitely, with smooth shifts between slow, fast, and paused states—exactly what you need!

内容的提问来源于stack exchange，提问作者Lubo Masura