css - 动画无法正常执行

问题描述

问 题

    #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);
        }         
    }

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

解决方案

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

@-webkit-keyframes rotate {

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

这篇关于css - 动画无法正常执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！