問題タブ [css-animations]

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

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

以下と同等です。

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

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

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

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

キーフレームを使用すると、要素がDOMに挿入されるとすぐにアニメーション化することができます。CSSのサンプルを次に示します。

DOMから削除される直前に、要素にアニメーションを（CSSを介して、JavaScriptを使用せずに）適用するために使用できる同様の機能はありますか？以下は、私がこのアイデアを試してみたjsFiddleです。解決策を知っている場合は、遠慮なくフォークしてください。

jsFiddle- http: //jsfiddle.net/skoshy/dLdFZ/

ページ上のテキストのアニメーションを作成しようとしています。このアニメーションは、数秒ごとに、ある単語をリストの別の単語に変更します。例：「これはかっこいい」というヘッダーがありますが、「かっこいい」を数秒ごとに「neat / awesome / groovy/etc」に置き換えたいと思います。

私は正直なところ、これを実行するための最良の方法（使用するテクノロジーの観点から）がわかりません。また、最新のブラウザーで機能するコードの宣伝文句を見つけることができません。ヘルプは大歓迎です！

なぜこれが機能しないのですか？私は何を間違っていますか？

CSS

デモ

http://jsfiddle.net/hAGKv/

前もって感謝します！

ポップアップ ウィンドウ用の .show クラスが JS 経由で追加されたときに、キーフレーム アニメーションを有効にしたいと考えています。ただし、アニメーションはページの読み込み時にのみアクティブ化されています。

これが私が持っているJSコードです。

私のCSS

ショークラスが追加されたときにアニメーションがアクティブになるようにするにはどうすればよいですか。

キーフレームなしで css に複数の -webkit-transition アニメーションをチェーンしようとしています。

キーフレームアニメーションを呼び出すとそれが可能であることはわかっていますが、プロパティを上書きしたいだけで、このJSの何かが機能しません:

これがフィドルです： http://jsfiddle.net/a2co/Tn9mT/25/

Webkitトランスフォームを使用して、テキストを左から右にスライドさせようとしています。これを行うために使用できることはわかっ<marquee>ていますが（廃止されても）、キーフレームを使用してアニメーションをより適切に制御する必要があります。以下のCSSはテキストをどの方向にも動かしていないようで、その理由は想像できません。

HTML：

CSS：

次の CSS は Webkit で正常に動作します。Opera では確認していませんが、Firefox では動作しないことがわかっています。理由を教えてもらえますか？

正しいクラスが確実に HTML に適用されています (Firebug で調べたところ、 の-moz-animation: 500ms ease 0s normal forwards 1 arrowRotateDotプロパティが表示されます.arrow)。

これもIE9では機能しませんが、もともと持っていた-ms-animation:...と-ms-transform:.... IE9 で動作するはずだと思っていましたが、そうでないときは、IE がまだこれらをサポートしていないと思い込んでいました。ただし、Firefox では機能しないため、別のことが起こっている可能性があります。

アニメーションをアニメーションの途中で停止させて、デフォルトの状態に正常に戻そうとすると、小さな問題が発生します。親要素の疑似クラスを使用して子要素にアニメーションを適用していますが、要素に:hoverカーソルを合わせるのをやめると、アニメーションがデフォルトの状態に正常に戻るようにしたいと考えています。ここで疑似クラスを使用するべきではないと感じており、:hover別のアプローチ方法がありますが、それをオフに遷移させる方法がわかりません。アニメーションが取り除かれているため、これはもちろん理にかなっていますが、それは望ましい効果ではありません。これは現在の HTML です:

そして現在のCSS

要約すると、ホバリングすると、画像の上に白い点滅効果があります。「オフ」にスナップするのではなく、ホバリングを停止したときに、アニメーションを元のキーフレームに戻したいです。HTML または CSS のいずれかを変更できます。それを機能させる方法に制限はありません。

CSS アニメーションを勉強していますが、質問があります。

これは私の例です：

http://jsfiddle.net/MBJbB/ 注: WebKit ブラウザーでのみ動作します。

私は2つのキーフレームを持っています。「最初」を3回繰り返すように設定しました。

3回の「最初」のキーフレームを実行した後、「2番目」のキーフレームを無限に呼び出したいと思いました。