css - 为什么当我重新加载页面时我的 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>

标签： cssanimation

Answer 1

滚动来自父容器，尤其是主体。如果您将 an 添加overflow-x: hidden;到您的 body 元素，这应该会发生。