css - Css (アニメーション) を使用した SVG の回転

Question

css でコード化されたアニメーションの回転する svg 画像が必要です。どうすればいいのかわかりません。最終的にはhttp://baveltje.com/logo/logo.htmlのようになります。私はcssにまったく慣れていません。回転する svg は、gear1.svg と gear2.svg です。無限に 360 度回転させたいのですが、それらを <.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);
    }
}