CSS連続アニメーション

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

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

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

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

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

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

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

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

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

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

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

css - CSSカルーセル切り替えアニメーション

図のように、JSで書いたアニメーションに過剰なエフェクトを設定するとこのような状況が発生しますが、JSではこの状況をどう変えることができるのでしょうか？ {コード...}

習慣沉默 2017-06-12 09:33:00 0  1  872

CSS - アニメーションの色の変更の問題

これは初期のカラー値です。詳細についてはデモを参照してください。しかし、アニメーション効果を書いた後にカラー値が変わります。これはなぜですか?アニメーションのカラーを初期値のカラーと一致させるにはどうすればよいですか?

世界只因有你 2017-06-28 09:27:36 0  1  1213

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

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

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

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

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

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

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

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

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

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

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

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

Javascript Html CSS ロード時の数値カウンター アニメーション プリローダー ウィンドウ

自分のポートフォリオ Web サイトでナンバーカウンターのアニメーションを作成したいと考えています。私の古いWebサイトには、完全にロードされたときにプリローダーからWebサイトに移行するjqueryコードがいくつかあります。 <script>$(window).on('load',()=>{$('#preloader').fadeOut(1800,function(){$(this).remove();});}); </script>数字カウンターのアニメーションを追加し、側面の向きを追加する方法

P粉523625080 2023-09-11 22:37:54 0  1  641

CSSアニメーションは消えません

ホバーすると背景画像がフェードインおよびフェードアウトするという単純なアニメーションの問題を解決しようとしています。キーフレームを定義したにもかかわらず、Web ブラウザにはそれが未定義として表示されます: .elementor-section.elementor-element.core-range>.elementor-container:hover.product-image::before{animation:coreRangeBackground0.3sease-in -out0。

P粉352408038 2023-08-18 16:45:01 0  1  556

モバイル上のボタンがフォーカスまたはアクティブのままになり、CSS アニメーションで問題が発生する

ボタンをクリックするたびにアニメーションを実現しようとしていますが、デスクトップでは正常に動作しますが、モバイルでは同じ効果を実現できません。最初にボタンをクリックし、次に別の場所をクリックして CSS のフォーカスを解除し、次にボタンをもう一度クリックしてアニメーション効果を得る必要があります。以下はコードスニペットです。 .btn_container{color:#35f8ff;position:relative;display:inline-block;text-align:center;margin:2.5remauto

P粉043295337 2023-08-28 15:14:37 0  1  511

リアクティブなモーダル スライド アニメーション

ReactとCSSでモーダルを実装しました。現在、モーダルを開くと、モーダルが下から上にスライドするスライドアップアニメーションを実装していますが、閉じるときにスワイプして下に移動したいのですが、方法がわかりません下にスワイプするアニメーションを正確に作成するために、誰か手伝ってくれませんか?コード=>import"./styles.css";importreact,{useState}from"react";exportdefault

P粉514458863 2023-08-30 22:49:29 0  1  566

svgアニメーションとcss3アニメーションの長所と短所は何ですか?

RT、トランジション アニメーション効果はどのような状況で、どのソリューションに適していますか?

曾经蜡笔没有小新 2017-05-16 13:21:17 0  1  637

スクロール進行アニメーション

スクロールの進行状況をアニメーション化する方法を知る必要があります。これは通常のスクロールの進行状況ではなく、何かが異なります。 Web サイトへのリンクと、探しているアニメーションが含まれる特定の部分のスクリーンショットを提供します。 https://todoist.com/これはウェブサイトへのリンクです。ウェブサイトのホームページの特定のセクションのスクリーンショットを添付しました。ページがスクロールされると、セクション内でスクロールが発生し、セクション自体もスクロールします。スクロールのそのセクションが完了したら、通常どおりスクロールを続けます。プログレスバーのスクロールに関するチュー...

P粉821808309 2024-03-29 19:36:49 0  1  401

Tailwind CSS の React ドロワーコンポーネントの閉じるアニメーションの問題を解決する方法

私の React プロジェクトでは、tailwindCSS も使用し、メニューのアイコンをクリックした後にドロワーを開く機能を実装しました。問題は、私の実装では終了アニメーションが失われることです (開始アニメーションは通常のままです)。このコンポーネントを見てみましょう: importReact,{useState}from'react';import{Link}from"react-router-dom";import{PlusCircleIcon}from&quot;

P粉545682500 2023-08-13 10:44:01 0  1  580

javascript - jq の 1 つのメソッドとアニメーション化されたイベントに関する質問

{コード...} 連続アニメーション イベントを記述し、イベント リスナーを追加します。このアニメーションが実行された後、クラスを追加することで次のアニメーションが実行されます。ここでの問題は、アニメーションの実行が完了した後に最初のフリップ イベント リスナーのみがトリガーされ、後続のイベント リスナーはアニメーションの実行が開始されるときにトリガーされることです。

某草草 2017-06-28 09:24:27 0  1  601

Vue.js で、ボタンをクリックしてアニメーションをランダムに生成します

3 つの Lottie プレーヤー JSON アニメーション ファイルがあります - congratulations1.json、congratulations2.json、congratulations3.json アニメーションは次のとおりです。 Congratulations 1: <lottie-playerv-if="showPlayer1" class="justify-content-center" src=" . ./../../

P粉722521204 2024-03-27 23:57:52 0  1  374

JavaScript - 2 つのスワイパーがネストされており、外側のスワイパー アニメーションが初期化されると、アニメーション要素は非表示になり、表示されません。

初期状態：2ページ目にスライドしてから元に戻すと、アニメーション要素が表示され、アニメーションが正常に再生されます JSコード

我想大声告诉你 2017-05-19 10:32:28 0  1  761