CSS垂直滚动文本适配2条内容：消除空白及实现无限循环技术问询

Hey there, let's sort out this vertical scrolling text problem for your 2-item list! The issue right now is that your CSS animation is still set up for 4 items—so when you only have 2, it's trying to scroll to positions that don't exist, causing those blank gaps and that jarring jump back to the top. Here's how to fix it for a smooth, infinite alternating scroll:

Step 1: Adjust the HTML (for seamless looping) #

First, let's duplicate your 2 list items. This trick makes the scroll feel continuous—when we reach the end of the list, the duplicated items match the start, so users won't notice the reset:

<div id="tickr-box">
  <div id="tickr-scroll">
    <ul>
      <li>text 1</li>
      <li>text 2</li>
      <li>text 1</li> <!-- Duplicate first item -->
      <li>text 2</li> <!-- Duplicate second item -->
    </ul>
  </div>
</div>

Step 2: Update the CSS Animation #

Now we'll rewrite the animation keyframes to fit 2 items, and tweak the timing for a smooth loop:

#tickr-box { 
  background: #D3D3D3; 
  max-width: 550px; 
  padding: 3px; 
  margin: 0 auto; 
  border-radius: 4px; 
}
.tickr-title { 
  color: #FFFFFF; 
  font: bold 18px arial, sans-serif; 
  background: #2A75C1; 
  padding: 5px; 
  border-radius: 4px; 
}
#tickr-scroll ul { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
}
#tickr-scroll { 
  background: #4E91D5; 
  height: 27px; 
  margin: 3px auto 0; 
  overflow: hidden; 
  padding: 0; 
  border-radius: 4px; 
}
#tickr-scroll li { 
  color: #FFFFFF; 
  font: normal 18px arial, sans-serif; 
  line-height: 26px; 
}
#tickr-scroll a { 
  color: #FFFFFF; 
  text-decoration: none; 
}
#tickr-scroll a:hover { 
  color: #CCFF99; 
  text-decoration: none; 
}
#tickr-scroll ul { 
  padding: 0 6px; 
  /* Use linear timing for consistent scroll speed, adjust duration as needed */
  animation: tickr 6s linear infinite; 
}
#tickr-scroll ul:hover { 
  animation-play-state: paused; 
}

/* Updated keyframes for 2-item loop */
@keyframes tickr { 
  0% { margin-top: 0; } 
  95% { margin-top: -52px; } /* Scroll down 2 full items (26px * 2) */
  100% { margin-top: 0; } /* Reset instantly (duplicated items hide the jump) */
}

/* Keep vendor prefixes for broader browser support */
@-webkit-keyframes tickr { 
  0% { margin-top: 0; } 
  95% { margin-top: -52px; } 
  100% { margin-top: 0; } 
}
@-moz-keyframes tickr { 
  0% { margin-top: 0; } 
  95% { margin-top: -52px; } 
  100% { margin-top: 0; } 
}
@-ms-keyframes tickr { 
  0% { margin-top: 0; } 
  95% { margin-top: -52px; } 
  100% { margin-top: 0; } 
}

What's changed? #

• Duplicated list items: This eliminates the jarring jump back to the top—when the animation resets, the duplicated items match the original start, so the scroll feels infinite.
• Adjusted keyframes: We now scroll the full height of 2 items (52px) instead of 4, so no more blank gaps.
• Linear timing: Replaced the old cubic-bezier curve with linear for a smooth, consistent scroll speed.

If you prefer to keep only 2 list items (no duplicates) and have them alternate with pauses, use this keyframe set instead:

@keyframes tickr { 
  0% { margin-top: 0; } 
  40% { margin-top: 0; } /* Pause on text 1 */
  50% { margin-top: -26px; } /* Scroll to text 2 */
  90% { margin-top: -26px; } /* Pause on text 2 */
  100% { margin-top: 0; } /* Scroll back to text 1 */
}

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