scrolling title

by murgiaMarco

HTML

<div class="container">
  <div class="scrollingText">
   
      <span>ACCOUNT LOREM IPSUM 123 123 ACCOUNT LOREM IPSUM 123 123 ACCOUNT LOREM IPSUM 123 123 LOREM IPSUM 123 123</span>
    
  </div>
</div>

CSS

.container {
  overflow: hidden;
  width: 300px;
  padding: 20px;
  position: fixed;
  top: 50px;
  background: grey;
}

.scrollingText {
  height: 36px;
  white-space: nowrap;
  color: #ffffff;
  font-size: 36px; 
}

.scrollingText > * {
  display: inline-block;
  animation: news 5s infinite linear;
}

@keyframes news {
  0% {transform: translateX(0);}
  100% {transform: translateX(-1200px);}
}