スクロールバーが伸びたり縮んだり

<div class="scroll">
		<a href="#about">
			SCROLL
		</a>
	</div>
	<!-- /.scroll -->

.scroll {
    bottom: 180px;
    font-family: 'Volkhov', serif;
    font-size: 13px;
    letter-spacing: .2em;
    position: absolute;
    right: 80px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: sideways;

    a {

      &:before,
      &:after {
        content: "";
        display: block;
        height: 150px;
        width: 1px;
        position: absolute;
        right: 50%;
        top: 120%;
        transform-origin: top;
        background-color: rgba(0, 0, 0, 0.5);
      }

      &:before {
        background-color: rgba(0, 0, 0, 0.1);
      }

      &:after {
        transform: scaleY(0);
        animation: anim-scroll 2.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
      }
    }
  }

@keyframes anim-scroll {

0% {
    transform: scaleY(0)
  }

  35% {
    transform: scaleY(1);
    transform-origin: top
  }

  40% {
    transform-origin: bottom
  }

  50% {
    transform: scaleY(1)
  }

  85% {
    transform: scaleY(0);
    transform-origin: bottom
  }

  100% {
    transform-origin: top
  }
}