矢印が縮む

@keyframes ShrinkArrowLine {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0.5);
  }
}

@keyframes ShrinkArrowMoveTriangle {
  0% {
    transform: translateX(0.25em);
  }
  100% {
    transform: translateX(-1.25em);
  }
}

@keyframes ShrinkArrow {
  0% {
    clip-path: polygon(
      0% 42%,
      85% 42%,
      85% 0%,
      100% 50%,
      85% 100%,
      85% 58%,
      0% 58%
    );
  }
  100% {
    clip-path: polygon(
      0% 42%,
      45% 42%,
      45% 0%,
      60% 50%,
      45% 100%,
      45% 58%,
      0% 58%
    );
  }
}