SCSS

HTML

<div class="scroll-animation">
  <div class="chevron"></div>
  <div class="chevron"></div>
  <div class="chevron"></div>
</div>

SCSS

$base: .6rem;

.scroll-animation {
  position: absolute;
  width: 100%;
  height: 41px;
  bottom: 24px;
  display: flex;
  justify-content: center;

  &:focus {
    outline: none;
  }

  .chevron {
    position: absolute;
    width: $base * 3.35;
    height: $base * .3;
    opacity: 0;
    transform: scale(.3);
    animation-name: move-chevron;
    animation-duration: 3.15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .chevron:first-child {
    animation-delay: 0.28s;
  }

  .chevron:nth-child(2) {
    animation-delay: 0.66s;
  }

  .chevron:before, .chevron:after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background: red;
  }

  .chevron:before {
    left: 0;
    transform: skewY(30deg);
  }

  .chevron:after {
    right: 0;
    width: 50%;
    transform: skewY(-30deg);
  }

  @keyframes move-chevron {
    25% {
      opacity: 1;
    }

    33.3% {
      opacity: 1;
      transform: translateY($base * 2.8);
    }

    53.2% {
      opacity: .2;
      transform: translateY($base * 4.65) scale(0.3);
    }

    60.7% {
      opacity: 0;
      transform: translateY($base * 5.15) scale(0);
    }

    100% {
      opacity: 0;
      transform: translateY($base * 5.15) scale(0);
    }
  }
}