动画无法正常执行

Question

    #ball2{
        position: absolute;
        height: 60px;
        width: 60px;
        left: 60%;
        top: 50%;
        transform: translate(-50%,-50%);
        background-color: #ddd;
        border-radius: 50%;
        transform-origin: 0 50%;
        -webkit-animation: rotate 2s linear infinite;
    }

    @-webkit-keyframes  rotate {    
        to {
            -webkit-transform: rotate(1turn);
        }         
    }

这个球会动，但是不能正常的做绕圈运动啊！这是为什么啊？ 求大神解答。

Answer 1

transform: translate(-50%,-50%) rotate(0);

@-webkit-keyframes rotate {

    to {
        -webkit-transform: translate(-50%,-50%)  rotate(1turn);
    }         
}

Answer 2

#ball2{
            position: absolute;
            height: 60px;
            width: 60px;
            left: 60%;
            top: 50%;
            background-color: #ddd;
            border-radius: 60px;
            transform-origin: 0 50%;
            -webkit-animation: rotate 2s linear infinite;
        }

        @-webkit-keyframes  rotate {    
            to {
                -webkit-transform:rotate(1turn);
            }         
        }

Answer 3

from {
  transform: none;
}
to {
  transform: rotate(1turn);
}

Answer 4

AidenCao 答案正确,你之前的transform: translate(-50%,-50%);这一句代码导致整个动画变形