Question

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

＆＃13;

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

＆＃13;

Answer 1

您需要使用animation-fill-mode: forwards来保留上一个动画状态。由于没有指定动画填充模式，它使用了类名的默认属性，即重置/跳转到动画完成后指定的最高值。

＆＃13;

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

＆＃13;

滑入后设置文本的位置

1 个答案: