CSS动画 - 从左到右滑动的文本

Question

我试图让一些文本从左到右延迟滑动。它将出现在页面中间而不是画布上。当文本从页面滑入时，我可以轻松地将其工作。

从屏幕中间做的有点不同，我错过了一些东西。文本显示在页面加载（应隐藏时）。我可以使用jQuery轻松完成这项工作，但我确信使用css更有可能。这是我到目前为止所得到的

HTML：

<div class="slide-right">
  <h2>Text that will slide in from the left</h2>
</div>

CSS：

.slide-right {
   width: 100%;
   overflow: hidden;
   margin-left: 400px;
   max-width: 500px
}

.slide-right h2 {
   animation: 2s slide-right;
   animation-delay: 2s;
}

@keyframes slide-right {
    from {
       margin-left: -500px;
    }

    to {
       margin-left: 0%;
    }
 }

.slide-right {
  width: 100%;
  overflow: hidden;
  margin-left: 400px;
  max-width: 500px
}

.slide-right h2 {
  animation: 2s slide-right;
  animation-delay: 2s;
}

@keyframes slide-right {
  from {
    margin-left: -500px;
  }

  to {
    margin-left: 0%;
  }
}

<div class="slide-right">
  <h2>Text that will slide in from the left</h2>
</div>

谢谢

Answer 1

您最初可以隐藏文本并依靠forwards来保留最后的统计信息：

.slide-right {
  width: 100%;
  overflow: hidden;
  margin-left: 300px;
  max-width: 500px
}

.slide-right h2 {
  animation: 2s slide-right 2s forwards;
    transform:translateX(-100%);
}

@keyframes slide-right {
  to {
    transform:translateX(0);
  }
}

<div class="slide-right">
  <h2>Text that will slide in from the left</h2>
</div>

Answer 2

您可以将margin-left的初始值设置为-500px的h2

.slide-right {
  width: 100%;
  overflow: hidden;
  margin-left: 400px;
  max-width: 500px
}

.slide-right h2 {
  margin-left: -500px;
  animation: 2s slide-right;
  animation-delay: 2s;
}

@keyframes slide-right {
  from {
    margin-left: -500px;
  }

  to {
    margin-left: 0%;
  }
}

<div class="slide-right">
  <h2>Text that will slide in from the left</h2>
</div>