Slide text up 1 by 1

"How can i slide up a text 1 by 1, delay 5 seconds to bring another text Hello World .multi-text-slider { overflow: hidden; height: 40px; } .slide-up-text { animation: slide-up 3s infinite; animation-delay: calc(var(-index) * 0.5s); }"

"@keyframes slide-up { 0% { transform: translateY(0%); } 25% { transform: translateY(-100%); } 50% { transform: translateY(-200%); } 75% { transform: translateY(-300%); } 100% { transform: translate..."

Place all text items stacked vertically inside a fixed-height container with overflow hidden so only one item is visible at a time. Animate the vertical position using transform: translateY(...) in keyframes or adjust translateY via JavaScript to move the stack up by one item height. Compute animation-duration or use setInterval so each item remains visible for five seconds before shifting to the next. Apply per-item animation-delay via CSS variables or nth-child to stagger starts, or use a single cyclic animation with steps(numberOfItems) for discrete jumps. Ensure heights match and use will-change: transform for smoother performance.

Read at SitePoint Forums | Web Development & Design Community