How to make text animation like this in css?

Question

css

How to make text animation like this in css? I found how to do it a long time ago, but then I didn’t need this animation, and now when I need it, it’s nowhere to be found ..

Answer 1

html

<div class="body">
  <div class="wrapper">
    <div class="background"></div>
    <div class="text">
      planedec50
    </div>
  </div>
</div>

scss

.body {
  .wrapper {
    position: relative;
    padding: .5em;
    width: 50px;
    margin: 50px auto;
    overflow: hidden;
    border-bottom: 10px solid blue
  }
  
  .background {
    position: absolute;
    left:0;
    right:0;
    bottom:0;
    top:0;
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(255,255,255,1) 100%);
    z-index: 10;
  }
  
  .text {
    animation: action 1s linear alternate infinite;
  }
}

@keyframes action {
  100% {
    transform: translateX(-30px);    
  }
}