div内容无限横向滚动

div内容无限横向滚动

<div class="modeAnimation">
  <p>滚动内容,内容过长持续滚动</p>
</div>

样式

.modeAnimation
  height: 20px;
  width: 300px;
  overflow: hidden;
  p
    display: inline-block;
    white-space: nowrap;
    animation: 10s scroll linear infinite ;
    transition: scroll 0.5s ease;
  @keyframes scroll {
    0% {
      transform: translateX(0%);
      -webkit-transform: translateX(0%);
    }
    100% {
      transform: translateX(-98%);
      -webkit-transform: translateX(-98%);
    }
  }