4

次の CSS は Webkit で正常に動作します。Opera では確認していませんが、Firefox では動作しないことがわかっています。理由を教えてもらえますか？

正しいクラスが確実に HTML に適用されています (Firebug で調べたところ、 の-moz-animation: 500ms ease 0s normal forwards 1 arrowRotateDotプロパティが表示されます.arrow)。

これもIE9では機能しませんが、もともと持っていた-ms-animation:...と-ms-transform:.... IE9 で動作するはずだと思っていましたが、そうでないときは、IE がまだこれらをサポートしていないと思い込んでいました。ただし、Firefox では機能しないため、別のことが起こっている可能性があります。

.page.updatesPodcasts > .mainContent > .content .contentUpdates .disc.dot .dvd .arrow {
  -webkit-animation: arrowRotateDot 500ms forwards;
  -moz-animation: arrowRotateDot 500ms forwards;
  -o-animation: arrowRotateDot 500ms forwards;
  animation: arrowRotateDot 500ms forwards;
}
.page.updatesPodcasts > .mainContent > .content .contentUpdates .disc.f2 .dvd .arrow {
  -webkit-animation: arrowRotateF2 500ms forwards;
  -moz-animation: arrowRotateF2 500ms forwards;
  -o-animation: arrowRotateF2 500ms forwards;
  animation: arrowRotateF2 500ms forwards;
}

@-webkit-keyframes arrowRotateDot {
  100%  {
      left:-18px; top:182px;
      -moz-transform: scale(1) rotate(-30deg);
      -webkit-transform: scale(1) rotate(-30deg);
      -o-transform: scale(1) rotate(-30deg);
      transform: scale(1) rotate(-30deg);
      }
}
@-webkit-keyframes arrowRotateF2 {
  0%  {
      left:-18px; top:182px;
      -moz-transform: scale(1) rotate(-30deg);
      -webkit-transform: scale(1) rotate(-30deg);
      -o-transform: scale(1) rotate(-30deg);
      transform: scale(1) rotate(-30deg);
      }
  100%  {
      left:115px; top:257px;
      -moz-transform: scale(1) rotate(-90deg);
      -webkit-transform: scale(1) rotate(-90deg);
      -o-transform: scale(1) rotate(-90deg);
      transform: scale(1) rotate(-90deg);
      }
}
4

2 に答える 2

9

@- webkit -keyframesを使用しているため、Firefox でアニメーションが機能しません。これは Webkit ブラウザ (Chrome や Safari など) にのみ適用されます。アニメーションのキーフレームを行う (ある程度) クロスブラウザーの方法は次のとおりです。

@keyframes animationName {
    /* animation rules */
}

@-moz-keyframes animationName {
    /* -moz-animation rules */
}

@-webkit-keyframes animationName {
    /* -webkit-animation rules */
}

Opera と Internet Explorer は現在 @keyframes ルールをサポートしていません。

于 2011-09-30T20:42:23.663 に答える
0

スカイラインは正しいです。Firefox はこれをサポートしていないため、Webkit なしで存在する場合、同じまたは類似の効果を得るには追加のコードが必要になります。

また、追加のコードを追加することがオプションではない場合に、コードを使用するのに役立つ、またはコードをこの時点からどこに移動するかを決定するのに役立つ追加情報を次に示しますコード）：

http://caniuse.com/#

http://www.quirksmode.org/webkit.html

于 2011-09-30T21:07:05.973 に答える