シンプルなCSSアニメーションのtransition属性の詳しい説明

シンプルなCSSアニメーションのtransition属性の詳しい説明

1. 遷移属性の理解

1. transition 属性は、次の 4 つの遷移プロパティを設定するために使用できる短縮属性です。

transition-property トランジション効果の CSS プロパティの名前 (高さ、幅、不透明度など)。
transition-duration トランジション効果が完了するまでにかかる時間。
transition-timing-function は、速度効果の速度曲線を指定します。
transition-delay トランジション効果がいつ開始するか(遅延時間)。

注意: transition-duration プロパティが 0 の場合、遷移効果は発生しません。

2. 勾配関数の値:

グラデーション関数は遷移タイミング関数です。

ベジェ曲線のプリセット値

イージーは徐々に増加し、速度は一定、キュービックベジェは遅くなります (0.25、0.1、0.25、1)
イーズイン 徐々に速く、一定の速度 キュービックベジェ (0.42, 0, 1, 1)
等速でイーズアウト、キュービックベジェを遅くする (0,0,0.58,1)
easy-in-out は、ease に似ていますが、ease よりも加速度(振幅)が大きくなります。cubic-bezier(0.42,0,0.58,1)
3次ベジェ曲線全体で線形均一速度 (0,0,1,1)

3. 略語: transition: css 属性名 遷移時間 グラデーション関数値 遅延時間;

2. 簡単なアニメーション操作例

1. まず2枚の画像を挿入する

<div class="A">
        <img src="img/薬を飲む.jpg" alt="">
        <img src="img/main_bg.jpg" alt="">
    </div>

2. 画像のスタイルを設定する

<スタイル>
        .A {
            マージン: 自動 100px;
            高さ: 400px;
            幅: 600ピクセル;
            位置: 相対的;
        }
        .A 画像:n番目の子(1) {
            高さ: 300px;
            幅: 300ピクセル;
            位置: 絶対;
        }
        .A 画像:n番目の子(2) {
            高さ: 300px;
            幅: 300ピクセル;
            位置: 絶対;
            遷移: 不透明度 3 秒、イーズイン 2 秒;
        }
        .A img:nth-child(2):ホバー{
            不透明度: 0;
        }
        画像 {
            高さ: 300px;
            幅: 300ピクセル;
        }
        </スタイル>

3. 得られるアニメーション効果は次のとおりです。

要約する

以上は、エディターが紹介したシンプルな CSS アニメーションの transition 属性の詳細な説明です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  jQueryメソッド属性の詳細な説明

>>:  Windows で nginx を素早くインストールし、自動的に起動するように設定する

推薦する

重複リクエストを削除するAxiosのソリューションについての簡単な説明

目次1. 重複したリクエストをキャンセルする2. すべてのリクエストをクリーンアップするこのソリュー...

Firefox ブラウザでバックグラウンド ミュージックを再生するための究極のソリューション (Chrome マルチブラウザ対応)

FirefoxでBGMを再生するための推奨コードがテストに合格しました空のコントロールパネルを開いて...

Ansible を使用した Nginx のバッチ デプロイのサンプル コード

1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...

マウスがカード上に移動したときにフローティング効果を実現する CSS の使用例

原理ホバーしたときに要素に影を設定します: box-shadow で、通常とは異なるスタイルにします...

Linux リモート コントロール Windows システム プログラム (3 つの方法)

場合によっては、Windows システム上のプログラムを Linux 上でリモートで実行する必要があ...

MySQL 8.0.17 のインストールと使用方法のチュートリアル図

前面に書かれた過去および現在のプロジェクトで最も一般的に使用されているリレーショナル データベースは...

Hタグはウェブページ制作において適切に使用すべきである

HTML タグには、ページのタイトルを処理するための特別なタグがあります。これらは h1、h2、h3...

Tomcat でタイムアウトしたセッションを監視および削除する方法

序文偶然、30 分の Tomcat セッション時間は、セッションが作成された後、30 分間のみ有効で...

vue3 を使用したジグソーパズルゲームのリファクタリングの例

序文プロジェクト内のパズルゲーム(デジタル華容路とも呼ばれる)を再構築するのに 2 日かかりました。...

Vue.js の計算プロパティ、監視プロパティ、ライフサイクルの詳細な説明

目次序文計算されたプロパティ計算プロパティの紹介入門ケース統計価格事例ゲッターメソッドとセッターメソ...

UCenter ホームサイトに統計コードを追加

UCenter Homeは、ComsenzがリリースしたSNSサイト構築システムです。最新バージョン...

Angularコンポーネントの仲介モードの詳細な説明

目次1. 仲介業者モデル2. 例1. 見積コンポーネントに購入ボタンを追加する2. 親コンポーネント...

CSS と JS を使用して下線効果を実装する方法の例

この記事では、主に 2 種類の下線の動的効果について説明します。1 つ目は、ホバーすると X 軸が内...

Linux (Centos7) での redis5 クラスターの構築と使用方法の詳細な説明

目次1. 簡単な説明2. クラスターを作成する手順2.1. ディレクトリを作成する2.2. ソースコ...

Nginx コンテンツ キャッシュと共通パラメータ設定の詳細

使用シナリオ:プロジェクトのページでは、頻繁に変更されず、個別のカスタマイズも伴わない大量のデータを...