web-dev-qa-db-ja.com

CssでSVGを回転させる（アニメーション）

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);
    }
}
csshtmlvectorsvg
11
Bas van Rooten

これが元のアニメーションcssです（簡単にするためにプレフィックスを削除しました）：

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

＃gearに次を追加する必要があります：

  • animation-iteration-countからinfiniteローリングを維持する
  • transform-Origindivの中心に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);
    }
}

そしてもちろん、正しいプレフィックスを追加します。

26
Karri Rasinmäki