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浏览器

You Need To Use Prefix For Webkit Browsers

运行

Demo

.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，使老版本的浏览器 的不失败动画