Как сделать такую анимацию текста на css?

Question

[Арсений Соколовский]

Как сделать такую анимацию текста на css? Я был давно нашел как ее делать, но мне тогда не нужна была эта анимация, и вот сейчас когда она мне нужна, ее нигде нету..

Answer 1

[Sergey]

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);    
  }
}

Comments

[Арсений Соколовский]

Спасибо большое