Как поменять rotate на rotate2 через JS?

document.querySelector('button').onclick = function() { 
  document.querySelector('.side').style.animationName = "rotate2"; 
}

.side { 
  margin: 50px auto; 
  width: 400px; 
  height: 200px; 
  background-color: #ccc; 
  animation: rotate 10s infinite linear; 
  transform-origin: 50% 50%; 
} 
 
@keyframes rotate { 
  100% { 
    transform: rotateY(-360deg); 
  } 
} 
 
@keyframes rotate2 { 
  100% { 
    transform: rotateY(360deg); 
  } 
}

<div class="side"></div> 
 
<button>change animation</button>