問題タブ [css-transitions]

私は持ってい<div>ます：

これ<div>には、ページの完全な本文があります。

私も2つのクラスを持っています:

私は体に1つの画像を持っています:

私が必要としているのは、カーソルが の上に来るとdiv.mover、div#MDiveのクラスがhide2アニメーションで に変化することです。

ie:div#MDiveの背景画像がアニメーション効果で 2 番目の画像に変わります

CSS トランジションが完了したときに (コールバックのような) 通知を受け取ることは可能ですか?

サイトでいくつかの Webkit トランジションを試してみたところ、問題が発生しました。リンクのホバー状態により、1 ピクセルの境界線が追加され、パディングが減少するため、位置が同じに保たれます。通常は正常に動作しますが、トランジションを追加するとうまくいきません。明らかに、1px の変更のみを行っているため、突然発生しますが、同時に発生するわけではありません。境界線の前のパディングが変更されるため、全体が「揺れます」。

これを回避するために私が見つけた最良の方法は、通常の状態に白い境界線を付けて、色を変更するだけにすることですが、透明にしたい. また、白い背景色を設定せずに、背景色を黒ではなく白からフェードインする方法はありますか? 繰り返しますが、透明にしたいのですが、灰色になってから黄色になるのは奇妙に見えます!

ナビゲーション メニューにもトランジションがあり、同じことが起こります (今回はパディングとマージンを変更します)。

うーん、値を少し上げてみましたが、線形トランジションを使用してマージンとパディングを 15 ピクセルずつ変更しても、小さな (1 ピクセルまたは 2 ピクセルのように見える) 不具合が発生します。同じことがサファリとクロームで起こります。

スムーズにする方法はありますか？それとも色の問題を整理しますか？jquery で実行したほうがよいと思いますか (クロスブラウザーのサポートを無視して!)? オペラで同じことが起こるかどうか見に行くかもしれません...

編集：Mac用の10.5aオペラリリースはまだトランジションをサポートしていないようです...

CSS3 のトランジションでフェードインする CSS ツールチップを試してみました。リンクにカーソルを合わせるとツールチップが表示されますが、CSS3 のみを使用してフェードインするツールチップ効果を目指していました。

ある程度までは動作していますが、何らかの理由で、本来あるべき場所にカーソルを合わせると、最初に配置されているにもかかわらずアクティブになりますleft:-999px;。

基本的に、私は何が間違っているのですか/私がしようとしていたことは可能ですか? (私は JS/JQuery で何もしたくないことに注意してください。CSS でできるかどうか知りたかっただけです)

ここでそれを見て遊ぶことができます。

サイトで CSS3 トランジションを使用していますが、-webkit- は機能しているようですが、-moz- は機能していません。

CSSは次のとおりです。

jQuery を使用して、mousedown クラスを記事に追加するだけです。

私が間違っているところはありますか？

css3トランジションが開始または終了したかどうかを確認するために、要素によって発生するイベントはありますか?

CSS：

HTML：

目的は、クラス「bananaClass」を持つすべての要素に、HTMLを編集したりJavaScriptを使用したりせずに、「bananaTrans」のプロパティを継承させることです。

それ（ "bananaTrans"）は、正確にクラスである必要はありません。他のセレクターの中で使用されるプロパティの集まりにすぎません。

Webkit CSS3 を使用して、左右の CSS プロパティを変更することにより、ボタンが押されたときに画面上のある場所から別の場所に絶対配置された DIV を移動しようとしています。ただし、私が見たこれを行うためのすべての例では、静的な CSS ルールを使用してこの遷移を適用しています。

事前に新しい位置がわからないので、この CSS3 トランジションを動的に適用するにはどうすればよいですか?

..現在はスクロールアップ/ダウン効果がありますが、フェード効果で背景を変更したいのですが、CSSで何を変更すればよいですか?

ありがとう！

現在、CSS の「メガ ドロップダウン」メニューを設計しています。基本的には通常の CSS のみのドロップダウン メニューですが、さまざまな種類のコンテンツが含まれています。

現時点では、CSS 3 トランジションは「display」プロパティには適用されないようdisplay: noneです。つまり、 to からdisplay: block(または任意の組み合わせ)へのトランジションを行うことはできません。

上記の例の第 2 層のメニューが、最上位のメニュー項目の 1 つにカーソルを合わせたときに「フェードイン」する方法はありますか?

visibility:プロパティでトランジションを使用できることは承知していますが、それを効果的に使用する方法が思いつきません。

高さも試してみましたが、惨めに失敗しました。

JavaScript を使用してこれを実現するのは簡単なことだとも認識していますが、CSS だけを使用することに挑戦したかったので、少し不足していると思います。