web-dev-qa-db-ja.com

CSSとJavascriptを使用した無限回転アニメーション

私はいくつかの単一ページのウェブサイトの例を調べていて、これを見つけました： http://alwayscreative.net/ 。無限に回転する背景のディスクにすっかり驚いています。私はいくつかの例を見てきましたが、どれもそのように機能しませんでした。誰かがそれがどのように実装されたか教えてもらえますか？ありがとう。

javascriptjquerycssjquery-animatecss-animations
12
Anuj Kaithwas

CSS3：

@keyframes rotate360 {
  to { transform: rotate(360deg); }
}
img { animation: 2s rotate360 infinite linear; }
/* TODO: Add -vendor-prefixes for different browsers */
<img src="//placehold.it/200x200/cfc?text=Wooo!" />
21
Roko C. Buljan

この例では、無限回転が非常にうまくいきます。

div{
    -moz-border-radius: 50px/50px;
    -webkit-border-radius: 50px 50px;
    border-radius: 80px/80px;;
    border:solid 21px #f00; 
    width:100px;
    height:100px;
    -webkit-animation: rotation 2s linear infinite;
    -moz-animation: rotation 2s linear infinite;
    -ms-animation: rotation 2s linear infinite;
}

@-webkit-keyframes rotation {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotation {
    0%   { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}
@-ms-keyframes rotation {
    0%   { -ms-transform: rotate(0deg); }
    100% { -ms-transform: rotate(360deg); }
}

ここでテストできます： http://jsfiddle.net/HS68a/2/

3
Mohammad Ghaheri

これがあなたの例でどのように実装されているかです：

@-webkit-keyframes rotation1{
from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
@-moz-keyframes rotation1{
from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
@-o-keyframes rotation1{
from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}

.vector1{-moz-animation:rotation1 30s linear infinite;-o-animation:rotation1 30s linear infinite;-webkit-animation:rotation1 30s linear infinite;animation:rotation1 30s linear infinite}

しかし、他のブラウザー固有のキーフレームにブラウザーの接頭辞付き変換を配置することに関心はありません（少し奇妙に思えます...）。

また、一般的なキーフレームとIE10のサポートがないため、これが私が実装した方法です。

@-webkit-keyframes rotation1{
  from{-webkit-transform:rotate(0deg);}
  to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotation1{
  from{-moz-transform:rotate(0deg);}
  to{-moz-transform:rotate(360deg);}
}
@-o-keyframes rotation1{
  from{-o-transform:rotate(0deg);}
  to{-o-transform:rotate(360deg);}
}
@keyframes rotation1{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
  }
.vector1{-moz-animation:rotation1 30s linear infinite;-o-animation:rotation1 30s linear infinite;-webkit-animation:rotation1 30s linear infinite;animation:rotation1 30s linear infinite}
2
Thony

この行を確認してください。 css3を使用して画像を回転させることができます。そして私はchromeは正常に動作しています http://jsfiddle.net/sUHKh/

2
MMK

Chromeで「要素の検査」を実行しました。これがCSSです。

.vector1 {
  -moz-animation: rotation1 30s linear infinite;
  -o-animation: rotation1 30s linear infinite;
  -webkit-animation: rotation1 30s linear infinite;
  animation: rotation1 30s linear infinite;
}
1
Phil