html - 滑入后设置文本位置

Question

我有以下代码可以让文本滑入，但在幻灯片结束后，文本会向左移动。幻灯片结束后，如何让文本保持原样？

<style>
  div.slide-left {
    width: 100%;
    overflow: hidden;
  }
  div.slide-left p {
    animation: slide-left 5s;
    font-size: 300%;
    color: #000;
    position: absolute;
    top: 50px;
  }
  @keyframes slide-left {
    from {
      margin-left: 100%;
      width: 300%;
    }
    to {
      margin-left: 50%;
      width: 100%;
    }
  }
</style>
<div class="slide-left">
  <p>hello</p>
</div>

Answer 1

您需要使用 animation-fill-mode: forwards保留最后的动画状态。由于没有指定animation-fill-mode，它使用类名的默认属性，即动画完成后重置/跳转到指定的顶部值。

<style>
  div.slide-left {
    width: 100%;
    overflow: hidden;
  }
  div.slide-left p {
    animation: slide-left 5s;
    font-size: 300%;
    color: #000;
    position: absolute;
    top: 50px;
    animation-fill-mode: forwards;
  }
  @keyframes slide-left {
    from {
      margin-left: 100%;
      width: 300%;
    }
    to {
      margin-left: 50%;
      width: 100%;
    }
  }
</style>
<div class="slide-left">
  <p>hello</p>
</div>