Как сделать бесконечную анимацию на CSS?

.item { 
  width: 200px; 
  height: 200px; 
  border-radius: 50%; 
  animation-name: test; 
  animation-duration: 2s; 
  animation-iteration-count: infinite; 
  animation-timing-function: linear; 
  animation-direction: alternate; 
} 
 
@keyframes test { 
  0% { 
    background-color: yellow; 
  } 
  100% { 
    background-color: blue; 
  } 
}

<div class="item"></div>