シンプルな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 を素早くインストールし、自動的に起動するように設定する

推薦する

Ubuntu Server でのワイヤレス ネットワーク カードの詳細な設定

1. ワイヤレス ネットワーク カードを挿入し、コマンドiwconfigを使用してワイヤレス ネット...

MySQL インデックスの左端原則のサンプルコード

序文最近、MySQL のインデックスについて読んでいました。結合されたインデックスを見ると、左端の原...

MySQL タイムスタンプ比較クエリで遭遇する落とし穴と解決策

目次タイムスタンプ比較クエリで遭遇する落とし穴タイムスタンプクエリ範囲の問題タイムスタンプ比較クエリ...

Linux で lvm 論理ボリューム パーティションのサイズを調整するチュートリアル (xfs や ext4 などのさまざまなファイル システム用)

序文システムをインストールしたときに、パーティション領域を適切に割り当てませんでした。その後のメンテ...

Ubuntu で nvidia グラフィック ドライバーをインストールする (簡単なインストール方法)

Ubuntu で nvidia グラフィック カード ドライバーをインストールします。同じ方法で ...

userdel コマンドを使用して Linux ユーザーを削除する方法の詳細なチュートリアル

セルデルとは何かuserdel は、ユーザーを削除するための低レベルのツールです。 Debian で...

Dockerとiptablesとブリッジモードのネットワーク分離と通信操作の実装

Docker は、ブリッジ、ホスト、オーバーレイなどの複数のネットワークを提供します。同じ Dock...

Vue3 (V) HTTPライブラリaxiosの統合の詳細

目次1. axiosをインストールする2. アクシオスの使用1.ホームページでaxiosを参照する2...

Bツリー挿入プロセスの概要

前回の記事 https://www.jb51.net/article/154153.htm では、B...

Docker 経由で CentOS コンテナを作成する手順

目次序文コンテナ間の通信を容易にするためのブリッジネットワークを作成するCentOS7イメージを使用...

MySQL SQL文を最適化するためのヒント

十分に最適化されていない、またはパフォーマンスが極端に低い SQL ステートメントに直面した場合、通...

SpringBoot と Vue の相互作用におけるクロスドメイン問題の解決策

目次ブラウザ同一生成元ポリシー1. VUEフロントエンド構成プロキシはクロスドメインの問題を解決しま...

Nginx ロケーションマッチングルールの例

1. 文法 場所 [=|~|~*|^~|@] /uri/ { ... } 2. 説明上記の構文から、...

HTML のメタタグの簡単な比較

メタ タグは、ファイル情報を定義し、検索エンジンによる検索を容易にするために Web ページ ファイ...

アルバムと写真をアルバムに保存するためのWeChatアプレット

私は現在、Xiao Nian Gao に似たビデオおよびツール アプリを開発しています。ユーザーが作...