CSS анимация скольжения текста не работала

Question

Intros - это div, в котором есть теги <h1> и <p>. Я хочу, чтобы текст скользил с правой стороны, но он не работает.

 .intros {
   color: rgb(49, 49, 49);
   font-family: Raleway;
   animation: heading;
   animation-duration: 2s;
   animation-fill-mode: forwards;
 }  

@keyframes heading {
 0% {right: -700px}
 100% {right: 51%} 
}

Answer 1

См. Изменения в исходном коде.

.intros {
  color: rgb(49, 49, 49);
  font-family: Raleway;
  animation: heading;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  position: relative; /* Added */
}

@keyframes heading {
  0% {
    right: -700px
  }
  100% {
    right: 0; /* Changed */
  }
}

<div class="intros">
  <h1>Text</h1>
  <p>Text</p>
</div>