問題タブ [css-transitions]

次のことができる方法はありますか？

左側に標準画像、右側に :hover 状態の画像を示す透明な png スプライトがあります。

css3トランジションのみを使用して、:hoverで左の画像から右の画像に画像をフェードさせる方法はありますか? 次のことを試しましたが、うまくいきません。

さて、上記は背景をアニメーション化し、画像をパンします。パンの代わりに欲しいのは、フェードまたはディゾルブ効果です。

更新: 2 つの要素を作成し、不透明度を個別にアニメーション化する必要がありました。各要素の正確なマージンを指定する必要があるため、少し面倒ですが、うまくいくと思います。みんなの助けに感謝します:)

私はCSS3トランジションに不慣れで、これが可能かどうか疑問に思っています。

次のように、2つの子divを含むdivがあるとします。

私の目標は、リンゴとオレンジのdivの間に新しいdivを追加するときに、2つのdivをアニメーション化して離し、新しいdivが入るようにすることです。

CSS3トランジションを実行する方法を理解することについてはそれほど心配していませんが、私の質問は、コンテナーdiv全体がdomで置き換えられた場合にこれが可能かどうかです。

したがって、私たちの設計により、AJAX応答は、コンテナーに入れる新しいdivだけで応答しません。代わりに、divコンテナ全体を再び返しますが、次のように、中央に新しいdivを含めます。

アニメーション化する要素が置き換えられているときに、これはこのようなものをアニメーション化することは可能ですか？これはjQueryタスクのようなものですか？

それをサポートしていないブラウザのフォールバックとして、cssトランジションとjqueryプラグインを使用します。modernizrを使用してcss遷移サポートを検出したいと思います。このためにライブラリ全体をロードするのはやり過ぎです。css遷移を検出するために必要なコードの部分だけを取得したいのです。modernizrのダウンロードページには、私を混乱させる多くのオプションと追加機能があります。私の質問は、css遷移を効率的に検出するためにどのオプションを選択する必要があるかです。

ほとんどの人は CSS3 トランジションに精通していると思いますが、私は CSS のシンプルさを備えているため、jQuery アニメーションよりもこちらを好みます。私の唯一の後悔は、IE < 9 (いつものように) だけでなく、Firefox < 4、Safari < 4 などでも動作しないことです。IE のためだけに JavaScript で個別のアニメーションを作成するという意味ではありません。しかし、CSSをスキャンし、アニメーションの速度を取得し、アニメーション化する必要があるプロパティを取得し、それらをアニメーション化するソリューションが必要です（jQueryなどを使用）。私はそれを取得しますか？

私が理解している限り、CSS トランジションを使用して実装できるものはありませんが、CSS アニメーションを使用して実装することはできませんが、その逆はできません。

つまり、トランジションには CSS アニメーションと同等のものがあります。たとえば、これ

以下と同等です。

私の質問は、CSS トランジションとアニメーションの両方をサポートするブラウザーについて話している場合、どちらかのアプローチを選択するためのユースケースは何ですか? トランジションに関しては、1 つだけ挙げることができます。それらはより簡潔な構文を持ち、@-moz-keyframes、@-webkit-keyframes などの大量のコードをコピー ペーストする必要はありません。

JavaScript からの制御に関しては、柔軟性と複雑さのアニメーションがはるかに適切なツールです (少なくとも、一見しただけでは)。では、ユースケースとは何ですか？

UPD: OK、質問で見つかった興味深い情報をリストしてみましょう。

• これは Roman Komarov によって寄稿されました。たとえば、div と子 div があるとします。親 div がホバーされている間、子要素を遷移させています。マウスを離すと、遷移はキャンセルされます。このキャンセルの期間は、移行に既に費やした時間とまったく同じです。アニメーションは「すぐに」キャンセルされます。それでも、これら2つの動作がどれほど標準的かはわかりません。

GoogleChromeで奇妙なCSS3移行の問題を発見しa:hoverましたa:visited。（デモ）リンクの背景はオレンジ色で、アクセス後は青色になっている必要があります。カーソルを合わせると、リンクが広くなります。ただし、アクセス後にカーソルを合わせると、移行中にリンクがオレンジ色に変わり、その後青色に戻ります。リンクはまだ残っているので、移行中は青色のままにしておきたい:visitedですよね？
ヘルプ、提案、または喜んで感謝するものは何でも！（jQueryは使用しないでください-CSSのみ）

非常に単純な質問ですが、CSS トランジション プロパティに関する適切なドキュメントが見つかりません。CSS スニペットは次のとおりです。

ご覧のとおり、トランジション プロパティは互いに上書きしています。このままでは、テキストの影はアニメーション化されますが、色はアニメーション化されません。両方を同時にアニメーション化するにはどうすればよいですか? 回答ありがとうございます。

CSS3 の要素にトランジション変換がありますが、アニメーションを実行するたびに、アニメーションに関係する要素の 1 つがアニメーションの間常に非表示になっているようです。

CSS、HTML、および JavaScript コードは次のとおりです。

CSS

JavaScript:

基本的に、アニメーションはdiv.control-con、チェックボックスのステータスに応じて、全体を前後に移動します。Chrome と Safari ではすべて正常に動作しますが、Mobile Safari で実行すると、何らかの理由でアニメーションの実行時に要素span.offと要素が表示されません。span.on

どのスパン要素が非表示になるかは、アニメーションの方向によって異なります。問題のスクリーンショットを次に示します。span.offアニメーションが完了するまで、 が表示されないことがわかります。

また、参照用にこれを jsFiddle に入れました: http://jsfiddle.net/kShEQ/

余白が台無しになるのを防ぐために、関数を再度繰り返すことを許可する前に、CSS トランジションが完了したかどうかを検出する必要があります。

だから私はどのようにカムのようなものを持っていますか