Анимация вызывает полосу прокрутки на маленьких экранах

Question

Эта анимация хорошо работает на больших экранах, но при ее перемещении с правой стороны появляется полоса прокрутки. Полоса прокрутки исчезает после завершения анимации. Есть ли способ предотвратить появление полосы прокрутки?

.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: 0} 
 } 

Answer 1

Настройка overflow: hidden в теле или в классе .intro может быть решением, потому что свойство overflow CSS сообщает элементу, что делать, когда содержимое становится слишком большим. В зависимости от того, где отображается полоса прокрутки, вы можете использовать overflow-x или overflow-y. X и y представляют ось y (вертикальная) и ось x (горизонтальная).

Также, если вы делаете анимацию, вы должны использовать translate, в вашем случае translate:-700px