元素增加animation后，绝对定位居中失效解决办法

以下是绝对定位的垂直居中代码，但是加上animation后发现元素居然不居中了。（这里实现的是 loading 动画，可以放到 run 上看看效果）

.container{
  width: 400px;
  height: 400px;
  background: #eee;
  position: relative;
}
.center{
  background: blue;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  height: 100px;
  width: 100px;
  border: 4px solid transparent;
  border-radius: 50%;
  background: tomato;
  border-right-color:gainsboro;
  animation: move 1s linear infinite;
}

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

经排查，失效的原因是因为 animation 中 transform 重写了元素样式
解决办法：
在 帧 中重新定义 translate

@keyframes move {
    0% {
        transform: translate(-50%, -50%) rotate(360deg)
    } 
    100% {
        transform: translate(-50%, -50%) rotate(0deg)
    }
}