Search code examples
htmlcsscss-positiontransformtranslate-animation

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

So I'm making this paragraph element to come from the left on page load, but im struggling. I can't push it out of the page while it waits for the other elements. If you know a better way of doing it than the below one, feel free to answer me. Here is the code:

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>

And here is the demo.

Thanks for any help!

Solution

  • You can use @keyframes for this. Set the div you want to move to relative and it will move relative to the body or if it is wrapped into a another code it will move relative to that.

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

@keyframes yourname {
  from {left: -200px;}
  to {left: 200px;}
}
    <div></div>