滑入后设置文本位置

Set position of text after slide-in

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

<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>

您需要使用animation-fill-mode: forwards来保存最后的动画状态。由于没有指定animation-fill-mode,它使用class名称的默认属性,即resets/jumps到动画完成后指定的最高值。

<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>