問題タブ [css-transitions]

CSS3を使用して、最上層を左にスライドさせ、最下層を表示するマウスオーバー効果を作成しようとしています。コードはChromeでは機能しますが、Firefoxでは機能しません...もう一度愚かなことをしましたか？ご協力いただきありがとうございます！

編集：トランジションコードを省略しても、Firefoxの「レイヤー」にカーソルを合わせると何も起こらないので、何か間違ったことをしたに違いありません... :(

コード：

スタイル：

画像をゆっくりズームしたい。私のアイデアは Webkit では非常にうまく機能しますが、Firefox では機能しません。誰かがそれを改善する理由または方法を知っていますか?

私は進行状況バー コントロールを作成しています。実際には進行状況が表示されず、「何かが起こっている」というインジケーターが回転するだけの場合に取り組んでいます。私が持っているデザインは、基本的に斜めのストライプを交互に並べたもので、本質的には理髪店のポールのようなものですが、「回転」しています。

レンダリング エンジンにできる限りオフロードすることを期待して、これには CSS トランジションを使用したいと考えています。古いブラウザーをサポートすることは、私にとっては問題ではありません。

だから、私の最初のアイデアは、基本的にこれを行うことでした：

...そして、画面にレンダリングされたら、Javascriptを使用して基本的にこれを行います:

以下に関するパフォーマンス上の問題はありますか?

1. その長い間の移行
2. 持っていbackground-position: -1000000px 0ますか？

または、より良い解決策はありますか？

JQuery addclassはクラスをまったく追加していないため、Webキットの遷移は機能していません。以下の関数では、最初のaddクラスが機能していますが、2番目のクラスは機能していません。何が起こっている。

働き

CSS

クローズされたコンテンツは完全に機能しています。.slidebackはそうではありません。これは私が作った非常によく似たフィドルです。 http://jsfiddle.net/4WmJz/15/

何か案は 。

素晴らしい

jquery スプラッシュ スクリーンを作成しようとしています。ここで完璧なチュートリアルを見つけました: http://tutorialzine.com/2010/11/apple-style-splash-screen-jquery/が、スクリプトの変更に関するヘルプが必要です。 .

現在、ここで表示する場合: http://demo.tutorialzine.com/2010/11/apple-style-splash-screen-jquery/リンゴの画像の上のテキスト画像が変化しますが、フェードインする画像をいくつか追加したいと思います次々と画面に残りますが、チュートリアルの現在のスクリプトとは異なり、1 つの画像がフェードインしてフェードアウトします 画像 #1 をフェードインしたい 画像 #2 で 2 秒間フェードインするなどですが、各画像を保持します画面上。

すべての助けに感謝します。

問題をかなり単純なケースに絞り込みました。これは (少なくとも Chrome では) 機能し、ほとんど画面外にある「ポップアップ」を表示し、右側のスライスを画面に表示します。表示されている部分にカーソルを合わせると、ポップアップ全体がスライドして表示されます。

ただし、その正確な CSS を外部スタイルシートに移動すると、次のようになります。

popout.css:

...効果は同じままですが、ページの読み込み時にポップアップが「飛び出して」表示され、画面から元に戻ります。最初の例のように、html ページの直接スタイルでは<style>、これは起こりません。ポップアップは「画面外」で開始されます。つまり、left: -180px予想どおりです。

これは「スタイルのないコンテンツのフラッシュ」であり、遷移効果のために実際には非常に明白で遅い効果であるという煩わしさが追加されているのではないかと思いますか?

なぜこれが起こるのか、そしてそれを回避するための最もハックな方法は何ですか?

残念ながら、jsfiddle の動作方法が原因で、そこで問題を再現することはできません。

ここにメインページがあります: http://thenozzle.net/

ページ上部のロゴはスプライトで、上下を切り替えて光る効果を与えます。これは、css 遷移と :hover 疑似要素で行われます。

しかし、最近、'projekktor' HMTL5 ビデオ プレーヤーを追加しました。それは非常にうまく機能しますが、ビデオを開始してからロゴにカーソルを合わせると、マウスオーバーするとグリッチアウトします.

また、Google Chrome は ea.com The Battlefield 3 クリップから提供されるビデオを再生しません。Chrome では再生されません。これら 2 つのことが原因で、私は頭がおかしくなりました。それらは関連しているでしょうか？私は何を間違っていますか？

Projekktorホームページ：http ://www.projekktor.com/

ブラウザごとに異なるパフォーマンスを発揮します。Firefox では恐ろしく遅いですが、再生されます。Safari で完璧、CHrome ではまったく再生されませんが、Safari のロゴはグリッチです。何か案は？

CSS3 の使用 CSS ベースの Ken Burns エフェクトが機能しない理由がわかりません。私の最初の試みは、Jquery を使用して新しいクラスを背景画像に追加することでした。

これは機能しましたが、恐ろしくぎくしゃくしています。なので別の方法を検討中です。最初から授業アニメーションで映像を設定していたらどうだろう。私は CSS3 アニメーションに精通しておらず、トランジションのみに精通していますが、その目的は一連の画像に恒久的なクラスを適用して、Ken Burn を常にスムーズにすることです。

挑戦したい人のために素敵な実験場を用意しました。 http://jsfiddle.net/gxUhH/10/

私の初期コードに基づいてすべて設定されています。

何か案は？

素晴らしい

編集 -

非常にスムーズに見えるこれを見つけました。私が見ることができないのは、何が違うのかということです。彼らは代わりに web-kit の翻訳機能を使用していますが、私がそれを試したところ、ジャンプしました。見てください。http://thing13.net/2010/02/css3-ken-burns-effect-2/

このコミュニティの他のメンバーの助けを借りて、CSS3 Ken Burn エフェクトを作成しました。翻訳アニメーションに切り替えるまではぎくしゃくしていました。今はとてもスムーズです。

http://jsfiddle.net/gxUhH/52/

現在の問題は、タッチ スクリーン デバイスでページをスクロールすると、ページがぎくしゃくすることです。おそらく、これは必要な追加の処理能力によるものです。

解決策は、スクロール時にアニメーションを一時停止し、スクロールが完了した後に再び再生することだと思います。これを達成する方法がわかりません。また、この件に関する他の提案もお待ちしております。

上記のフィドルは、すべてが機能していることを示します。現時点ではWebKitのみ。

何か案は？

素晴らしい

実際の例はここで見ることができます。

赤い四角 (表示中) は、緑の四角 (オーバーフローとして非表示) の真上にあります。正方形をクリックすると、両方の色付きの正方形が即座に完全に透明になります。さらに、赤い正方形の高さは 0 に設定されています。これによりトランジションが発生しますが、赤い四角が透明になったためトランジションは見えなくなります。

四角をもう一度クリックする前に、toggle関数を調べてください。JavaScript を見ると、トランジションを発生させることなく、赤い四角の高さが元の値にリセットされることが期待できます。none高さが変更されている間、トランジション プロパティが一時的に に設定されるため、トランジションを抑制する必要があります。

もう一度正方形をクリックします。両方の色付きの正方形は即座に完全に不透明になりますが、赤い正方形は高さが 0 から元の値に移行するにつれて下にスライドします。インライン スタイルによって設定された高さはtoggle、要素が表示されるまで関数によって削除されず、それまでに遷移プロパティもリセットされたかのようです。

リフローをトリガーすると、高さの変更が強制的に適用されるようです。(テストするには、次を含む行のコメントを外しoffsetParentます。) この動作はブラウザー (少なくとも Chrome と Safari、Firefox、および Opera) で発生するため、仕様の一部ではないのではないかと考えています。CSS Transitions Moduleを確認しましたが、成功しませんでした。この動作が発生する理由と、実装全体で一貫している理由はありますか?