如何让这个箭头不断旋转？

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

.arrow {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  border-top: none;
  border-right: none;
  transform: rotate(45deg);
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}