5

画像のループ フェード イン/アウト エフェクトを作成しようとしています。Chrome では動作しますが、Firefox では動作しません。

コードは次のとおりです。http://jsfiddle.net/FTLJA/254/

（私はjQueryで動作させましたが、ブラウザが遅くなり、Android携帯ではちらつきが生じたので、代わりにCSSを試しています。）

助けてくれてありがとう。

更新：修正済み..リンクをもう一度確認してください

4

2 に答える 2

14

まあ、ypu が WebKit プロパティのみを設定している場合 ( only@-webkit-keyframesおよび only -webkit-animation-...)、もちろん WebKit でのみ機能し、Firefox では機能しません --moz接頭辞も追加してください。また、引用符を削除してその'blink'ままにしておきます...blinkそして動作しますhttp://jsfiddle.net/FTLJA/261/

于 2012-07-20T13:13:52.877 に答える
0

そうそう、これは CSS トランジションと CSS アニメーションの違いを示しています。

CSS アニメーションは-webkit-animation-name、要素に適用すると実行されます。つまり、完全に CSS から実行できます。

一方、トランジションは、適用先の CSS プロパティを変更した場合にのみ実行されます。これは、 などの CSS 疑似クラス:hoverまたは JavaScript を介して行うことができます。

したがって、 をサポートしていないブラウザでトランジションを機能させるに-webkit-animationは、画像の不透明度を 1 秒に 1 回変更する JavaScript を実行する必要がありsetIntervalます。

(JavaScript はアニメーションを実行しないことに注意してくださいopacity。1 秒ごとに 1 から 0 に切り替わり、また元に戻るだけです。CSS トランジションがこの変化をアニメーション化します。)

于 2012-07-20T12:50:34.643 に答える