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以便舊版本的瀏覽器不會失敗動畫