CSS (애니메이션)로 SVG 회전하기

Question

CSS로 애니메이션 된 회전식 svg 이미지가 필요합니다. 어떻게해야할지 모르겠다. 결국 정확하게 다음과 같이보아야합니다 : http://baveltje.com/logo/logo.html. 나는 CSS에 완전히 새로운 것이다. 회전하는 svg는 gear1.svg 및 gear2.svg입니다. 무한한 시간 동안 360 degres를 회전 시키길 원하고 그들에게 < .div class = "gear1"> 및 gear2라고 말하고 싶습니다. 로고가 링크 에서처럼 정확하게 보이도록 할 수 있습니까?

나는 jsfiddle.net/gaby/9Ryvs/7/을 사용하려고 시도했지만 아무런 결과가 없습니다. 바이올린처럼 똑같은 속도로 움직여야합니다!

미리 감사드립니다.

코드 :

여기

div { 
    margin: 20px; 
    width: 100px; 
    height: 100px; 
    background: #f00; 
    -webkit-animation-name: spin; 
    -webkit-animation-duration: 4000ms; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -moz-animation-name: spin; 
    -moz-animation-duration: 4000ms; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
    -ms-animation-name: spin; 
    -ms-animation-duration: 4000ms; 
    -ms-animation-iteration-count: infinite; 
    -ms-animation-timing-function: linear; 

    animation-name: spin; 
    animation-duration: 4000ms; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
} 
@-ms-keyframes spin { 
    from { -ms-transform: rotate(0deg); } 
    to { -ms-transform: rotate(360deg); } 
} 
@-moz-keyframes spin { 
    from { -moz-transform: rotate(0deg); } 
    to { -moz-transform: rotate(360deg); } 
} 
@-webkit-keyframes spin { 
    from { -webkit-transform: rotate(0deg); } 
    to { -webkit-transform: rotate(360deg); } 
} 
@keyframes spin { 
    from { 
     transform:rotate(0deg); 
    } 
    to { 
     transform:rotate(360deg); 
    } 
} 

Answer 1

원래 애니메이션 CSS입니다 (나는 제거한 접두사는 간단하게하기) :

#gear{ 
    animation-name: ckw; 
    animation-duration: 15.5s; 
} 
@keyframes ckw { 
    0% { 
     transform: rotate(0deg); 
    } 
    100% { 
     transform: rotate(360deg); 
    } 
} 

에서 이 #gear 추가해야합니다

• 애니메이션 반복 카운트에 무한는 롤링 유지
• 변환 - 원산지 당신의 사업부 50 % 50 %의 센터 자체의 주위에 기어 롤링을 얻을 수
• 디스플레이인라인 블록

결과 :

#gear{ 
    animation-name: ckw; 
    animation-duration: 15.5s; 
    /* Things added */ 
    animation-iteration-count: infinite; 
    transform-origin: 50% 50%; 
    display: inline-block; 
    /* <--- */ 
} 
@keyframes ckw { 
    0% { 
     transform: rotate(0deg); 
    } 
    100% { 
     transform: rotate(360deg); 
    } 
} 

그리고 물론

올바른 접두사를 추가합니다.