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

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

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

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

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

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

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

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

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

CSS連続アニメーション

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

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

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

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

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

javascript - 遅延を使用しない場合は非常にスムーズであるのに、アニメーションを遅延させるためにanimation-deferまたはsetimeoutを使用するとアニメーションが停止するのはなぜですか?

1. 遅延にanimation-deferまたはsetimeoutを使用するとアニメーションの遅延が発生するのはなぜですか?遅延を使用しないと非常にスムーズです.800kの画像を移動しています.遅延は常にスタックするという意味ではありません.たとえば、以下に示すようにアニメーション: 0.9 秒イーズインアウトを前方に移動します。...

PHP中文网 2017-05-24 11:37:02 0  1  813

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

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

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

JavaScript - トランジションの高さの自動トランジションアニメーション

1. 縮小時にアニメーション効果がないのはなぜですか? 2. コード {code...} 3. オンライン デモ (解決済み)

大家讲道理 2017-05-16 13:21:31 0  3  825

CSSを使用してグラデーションアニメーションを作成する方法

複数の色のグラデーションを滑らかに動かしたいのですが、問題はアニメーションが滑らかではないことです。ステップごとに位置が変わるだけです。 <スタイル>.animated{幅:300px;高さ:300px;ボーダー:1pxsolidblack;アニメーション:gra5sinfinite;アニメーションの方向:逆;-webkit-animation:gra5sinfinite;-web

P粉909476457 2023-09-18 09:47:10 0  2  766

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

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

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

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

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

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

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

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

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

javascript - ページの読み込みアニメーション効果が表示されない？

1. 現在取り組んでいるプロジェクトはデータ テーブル ページですが、バックグラウンド クエリに時間がかかるため、ユーザー エクスペリエンスを向上させるために、読み込みアニメーションが追加されています。アニメーションを読み込むためのプラグインには問題はありませんが、メソッドの実行中にアニメーション効果が存在しないことがわかります。 2. コードを直接貼り付けます。 jsを始めましょう...

迷茫 2017-05-19 10:18:28 0  4  715

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  677