CSS3スピンアニメーション

Question

私はかなりのデモを見直して、なぜCSS3スピンを機能させることができないのか分かりません。私は最新のChromeの安定版を使用しています。

フィドル： http://jsfiddle.net/9Ryvs/1/

div { 
 
    margin: 20px; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #f00; 
 
    -webkit-animation-name: spin; 
 
    -webkit-animation-duration: 40000ms; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-timing-function: linear; 
 
    -moz-animation-name: spin; 
 
    -moz-animation-duration: 40000ms; 
 
    -moz-animation-iteration-count: infinite; 
 
    -moz-animation-timing-function: linear; 
 
    -ms-animation-name: spin; 
 
    -ms-animation-duration: 40000ms; 
 
    -ms-animation-iteration-count: infinite; 
 
    -ms-animation-timing-function: linear; 
 
    -o-transition: rotate(3600deg); 
 
}

<div></div>

Answer 1

あなたも（あなたがspinという名前）実際のアニメーションキーフレームを定義する必要がありCSS3アニメーションを使用するには

読むhttps://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations詳細

あなたのため一度」アニメーションのタイミングを設定したら、アニメーションの外観を定義する必要があります。これは、@keyframes at-ruleを使用して2つ以上のキーフレームを確立することによって行われます。各キーフレームは、アニメーションシーケンス中のアニメーション要素が所定の時間にレンダリングされる方法を記述します。

---

http://jsfiddle.net/gaby/9Ryvs/7/

@-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 2

あなたが任意のキーフレームを指定していません。 I made it work here。

div { 
    margin: 20px; 
    width: 100px; 
    height: 100px;  
    background: #f00; 
    -webkit-animation: spin 4s infinite linear; 
} 

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

これで本当にクールなことをたくさんすることができます。 Here is one I made earlier。

:)

N.B.-prefix-freeを使用すると、すべてのプレフィックスを書き留めなくてもかまいません。

Answer 3

回転するには、キーフレームとトランスフォームを使用できます。

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

@-webkit-keyframes spin { 
    from { 
    -webkit-transform:rotate(0deg); 
    } 

    to { 
    -webkit-transform:rotate(360deg); 
    } 
} 

Example

Answer 4

でデモ-ms/-moz/-webkit接頭辞は必要ありません最新クローム/ FFのとおりとIE11に。ここで が（前回の回答に基づいて）短いコードです：

div { 
    margin: 20px; 
    width: 100px; 
    height: 100px; 
    background: #f00; 

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

ライブデモ：http://jsfiddle.net/9Ryvs/3057/

Answer 5

完了のために、ここでは実際にコードを短縮サス/コンパスの一例ですが、コンパイル済みのCSSが含まれています必要なプレフィックスなど。

div 
    margin: 20px 
    width: 100px 
    height: 100px  
    background: #f00 
    +animation(spin 40000ms infinite linear) 

+keyframes(spin) 
    from 
    +transform(rotate(0deg)) 
    to 
    +transform(rotate(360deg)) 

Answer 6

HTMLのフォントですばらしいグリフコン。あなたは最高のそれを説明しているため

<span class="fa fa-spinner spin"></span> 

CSS

@-moz-keyframes spin { 
    to { -moz-transform: rotate(359deg); } 
} 
@-webkit-keyframes spin { 
    to { -webkit-transform: rotate(359deg); } 
} 
@keyframes spin { 
    to {transform:rotate(359deg);} 
} 

.spin { 
    animation: spin 1000ms linear infinite; 
}