問題タブ [css-animations]

マーキー プラグインを div で使用しようとしていますが、その方法がわかりません。

ここのテスト ページにアクセスすると、2 つのゆっくりと移動する div があり、1 つは左に、もう 1 つは右に、待機し続けると、ページから徐々に消えていくことがわかります。

Marquee プラグインを使用すると、これを修正できると思いますが、プラグインが十分に文書化されていないように見えるため、このコードでは成功しません。

このコードが機能しないのはなぜですか?

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

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

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

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

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

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

次のCSS3アニメーションがあるとします。

Hello Worldテキストは、期待どおりに100pxドロップダウンしてアニメーション化します。ただし、アニメーションの終了時に、元の位置にジャンプして戻ります。

明らかに、これはCSSlandでは理にかなっています。アニメーションが適用され、要素に作用しなくなったため、元のスタイルが有効になります。しかし、私には少し奇妙に思えます-確かに、要素を所定の位置にアニメーション化する場合、その配置が持続することを期待しますか？

変更されたプロパティを修正するために、アニメーションの最後にある要素にクラス名またはスタイルをタグ付けするためにJavascriptに頼る必要なしに、終了位置を「スティッキー」にする方法はありますか？トランジションが持続することは知っていますが、問題のアニメーション（例はデモンストレーションのみを目的としています）では、トランジションは必要なレベルの制御を提供しません。これがないと、複雑なアニメーションは、要素が元の状態に戻る循環プロセスにのみ役立つようです。

重複の可能性:
Webkit CSS アニメーションの問題 - アニメーションの終了状態を保持していますか?

画面を反転するための 2 段階のトランジションを作成したい: 私のコードは次のようなものです:

Flippingto は機能しますが、flippingfrom はアニメーションの終了後に元のクラスに戻ります。

これは、javascript を追加する必要があるということですか?

クリックで4つの部分からなるCSS3アニメーションを再生していますが、アニメーションの最後の部分は、画面から外すためのものです。

ただし、再生すると常に元の状態に戻ります。誰もが最後のcssフレーム（100％）で停止する方法、または再生後にdiv全体を削除する方法を知っています。

私はアニメーションに少し慣れていないので、ここで大きなコンセプトが欠けている場合はご容赦ください. 曲線上の点を指している矢印をアニメーション化する必要があります。この投稿のために、それが 3 次曲線であるとしましょう。矢印は曲線の線に沿って移動し、常にその数ピクセル下を指します。

だから私がしたことは、CSS3を使用して曲線の線に沿ってキーフレームを設定することです:

ただし、-webkit-animation-timing-function: ease-in を使用してこのアニメーションを実行すると、そのイージングが個々のキーフレームに適用されますが、これは明らかに私が望んでいるものではありません。アニメーション全体にイージングを適用したい。

これを行うべき別の方法はありますか？各キーフレームではなくシーケンス全体にイージングを適用するプロパティはありますか?

css3アニメーションの場合にコールバック関数を実装する方法はありますか? Javascript アニメーションの場合は可能ですが、css3 でそれを行う方法が見つかりません。

私が見ることができる1つの方法は、アニメーションの持続時間の後にコールバックを実行することですが、アニメーションが終了した直後にコールバックが常に呼び出されることを保証するものではありません. ブラウザの UI キューに依存します。もっと堅実な方法が欲しい。どんな手掛かり？

CSS3 transitions, transforms and animations are wonderful. They are even more now more browsers do support them.

Still there's one thing I keep asking myself: Why isn't the spec definining that CSS3 transitions and animations should handle height:auto?

It doesn't make any sense when we're moving away from fixed layouts with things like the CSS3 flexible box model and media queries.

It doesn't make any sense to use JavaScript just to set a CSS transition with a fixed height.

Now comes my question:

Will the W3C ever specify that height:auto should be supported for CSS3 transitions and animations or can we request them to specify this?

CSS3 3D 変換 + アニメーションは素晴らしいです。何かを曲げる方法があるかどうか疑問に思っています。

この例では (紙の) div をひっくり返しますが、実際には紙をひっくり返すと少し曲がるので、アニメーションが硬く見えます。

それで、私が見落とした特性、または曲がったように見える組み合わせはありますか?

曲げを伴うページ カールの例 (イメージ): http://numerosign.com/software/css3machine/#documentation

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

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

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

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

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

何か案は？

素晴らしい