Css箭头过渡

<div class="arrow"></div>

.arrow {
  position: relative;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #000;
}

.arrow::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #000;
  animation: arrow-transition 1s infinite alternate;
}

@keyframes arrow-transition {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}