Pure CSS News Ticker

_news-ticker.scss

.news-ticker {
  align-items: center;
  background-color: #fafafa;
  border-left: 16px solid #7f7f7f;
  box-sizing: border-box;
  display: flex;
  font-size: 1rem;
  margin: auto;
  max-width: 960px;
  padding: 1.5em;
}

.news-ticker__headline {
  font-size: 1em;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;
  margin: 0;
}

.news-ticker__list {
  flex: 1;
  height: 2em;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;

  .news-ticker__headline + & {
    margin-left: 1.5em;
  }
}

.news-ticker__item {
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  height: 2em;
  line-height: 2;
  position: relative;

  @for $i from 2 through 5 {
    &:first-child:nth-last-child(#{$i}) {
      &,
      & ~ .news-ticker__item {
        animation-duration: #{8s * $i};
        animation-name: news-ticker-index-#{$i};
      }
    }
  }
}

.news-ticker__link {
  align-items: center;
  color: inherit;
  display: flex;
  height: 100%;
  position: relative;
  text-decoration: none;
  transition: color .3s;

  @mixin active {
    color: #c25d5d;
  }

  &:focus {
    @include active;
  }

  @media (hover) {
    &:hover {
      @include active;
    }
  }
}

.news-ticker__date {
  display: block;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  order: -1;

  .news-ticker__title + & {
    margin-right: 1em;
  }
}

.news-ticker__title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes news-ticker-index-2 {
  0% { transform: translateY(2em); visibility: visible; }

  5% { transform: translateY(0); }

  55% { transform: translateY(0); }

  60% { transform: translateY(-2em); }

  90% { transform: translateY(-2em); }

  95% { transform: translateY(-4em); }

  99% { transform: translateY(-4em); visibility: hidden; }

  100% { transform: translateY(-6em); visibility: hidden; }
}

@keyframes news-ticker-index-3 {
  0% { transform: translateY(2em); visibility: visible; }

  5% { transform: translateY(0); }

  30% { transform: translateY(0); }

  35% { transform: translateY(-2em); }

  60% { transform: translateY(-2em); }

  65% { transform: translateY(-2em); }

  90% { transform: translateY(-4em); }

  95% { transform: translateY(-4em); }

  99% { transform: translateY(-6em); visibility: hidden; }

  100% { transform: translateY(-6em); visibility: hidden; }
}

@keyframes news-ticker-index-4 {
  0% { transform: translateY(2em); visibility: visible; }

  5% { transform: translateY(0); }

  15% { transform: translateY(0); }

  20% { transform: translateY(-2em); }

  40% { transform: translateY(-2em); }

  45% { transform: translateY(-4em); }

  65% { transform: translateY(-4em); }

  70% { transform: translateY(-6em); }

  90% { transform: translateY(-6em); }

  95% { transform: translateY(-8em); }

  99% { transform: translateY(-8em); visibility: hidden; }

  100% { transform: translateY(2em); visibility: hidden; }
}

@keyframes news-ticker-index-5 {
  0% { transform: translateY(2em); visibility: visible; }

  5% { transform: translateY(0); }

  15% { transform: translateY(0); }

  20% { transform: translateY(-2em); }

  35% { transform: translateY(-2em); }

  40% { transform: translateY(-4em); }

  55% { transform: translateY(-4em); }

  60% { transform: translateY(-6em); }

  75% { transform: translateY(-6em); }

  80% { transform: translateY(-8em); }

  95% { transform: translateY(-8em); }

  99% { transform: translateY(-10em); visibility: hidden; }

  100% { transform: translateY(2em); visibility: hidden; }
}

news-ticker.html

<section class="news-ticker">
  <h1 class="news-ticker__headline">新着情報</h1>
  <ul class="news-ticker__list">
    <li class="news-ticker__item">
      <a href="#" class="news-ticker__link">
        <p class="news-ticker__title"></p>
        <time class="news-ticker__date" datetime="2021-01-05">2021.01.05</time>
      </a>
    </li>
    <li class="news-ticker__item">
      <a href="#" class="news-ticker__link">
        <p class="news-ticker__title"></p>
        <time class="news-ticker__date" datetime="2021-01-04">2021.01.04</time>
      </a>
    </li>
    <li class="news-ticker__item">
      <a href="#" class="news-ticker__link">
        <p class="news-ticker__title"></p>
        <time class="news-ticker__date" datetime="2021-01-03">2021.01.03</time>
      </a>
    </li>
    <li class="news-ticker__item">
      <a href="#" class="news-ticker__link">
        <p class="news-ticker__title"></p>
        <time class="news-ticker__date" datetime="2021-01-0２">2021.01.02</time>
      </a>
    </li>
    <li class="news-ticker__item">
      <a href="#" class="news-ticker__link">
        <p class="news-ticker__title"></p>
        <time class="news-ticker__date" datetime="2021-01-01">2021.01.01</time>
      </a>
    </li>
  </ul>
</section>