2011-07-19 8 views
1

おはようございます。私は次のコードで苦労してるCSS3トランジションでブラウザの動作が異なります

今日:私は達成しようとしている何source on jsFiddle

はイメージの「ミラー」は、いくつかのCSS3のエフェクトを使用して、元の1をカバーして一見単純な画像のロールオーバー効果です。

  • クロム12は、画像の実行時画像完全
  • のFirefox 5はIE9
  • マウスカーソルへの変換を停止変換 - まったく変換されていない、画像だけ
  • オペラを振っています - チェックされていない

このクロスブラウザはどのように互換性がありますか?

+0

jqueryアニメーションで試しましたか? –

+0

まだありませんが、私はCSS3の答えが見つからない限りします – WooDzu

答えて

1

私はそれがあなたが望む方法でFirefox 5で動作すると思っています。 jqueryアニメーションで試しましたか?http://jsfiddle.net/X2eN6/7/

+0

を参照してくださいありがとう、これは魅力のように動作します。私がトランジション方法を「イージー・イン・アウト」から「イージー・アウト」に変更した後でさえ、さらに良くなりました。これらのトランジションをトランスコードするには、IEまたは適切なオンラインジェネレータの方法について知っていますか? – WooDzu

+1

IEは現在、トランジションをサポートしていません。 IEのJavaScriptベースのフォールバックを実装するために、YUI 3 Transitionモジュールを使用することをお勧めします。 – Gaurav

+0

またはjquery =)jqueryはyui =よりも優れていると思う) –

1

CanIUse.comによると、IE9はCSS3トランジションをサポートしていないため、IE9ではこれがうまく動作しないのはなぜかと思います。

この機能をサポートするブラウザは、Firefox(v4以降)、Chrome、Safari、Operaです。しかし、トランジションでは現在、それらをサポートするすべてのブラウザにベンダー接頭辞が必要であることを指摘する価値はあります。

ベンダープレフィックスは、仕様がまだファイナライズされていないか、構文が変更される可能性があるか、またはブラウザの機能が完全にサポートされていないかのいずれかを意味します。

クロムは長年のトランジションをサポートしています。そのため、すべての機能が驚くことではありません。 Firefoxは最近追加したばかりなので、ベンダープレフィックスが必要なので、100%動作することが保証されていない可能性があることを警告する必要があります。

+0

あなたの答えをありがとう。私はブラウザ用のベンダープレフィックスを使いました:-o -webkit -firefox – WooDzu

+1

@WooDzu - Firefoxでは '-moz-'になります。 – Spudley

+0

実際、それは-moz-です。ちょうどタイプミスです。 @Spudleyコード – WooDzu

関連する問題