I am trying to build an animation like the one at the top of this website >>> http://www.randstadusa.com. So, I am using CSS @keyframes. I am being able to move the arrows to left and disappear, but I want them to re-appear from left side. Any idea on how to do this with css or another method? This is me so far:

.arrow {
    position: absolute;
    left: 50%;
    height: 2em;
    width: 2em;
    color: white;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-delay: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: arrows_animation;

}
@keyframes arrows_animation {
    0% {left: 50%;}
    50% {left: 70%;}
    100% {left: 10000px;}

}

<div style="background-color: black; overflow: hidden; height: 200px; width: 100%;">
    <div class="arrow">
        SOME TEXT
    </div>
</div>

CodePudding user response：

Here is an example how to do it. I switched the orientation from left to right, and moved the element out of the body, with overflow: hidden. the transformation centeres the element.

@keyframes example {
  0%  {
    left: 50%;
    transform: translateX(-50%);
  }
  49% {
    left: -100px;
    transform: translateX(-50%);
  }
  50% {
    left: inherit; 
    right: -100px;
    transform: translateX(50%);
  }
  51%  {
    left: inherit; 
    right: -100px;
    transform: translateX(50%);
  }
  100% {
    left: inherit; 
    right: 50%;
    transform: translateX(50%);
  }
}

body {
  overflow: hidden;
}

div {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

<div></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The movement in the example site is characterised as: start off screen, come in from the left fast to a point slightly more than midway, move a short distance slowly, then shoot offscreen to the right.

This snippet achieves this by first keeping the element off screen to the left with a negative translateX, then moving to the right of center within the first 10% of the animation, so that's within 1second, then moving just 5% of the width of the screen for the next 80% of the animation (ie 8seconds) and then shooting off to the right in the remainder of the animation.

Change the animation's %s to get the timing you want.

Note that the element being animated had been given a fixed width of 2em which was not wide enough to accommodate the text so for this demo that has been removed, otherwise little bits of the text peep out from the left at the start.

.arrow {
  position: absolute;
  height: 2em;
  color: white;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-delay: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-play-state: running;
  animation-name: arrows_animation;
  transform: translateX(-100%);
}

@keyframes arrows_animation {
  0% {
    animation-timing-function: ease-out;
  }
  10% {
    animation-timing-function: ease-in;
    transform: translateX(60vw);
  }
  90% {
    animation-timing-function: ease-out;
    transform: translateX(65vw);
  }
  100% {
    transform: translateX(100vw);
  }
}

<div style="background-color: black; overflow: hidden; height: 200px; width: 100%;">
  <div class="arrow">
    SOME TEXT
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Note: the fill-mode-forwards has been removed as that would stick the element just off screen to the right at the end of the animation and we want it back offscreen to the left. Also the element's initial position is offscreen so that it doesn't show while there is the initial delay to its start.