为什么我的CSS动画在重新加载页面时会出现在窗口之外，而在最初加载页面时却不会出现？

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;添加到body元素，则应该发生这种情况。

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