問題タブ [webkit-animation]

アニメーション化する@-webkit-keyframeのセットがある要素があります。ページの読み込み時に、これらのキーフレームが実行され、イントロは見栄えがします。

次に、ホバーに@ -webkit-keyframeの2番目のセットがあり、繰り返すように設定しているので、ホバーすると、その要素にループアニメーションがあります。それもうまくいきます。

ただし、マウスを要素から離すとすぐに、最初の（イントロ）キーフレームのセットが再び実行されます。最初に実行した後に実行したくありません。CSSでこれを防ぐ簡単な方法はありますか？

私が持っているものの最小限の例

また、1500以上の評判を持つ人がタグを編集して、webkit-animationタグを追加できますか？まだ作成されていないなんて信じられない…：\

キーフレームアニメーションを書きました：

次の html とクエリ コード コードを使用して作成した四角形でこのアニメーションを実行したいと思います。

問題は、ボタンをクリックしても何も起こらないということです。私はjqueryがあまり得意ではないので、それが問題かもしれません。

ご助力ありがとうございます！

マット

webkit-animation complete にコールバックはありますか? 例を見る

しかし、このコールバックは機能しません

こんにちは、別の div をクリックして css3 -webkit-animation-play-state を一時停止から実行に変更する方法を見つけようとしています。誰も私がこれを行う方法を知っていますか?? JavaScriptを使用する必要があると思います。

Iv'eは、iPadやその他のタブレット用のウェブアプリを作成しており、適切で効率的なポジショニングとアニメーションに関する限り、多くのビューポートの問題が発生しました。私は最近、すべてのフリーフローティング要素に-webkit-transformを使用するというアイデアを思いつきました。私の質問は、CSS仕様によって提供される変換を使用することは、たとえば要素内のlrtb値を変更するよりも、スムーズで信頼性の高いアニメーションに適してposition:relativeいるでしょうか？ ハードウェアアクセラレーションをオンにすると、特に向きの変更中に、移動する要素でランダムな点滅が発生します。（絶対に配置された要素）それで、注目すべきブログがこの方法を使用していないので、それが悪い考えであるいくつかのプロのヒントの理由があるかどうかを確認したいと思いました。

画像コンテンツがあるdivがあります。画像をクリックしたときにアニメーションを実装したいのですが、最初のクリックでのみ実行され、画像の次のクリックは効果がありません。問題とは何ですか。どうすれば解決できますか？

と

Android 4.x ブラウザー/webview でアニメーションを停止または一時停止することがほとんどできません。-webkit-animation-iteration-count を無限に設定しましたが、Chrome/Safari で停止しても問題ありませんが、要素にアニメーション化された子がある場合、Android では失敗します。

私のHTML：

私のJS：

このfiddleで問題を確認できます。コンテンツの停止 (アニメーション クラスの削除) のコメントを外すと、アニメーションを停止できます。

私が理解できないバブルの問題かもしれないと思いますか？それともAndroidのバグですか？代わりにJSを介してスタイルを直接操作し、クラスを変更する代わりにwebkitAnimationPlayStateを一時停止に設定しようとしましたが、何も変わりません。

フィドルはAndroidのChromeでは機能しますが、ストックブラウザでは機能しないことに注意してください.webviewのために必要です。

モバイル Web サイトの css3 読み込みアニメーションを作成しています。ローダーは、次の HTML / CSS を使用して問題なく動作します。

HTML:

CSS:

ただし、モービル サファリでアニメーションを表示すると、ページがスクロールまたはタッチされるとアニメーションが一時停止します。ユーザーがページをスクロールしている場合でも、アニメーションを継続する方法はありますか?

ありがとう！

Webkit アニメーションを使用して単純な雨の効果を適用しようとしています。iPad 2 では問題なく正常に動作しますが、新しい Retina ディスプレイ iPad では動作が非常に遅くなります。

iOS で 3D 変換を使用してハードウェア アクセラレーションをトリガーするという言及を見たことがありますが、このクラスに直接適用するとアニメーションが停止します。これらが違いを生むかどうかさえわかりません。

この質問は、 iOS Webkit animation performance has only on retina displayの複製である可能性があることは承知していますが、それはずっと前に尋ねられ、実際の結論はありませんでした。

この問題の解決策はありますか? または、パフォーマンスをわずかに向上させるものはありますか?

次のような div で -webkit-animation を使用しています。

キーフレームで;

私の質問は、私が理解している限り、これは1回限りのアニメーションである必要があるということですが、jQueryを使用してdivをfadeOut/hideおよびfadeIn/showすると、毎回ルールが追加されるため、divが表示されるたびにアニメーションが実行されますまたはフェードイン。

これは WAD ですか、それとも何らかのバグですか?、この動作を回避する方法はありますか?

アニメーションを一度だけにしてから、毎回アニメーションをトリガーせずに div で再生したいと思います。

わかりました。