Почему анимация отменяет transform?

.parent { 
  width: 200px; 
  height: 200px; 
  border: 1px solid green; 
  position: relative; 
} 
.child { 
  width: 100px; 
  height: 100px; 
  border: 1px solid red; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translateY(-50%) translateX(-50%); 
} 
.child:hover { 
  animation: spin 1s linear infinite; 
} 
@keyframes spin { 
  from { 
    transform: translateY(-50%) translateX(-50%) rotate(0deg); 
  } 
  to { 
    transform:  translateY(-50%) translateX(-50%) rotate(360deg); 
  } 
}

<div class="parent"> 
  <div class="child"></div> 
</div>