CSS連続アニメーション

次の CSS コードがあります。問題は、アニメーションが希望どおりに動作するのですが、10 秒が経過するとリセットされてしまい、見苦しいことです。理想的には、再起動する代わりに画像をラップし、画像の左側がキャンバスから出たときに右側から戻ってくる無限アニメーションを実現したいと考えています。 @keyframesscrollRight{0%{背景の位置-x:30%;}100%{背景の位置-x:130%;}}.onrir{背景

P粉928591383 2024-03-20 12:30:42 0  1  495

CSS アニメーション名の具体的な意味は、アニメーションの塗りつぶしモードを指します。

最近、CSS を使用して、特定のクラスの不透明度が 0% から 100% になるアニメーションを作成してみました。しかし、class="bar" のアニメーションでいくつかの問題が発生しました。 anime-fill-mode はタイトル アニメーション (不透明度を変更します) だけでなく、バ​​ー アニメーションにも適用されることがわかります。アニメーションフィルモードにアニメーション名を指定する方法はありますか?作成に使用したコードは次のとおりです。 @keyframestitle{から{-私たち

P粉441076405 2023-09-13 10:16:28 0  1  561

クラスを削除するときに CSS アニメーションが停止しないようにする方法

グリッドがあります。バックエンドから更新メッセージを受信したら、3 秒以内に行をオレンジ色で強調表示する必要があります。更新を受信したら、CSS クラス「ハイライト」を行に追加し、アニメーションを再生します。 .highlight{アニメーション名:ハイライト;アニメーション期間:3 秒;}@keyframeshighlight{0%{背景色:オレンジ;}99.99%{背景

P粉412533525 2023-08-29 16:15:06 0  1  525

JavaScript - モバイルCSSアニメーションの再生状態の一時停止がiOSでは機能しませんanimation-play-state

モバイル CSS アニメーションの再生状態の一時停止が、iOS では機能しません anime-play-state 画像をクリックして停止し、画像をクリックして回転を続けたいと考えています。これは Android スマートフォンでは実現できますが、iOS では、画像を初めてクリックすると、静止した動きはせずに回転し続けます。代わりに、2 回目にクリックすると...

给我你的怀抱 2017-06-26 10:53:05 0  1  1251

JavaScript - CSS アニメーションに関する問題は何ですか?

リフローと再ペイントに関する記事 http://blog.csdn.net/ClaireKe... を読みました。いくつか疑問があります: 1. ブラウザのメカニズムでは、更新操作にはリフローと再描画が含まれる必要がありますか? 2. ページに `div { {code... などの CSS アニメーションが含まれている場合

为情所困 2017-05-18 10:49:05 0  1  681

html5 - CSSアニメーションを使用した説明：ボールが上下に跳ね返ります（継続時間2秒、1回実行）

CSS アニメーションを使用して説明: ボールが上下に跳ね返ります (持続時間 2 秒、1 回実行)

巴扎黑 2017-05-16 13:44:36 0  2  722

CSS アニメーションを終了時に最終状態に保つ

CSS で opacity:0; に設定されているいくつかの要素でアニメーションを実行しています。キーフレームを使用してアニメーション クラスが onClick イベントに適用され、不透明度が 0 から 1 に変更されます (その他の変更もいくつかあります)。残念ながら、アニメーションが終了すると、要素は不透明度: 0 の状態に戻ります (Firefox と Chrome の両方)。私の直感では、アニメーション化された要素は最終状態に残り、元のプロパティがオーバーライドされると考えています。これは本当ではないでしょうか？そうでない場合、要素を最終状態に保つにはどうすればよいでしょうか?コード ...

P粉950128819 2023-08-20 18:36:55 0  2  670

React とインライン CSS を使用した Apple アニメーションの問題

HTML と CSS、インライン スタイルと TypeScript を使用して、React でこのアニメーションを再作成しようとしています。スタイル情報を含むオブジェクトを作成し、それを style 属性で参照しています。以下はコードです。動作しません。何が間違っているのかわかりません。スタイルが正しく定義および参照されていないのではないかと思います。これは私が書き直そうとしている元の Codepen の例です: Apple アニメーション これは私のコードです importReactfrom'react';conststyles={'@keyframesshow

P粉729436537 2024-01-10 17:08:30 0  1  351

javascript - 奇妙な問題が見つかりました。タブを閉じると、作成した CSS アニメーションが自動的に一時停止されました。

奇妙な問題が見つかりました。私が作成した CSS アニメーションは、タブを閉じると自動的に一時停止し、タブを展開すると再生し続けます。動きの効果を出すために背景画像を動かして使っているのですが、これと関係があるのでしょうか？

给我你的怀抱 2017-06-30 09:52:30 0  1  860

後続のクラスが要素に追加されるたびに CSS アニメーションを実行する方法

要素をアニメーション化できるように CSS アニメーション クラスを設定しました。入力ボタンがクリックされるとこのクラスが追加され、例の入力ボタンがクリックされるたびに画面に飛ぶようにしたいです。ただし、これは初回のみ機能し、それ以降の入力クリックでは要素はアニメーション化されません。ここで何が足りないのでしょうか？ $(document).ready(function(){jQuery('#cloc').click(function(){jQuery('p').removeClass('anim

P粉714780768 2023-09-09 22:36:42 0  1  560

ターンテーブル上のガラスファサードの動きをシミュレートする、左から右に近づいたり遠ざかったりする CSS アニメーション

正面から見たときのターンテーブル プレート上のガラスの動きをシミュレートし、近づいたり遠ざかったりしながら左から右に水平に移動する CSS アニメーションを作成しようとしています。近づいていますが、まだ正しく見えません。現在、円ではなくひし形に沿って移動しているように見えます。これが私が試したことです... roll{display:block;width:100px;height:100px;background:red;margin:10pxauto10pxauto;animation:ro

P粉208469050 2023-09-04 21:59:55 0  1  569