如何将元素移出屏幕，然后使用 css 将其平移到右侧？

Question

所以我正在使这个段落元素在页面加载时从左侧出现，但我很挣扎。在等待其他元素时，我无法将其推出页面。如果您知道比以下方法更好的方法，请随时回答我。这是代码：

CSS

  .description {
      color: black;
      top: 60%;
      position: absolute;
      transform: translateX(137%);
      transition: 2s;
      -webkit-transition-delay: 500ms;
      -moz-transition-delay: 500ms;
      -o-transition-delay: 500ms;
      transition-delay: 500ms;
  }

HTML

<body>
    <div class="bgimg-1">
        <div class="caption">
          <span class="border">AutoAFK</span>
        </div>
        <div class='outer'>
        <h1 class="description">The Best Anti-AFK Script</h1>
        </div>
      </div>
</body>

而 here 是演示。

感谢您的帮助！

Answer 1

您可以为此使用@keyframes。将要移动的 div 设置为 relative ，它将相对于主体移动，或者如果它被包装到另一个代码中，它将相对于那个移动。

div {
  width: 200px;
  height: 200px;
  background: blue;
  position: relative;
  animation: yourname 5s infinite;
}

@keyframes yourname {
  from {left: -200px;}
  to {left: 200px;}
}

<div></div>

如何将元素移出屏幕，然后使用 css 将其平移到右侧？

How to margin element off screen and then translate it to the right with css?

html

css

transform

css-position

translate-animation