問題タブ [css-transitions]

css3 でトランジション効果を使用してドロップダウン メニュー効果を作成しようとしました。効果は、Safari と Chrome では生成されましたが、Firefox と Opera では生成されませんでした。

トランジションには o-transition:height 0.5s; を使用しました。-webkit-transition:高さ 0.5 秒; -moz-transition:高さ 0.5 秒;

私が使用したブラウザはmozilla 3.6.15とopera 10.63だったので、Firefoxでトランジション効果が発生しないのはなぜですか

Google はこれについて私をやや失敗させています (PolyFill/Shim/Spackle の用語は現時点では新しく多様であるためだと思います)。Webkit の (そして現在は RC FireFox 4 の) CSS トランジションに適した JavaScript PolyFill または Shim を見つけようとしています。

Weston Ruterが行ったこの作業を見つけましたが、しばらく更新されておらず、機能検出ではなくブラウザー検出を使用しています。

FakeSmileも発見しましたが、主に SVG アニメーションを対象としています。

この機能を埋めるための優れたライブラリを知っている人はいますか? できればModernizrで動作するもので、現在も積極的に取り組んでいます。これまでのところ、最善の選択肢は、Weston が思いついたものから始めることです。

CSS アニメーションを使用する方法を探していますが、ユーザーのブラウザーが CSS アニメーションを実行しない場合は、フォールバックしてアニメーションに Jquery を使用します。Jqueryでこれを行う簡単な方法はありますか? 小さなプラグインであれば、プラグインは問題ありませんが、可能であれば jquery でこれを行う方法を本当に探しています。私が css アニメーションを使用したい唯一の理由は、css アニメーションを使用するときに使用されるプロセッサの電力がはるかに低いためです。

例としてこのdomを取り上げます。

どの内部divを非表示にするかを変更した場合、CSS3遷移を（リフローを介して）トリガーできますか？これが可能であれば、多くの内部divを追加して、サイズを知らなくてもスムーズに切り替えることができます。

CSSトランジションでの私の最初の試みは、iOSに似たスライディングパネルシステムを使用することです。パネル以外はすべて機能しており、左からスライドして左から内側にスライドしています。私はiOSスタイルのスライダーを探しています。一方のパネルが左にスライドし、もう一方のパネルが右からスライドします。一方が戻ると、反対のことが起こります。

何か案は、

素晴らしい

これは私が持っているものです:

しかし、これはonmouseoverアクションとonmouseoutアクションの両方に追加されますが、それらを制御する方法はありませんか? 何かのようなもの：

YouTube埋め込みでcss-transformsを使用すると、少なくともSafari5とFirefox4でビデオが黒くなります。Chrome11はそれを問題なく処理します。

ここに例を示しました：http：//jsfiddle.net/oskarrough/4vRzd/4/

派手なレイアウトの配置を行うには、css-transformが必要です。ビデオを表示するためにそれをハックする方法、cssまたはjsはありますか？

移動したときにスライドインおよびスライドアウトするセクションを持つページレイアウトを作成しようとしています。各セクションは画面全体に表示され（幅/高さ100％）、パーセンテージベースの値で絶対的に配置されます。

添付のサンプルには、次のように配置された4つのセクションがあります。

ここで、[a]は0 0、[b]は0 100％、[c]は100％100％、[d]は200％100％です。

ここで、ナビゲーションを実現するために、すべてのセクションを100％x 100％の絶対位置に配置され、オーバーフローした非表示のコンテナーに配置しました。セクションに移動すると、コンテナの「上」と「左」の値がセクションのオフセットの負の値にアニメーション化されます。たとえば、[d]が選択されている場合、コンテナは-200％-100％にアニメーション化されます。

奇妙な行動がたくさんあります！0％オフセットにナビゲートする場合（左に移動または上に移動）、遷移は正常に機能します。ただし、他の組み合わせ（つまり、負のオフセット）は、一見非論理的な（まだ一貫した）癖になります。

自分の目で確かめてください：http：//www.doronassayas.com/ypsite

要約は次のとおりです。

• [c]および[d]から[a]または[b]のいずれかが正常に機能します。
• [a]から[b]および[a]から[d]：最後にジャンプし、最初に戻ってアニメーションを開始します。
• [a]と[b]から[c]は最も奇妙です-遷移が始まる前に、ボディ全体（または他の高レベルの要素？）がCSSでは追跡できない視覚的なオフセットにポップします（Firebugや他の開発では見えません）ツール）。したがって、CSS値が[c]にあるはずであることを明確に示していても、[c]に到達するのではなく、（視覚的に）[d]に到達します。Firebug階層をクリックするなどのランダムな操作を行うと、ビューが正しい場所にリセットされます。WTF？

これをFirefox4、Chrome 10、Safari 5でテストしたところ、jQuery.animate（）を使用する場合でも、Louis Remiの非常にクールなjQuery.transitionプラグインを使用する場合でも、すべてのブラウザーで同じ動作が発生します。 animate（）が呼び出されたときに新しいオフセット値を使用します。

奇妙さの一貫性は私に興味をそそられます。何か案は？

どんな助けでも大歓迎です。

「状態」を切り替える遅延が異なるCSS3トランジションを使用することは可能ですか？たとえば、ホバーしてから「マウスアウト」で要素をすぐに高くして、要素の初期の高さに戻る前に1秒待機しようとしています。

デモページ： jsfiddle.net/RTj9K（右上隅のブラックボックスにカーソルを合わせる）

CSS： #bar { transition:.4s ease-out 0, 1s; }

最後のタイミングは遅れに関係していると思いましたが、思った通りに動いていないようです。

ここで私がやろうとしているのは、このdivにカーソルを合わせたときにトランジションを取得することです。

すべてが正常に機能し、何もしない移行だけです。transition: all、、transition: opacityおよびで遷移プロパティを使用してみましたtransition: background。しかし、それらのどれも機能しません。

それをしているのはdisplayプロパティです。それを取り出すとうまくいくからです。他にどうすればこれを回避できますか？display老いも若きもすべてのブラウザで動作するので、私は明らかにプロパティを保持したいので。

これが私が現時点で持っているものです：

不透明度や背景など、フェードを制御するために使用しているのかどうかは関係ありません。他に何をすべきかわからないだけです。