2

以下は jsfiddle.net の例です。

http://jsfiddle.net/PGa2H/

CSS

@keyframes blink {
    0% { box-shadow: 0 0 15px green; }
    50% { box-shadow: 0 0 0; }
    100% { box-shadow: 0 0 15px green; }
}

@-webkit-keyframes blink {
    0% { box-shadow: 0 0 15px green; }
    50% { box-shadow: 0 0 0; }
    100% { box-shadow: 0 0 15px green; }
}

.blink {
    -webkit-animation: blink 1.0s linear infinite;
    animation: blink 1.0s linear infinite;
}

  • ボックス シャドウ アニメーションは Chrome で動作します

  • Firefox では動作しません

質問

  • アニメーション化できる CSS3 プロパティはどれですか?

  • これはどこに指定されていますか？

  • Firefox に問題がある場合、参照先はありますか

4

1 に答える 1

5

box-shadow何らかの理由で無効な値を使用すると、Firefox はそれを好まないようです。シャドウをキャンセルしたい場合はbox-shadow: none. これだけで仕事がはかどるようです。

http://jsfiddle.net/PGa2H/2/

これはアニメーション可能なプロパティの非公式ですが正確なリストのようです: http://oli.jp/2010/css-animatable-properties/

于 2013-06-11T11:00:25.337 に答える