Rotating SVG with Css (animation)

Question

I want to have a css encoded animated svg rotating image. I do not know how to do that. In the end, it should look something like this: http://baveltje.com/logo/logo.html . I am completely new to css. Rotating svg - gear1.svg and gear2.svg. I want them to rotate 360 ​​degrees for infinite time, and I want to name them <.div class = "gear1"> and gear2 .. Can this look like the logo does in the link, but it rotates?

I tried using jsfiddle.net/gaby/9Ryvs/7/ but with no results. It must go at the same speed as this violin!

Thanks in advance!

Code:

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

Here is your original css animation (I removed the prefixes to simplify it):

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

In #gear you should add:

• animation-iteration-count to infinite so that it doesn't run
• transform-origin to the center of your div 50% 50% to force a ride around you.
• display in built-in unit

Result:

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

And of course, add the correct prefixes.