css - CSS3动画不起作用

Question

我试图让一个 div 使用 CSS3 围绕另一个旋转，但由于某种原因它根本不会动画。我正在使用 Chrome。任何人都可以帮忙吗？

这是CSS

.container {
    margin: 0 auto;
    position: relative;
}

#center {
    width: 300px;
    height: 300px;
    margin: 225px auto 0;
    border: 5px solid #ddd;
    border-radius: 100%;
    background: #aaa;
}



@-webkit-keyframes rot {
    from {
        transform: rotate(0deg)
                   translate(-150px)
                   rotate(0deg);
    }
    to {
        transform: rotate(360deg)
                   translate(-150px) 
                   rotate(-360deg);
    }
}

@keyframes rot {
    from {
        transform: rotate(0deg)
                   translate(-150px)
                   rotate(0deg);
    }
    to {
        transform: rotate(360deg)
                   translate(-150px) 
                   rotate(-360deg);
    }
}

#small {
    position: absolute;
    width: 75px;
    height: 75px;
    border: 5px solid #ddd;
    border-radius: 100%;
    background: #aaa;
    animation: rot 3s infinite linear;
    -webkit-animation: rot 3s linear infinite;
}

这是html

<div class="container">
    <div id="center"></div>
    <div id="small"></div>
</div>

Answer 1

您需要使用-webkit前缀专有属性来确保您的动画在Webkit浏览器中运行

您需要为 Webkit 浏览器使用前缀

演示

.container {
    margin: 0 auto;
    position: relative;
}

#center {
    width: 300px;
    height: 300px;
    margin: 225px auto 0;
    border: 5px solid #ddd;
    border-radius: 100%;
    background: #aaa;
}

@keyframes rot {
    from {
        transform:         rotate(0deg)
                           translate(-150px)
                           rotate(0deg);
        -webkit-transform: rotate(0deg)
                           translate(-150px)
                           rotate(0deg);
    }
    to {
        transform:         rotate(360deg)
                           translate(-150px) 
                           rotate(-360deg);
        -webkit-transform: rotate(360deg)
                           translate(-150px) 
                           rotate(-360deg);
    }
}

@-webkit-keyframes rot {
    from {
          transform:        rotate(0deg)
                            translate(-150px)
                            rotate(0deg);
         -webkit-transform: rotate(0deg)
                            translate(-150px)
                            rotate(0deg);
    }
    to {
        transform:          rotate(360deg)
                            translate(-150px) 
                            rotate(-360deg);
        -webkit-transform:  rotate(360deg)
                            translate(-150px) 
                            rotate(-360deg);
    }
}

#small {
    position: absolute;
    width: 75px;
    height: 75px;
    border: 5px solid #ddd;
    border-radius: 100%;
    background: #aaa;
    animation: rot 3s infinite linear;
    -webkit-animation: rot 3s linear infinite;
    transform-origin: 50% 200px;
    -webkit-transform-origin: 50% 200px;
}

旁注：您应该使用每个浏览器的专有属性，即 -moz, -webkit，-o这样-ms旧版本的浏览器就不会出现动画