Seamless move of an arrow in a loop with css animation

Question

I am trying to implement a seamless loop of one arrow inside a div.

I am using two SVG arrows and what I am trying to archieve is when the top of the first arrow is partly hidden the same part of the second one should be shown so it seems like only one arrow is used and it is moving in the loop (when the first arrow reaches the top of the div and the 50% of it is hidden then the 50% of the second one should be shown at the bottom).

.arrows-wrapper {
  width: 124px;
  height: 83px;
  overflow: hidden;
  position: relative;
  background-color: gray;
}

.arrows-wrapper svg {
  position: absolute;
}

.arrows {
  animation: slide 4s linear infinite;
}

.arrow2 {
  animation-delay: 2s;
}

@keyframes slide {
  from {
    transform: translate(0, -25px);
  }
  to {
    transform: translate(0, -125px);
  }
}

See the demo of what I have got so far (two arrows are visible at once but only one arrow or part of it should be visible at the same time).

The result I need:

The question is if it's possible to archieve.

matbou · Accepted Answer

This should do it: Just needed to tweek the translate in your css animation.

.arrows-wrapper {
  width: 124px;
  height: 83px;
  overflow: hidden;
  position: relative;
  background-color: gray;
}

.arrows-wrapper svg {
  position: absolute;
}

.arrows {
  animation: slide 4s linear infinite;
}

.arrow2 {
  animation-delay: 2s;
}

@keyframes slide {
  from {
    transform: translate(0, -25px);
  }
  to {
    transform: translate(0, -200px);
  }
}

Seamless move of an arrow in a loop with css animation

Answers (1)

Related Questions