CSS3スピンアニメーション


158

私はかなりの数のデモをレビューしましたが、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>

回答:


299

CSS3アニメーションを使用するには、実際のアニメーションキーフレーム(名前を付けたものspin)も定義する必要があります

詳細については、https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animationsを お読みください

アニメーションのタイミングを設定したら、アニメーションの外観を定義する必要があります。これは、@keyframesatルールを使用して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);}
}

9
あなたはそれを最もよく説明し、すべての接頭辞付きのバージョンを含む唯一の答えであるため、あなたは✓を獲得します。
iambriansreed 2013

53
これは非常に細かいですが、実際には359度までアニメートする必要があります。360度と0度は放射状に同じであるため、アニメーションは1回転すると非常に短時間停止します。
アダムグラント

1
@AdamGrantありがとう、これは今日私に頭痛の
種を与えてい

5
359ではなく359.9999999999度までアニメートしたい場合。回転の角度は[0、360)の連続範囲であり、359.0まで回転すると、359から0にワープするときに、すべての回転の開始時に1度の目盛りが表示されます。 。
mdonoughe

16
誤った情報を提供しているこれらすべてのコメントを明確にするために...選択した回答は修正なしで正しいです。0と360度は実際には同じ点でありながら、ブラウザの視点では実際には異なります。たとえば、0度から0度(または360度から360度)に回転しようとしても、まったく回転しません。0度から360度に回転すると、アニメーションを完了する前にオブジェクトを完全に360度回転するようブラウザに指示します。を設定するanimation-iteration-count: infinite;と、アニメーションのフレームが無限になります。20分の回転でも完璧で滑らかに見えます。
jacurtis

28

キーフレームを指定していません。ここで動作させました

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

これで本当にクールなことがたくさんできます。これが私が以前に作ったものです。

:)

-prefix-freeを使用すると、すべての接頭辞を書き出す必要がなくなります。


17

最新のChrome / FFおよびIE11では、-ms / -moz / -webkitプレフィックスは必要ありません。以下は短いコードです(以前の回答に基づく):

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/


5
アニメーションルールを速記と組み合わせるanimation: spin 4s linear infinite
Josh Habdas

10

font-awesomeグリフィコンを使用したHTML。

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

CSS

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

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

1
また、.spinの定義を追加することに対する私の賛成票も得られます
Blair Connolly

6

正しい359degを与える唯一の答え:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

&.active {
  animation: spin 1s linear infinite;
}

これが回転していることを証明できる便利なグラデーションです(円の場合)。

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);

4

回転するには、キーフレームと変換を使用できます。

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


4

完成させるために、実際にコードを短縮するSass / Compassの例を示します。コンパイルされた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))

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.