シンプルな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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!