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

이며, 여기

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

Answer 1

당신은 당신의 애니메이션이 Webkit 브라우저

You Need To Use Prefix For Webkit Browsers

에서 실행되도록 -webkit 접두사에게 고유의 속성을 사용하는 데 필요한 HTML을하다

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

사이드 참고 : 당신은 그래서 브라우저의 이전 버전