html - CSS3 の「アニメーション」が mozilla で機能しない。何をすべきか？

Question

css3 のキーフレームを使用しましたが、mozilla の場合は機能しません。google chrome で問題なく動作しています。

「アニメーション」も同様に、@keyframe と @-webkit-keyframe の両方を使用しました。しかし、それは機能していません。理由はわかりません。

Answer 1

以下のように、 mozilla (moz)も指定する必要があります。

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}