I am working on a vertical news ticker using only CSS.

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.news-ticker {
  margin: 0 auto;
  border-radius: 4px;
  padding: 15px;
  background: #CFE2FF;
}

.news-wrapper {
  overflow: hidden;
  padding-left: 30px;
  background: transparent url('.png') no-repeat left center;
}

.news-ticker ul {
  display: flex;
  flex-direction: column;
  height: 25px;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;

}

.news-ticker li {
  color: #0043a7;
  white-space: nowrap;
  flex: 1;
  width: 100%;
}

<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid mt-3">
  <div class="news-ticker">
    <div class="news-wrapper">
      <ul class="list-unstyled m-0">
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
        <li>Molestias beatae recusandae ipsam animi non numquam itaque veritatis quaerat totam eligendi.</li>
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit aperiam, distinctio.</li>
      </ul>
    </div>
  </div>
</div>

I am working on a vertical news ticker using only CSS.

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.news-ticker {
  margin: 0 auto;
  border-radius: 4px;
  padding: 15px;
  background: #CFE2FF;
}

.news-wrapper {
  overflow: hidden;
  padding-left: 30px;
  background: transparent url('https://i.sstatic/LhFKIAAd.png') no-repeat left center;
}

.news-ticker ul {
  display: flex;
  flex-direction: column;
  height: 25px;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;

}

.news-ticker li {
  color: #0043a7;
  white-space: nowrap;
  flex: 1;
  width: 100%;
}

<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid mt-3">
  <div class="news-ticker">
    <div class="news-wrapper">
      <ul class="list-unstyled m-0">
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
        <li>Molestias beatae recusandae ipsam animi non numquam itaque veritatis quaerat totam eligendi.</li>
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit aperiam, distinctio.</li>
      </ul>
    </div>
  </div>
</div>

The problem with the above code is that the news items appear into view into a with no interval (delay) between them.

How could I add a delay (in seconds)?

• html
• css

• What happens if you declare your key frames with 66%, 100% {, so that the last third is all in the final state? – scrhartley Commented Mar 31 at 15:20

2 Answers 2

Instead of having one continuous animation, you can add a pause between each item.

Use the animation-timing-function: steps(...) to make the transition instantaneous.

Adjust the animation-duration to include both the transition and the delay.

@keyframes ticker {
 0% {
     transform: translate3d(0, 0, 0);
     visibility: visible;
 }
 25%, 100% {
     transform: translate3d(0, -100%, 0);
 }
}

.news-ticker ul {
 display: flex;
 flex-direction: column;
 height: 25px;
 animation-iteration-count: infinite;
 animation-timing-function: steps(1, end); /* Instant switch between items */
 animation-name: ticker;
 animation-duration: 3s; /* Adjusted duration for delay */
}

Steps Timing Function: Makes the animation switch instantly between items.

Duration: Adjust the duration to accommodate both transition and delay.

Keyframes: The pause happens between 0% and 25% of the animation

To achieve that effect, you can use CSS animations with keyframes that include a pause at each step.

@keyframes ticker {
  0% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(0, -100%, 0);
  }
  50% {
    transform: translate3d(0, -100%, 0); /* Pause */
  }
  75% {
    transform: translate3d(0, -200%, 0);
  }
  100% {
    transform: translate3d(0, -200%, 0); /* Pause */
  }
}

.news-ticker ul {
  display: flex;
  flex-direction: column;
  height: 25px;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: ticker;
  animation-duration: 6s; /* Adjusted for smoothness and delay */
}

This way, the items will smoothly scroll upward, pause for a moment at each step, and then continue.