如何使用css动画多次更改颜色？

<div class="color-change"></div>

.color-change {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: colorAnimation 5s infinite;
}

@keyframes colorAnimation {
  0% {
    background-color: red;
  }
  25% {
    background-color: blue;
  }
  50% {
    background-color: green;
  }
  75% {
    background-color: yellow;
  }
  100% {
    background-color: red;
  }
}