如何在屏幕外边缘元素，然后用css将其翻译到右侧？答案

【问题标题】：How to margin element off screen and then translate it to the right with css?如何在屏幕外边缘元素，然后用css将其翻译到右侧？
【发布时间】：2021-04-22 04:40:28
【问题描述】：

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

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 是演示。

感谢您的帮助！

【问题讨论】：

标签： html css css-position transform translate-animation

【解决方案1】：

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

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

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

&lt;div&gt;&lt;/div&gt;

【讨论】：