Почему моя css анимация go выходит за пределы моего окна, когда я перезагружаю страницу, а не при первоначальной загрузке страницы?

Question

Я новичок в использовании css анимаций, и я хотел создать простую анимацию, которая заставляет текст скользить справа налево по экрану, и это прекрасно работает ... пока я не перезагружу страницу. Когда страница перезагружается, она следует за текстом на экран, а затем, когда анимация заканчивается, страница отображается правильно. Пожалуйста, помогите!

Вот код:

.panel-content {
  position: absolute;
  color: white;
  animation-duration: 2s;
  animation-name: slidein;
  animation-iteration-count: 1;
  animation-direction: alternate;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

<div class="panel">
  <a href="">
    <div id="panel-1">
      <div class="panel-content">
        <h1 class="logo">Logo</h1>
        <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
      </div>
    </div>
  </a>
</div>

Answer 1

Прокрутка от родительского контейнера, и особенно от тела. Если вы добавите overflow-x: hidden; к элементу тела, это должно произойти.

Answer 2

Хотелось бы что-то вроде следующей работы в качестве лучшего решения: https://jsfiddle.net/keLuvbco/5/

HTML

<div class="panel">
<a href="">   
 <div id="panel-1">
  <div class="panel-content">
   <h1 class="logo">Logo</h1>
   <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </div>
 </div>
</a>
</div>

CSS

.panel-content {
  position: absolute;

  top: 0px;
  left: 0px;

  color: white;
  background-color: blue;

  padding: 20px;

  white-space: nowrap;

  animation-duration: 2s;
  animation-name: slidein;
  animation-iteration-count: 1;
  animation-direction: alternate;
}

@keyframes slidein {
  from {
    left: 150%;
  }

  to {
    left: 0%;
  }
}