【CSS】右から左へとテキストが流れていくニュースティッカー

2022.9.7

【CSS】右から左へとテキストが流れていくニュースティッカー

今回は新着情報などに使える、右から左へとテキストが流れていくニュースティッカーの実装方法をご紹介します。

テキストが流れていくお知らせの実装

HTML
<div class="infomation">
  <div class="infoText">
    <p><a href="#">2022.09.07 大型の台風11号が日本に接近中！！</a></p>
    
     <p><a href="#">2022.09.08 台風11号は熱帯低気圧になりました。</a></p>   
  </div>
</div>

CSS
.infomation {
  background: #ffe9df;
  padding:15px 0;
  margin:0;
  overflow: hidden;
}

.infoText {
  color: #fff;
  padding-left: 100%;
  white-space: nowrap;
  display: inline-block;
  animation: infoAnimation 15s linear infinite;
}

.infoText p {
  display:inline-block;
  margin:0 1rem 0 0;
}


/* 横に流れていくアニメーション */
@keyframes infoAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}