165

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

4

9 に答える 9

323

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

詳細については、 https：//developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animationsを参照してください。

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

デモ ：

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

@-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);}
}
于 2013-02-13T17:38:07.697 に答える
31

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

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を使用すると、すべてのプレフィックスを書き出す必要がなくなります。

于 2013-02-13T17:35:20.440 に答える
18

最新の 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/

于 2015-07-30T09:56:58.987 に答える
6

正しい359度を与える唯一の答え：

@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%);
于 2019-08-28T06:39:04.603 に答える
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);
  }
}

例

于 2013-02-13T17:37:31.723 に答える
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))
于 2015-12-03T08:02:07.790 に答える
0 
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

これにより、質問に答えることができます

于 2018-11-01T07:55:22.320 に答える