高度な CSS3-6 CSS トランジション (概要、トランジションのサブ属性)_html/css_WEB-ITnose

1. 概要

概要

- CSS 属性値を一定期間にわたって滑らかに遷移させます

- たとえば、マウスをホバーした後、背景が色は 1 秒以内に白から滑らかになります トランジションは赤になります

- 4 つの要素を指定します

- 背景、色などのトランジション属性を指定します

- トランジションに必要な時間を指定します

- トランジション関数を指定しますつまり、トランジションの速度や方法などです。

- トランジションの遅延時間を指定し、実行を開始する時間を示します

- トランジションをトリガーします

- クリック、ホバーなどのユーザーの動作によってトリガーされます

遷移の例

トリガー遷移

- ユーザーの動作(クリック、ホバーなど)によってトリガーされる遷移

- 要素の状態変化によってトリガーされる

-以上、 :active、:focus など。

- JavaScript コードによってトリガーされる

2. 過剰なサブ属性

Transition-property

-transition-property プロパティは、CSS プロパティの名前を指定します。トランジション効果を適用します

- 指定された CSS プロパティが変更されると、トランジション効果が開始されます

- 構文

- トランジションプロパティ: none | all property;

- トランジションに設定できるプロパティ

- Colorプロパティ

- 数値を持つプロパティ

- 変換プロパティ

- グラデーションプロパティ

- 可視性プロパティ

- シャドウプロパティ

遷移時間transition-duration

- 遷移時間ration 属性は、トランジション効果が完了するまでにかかる時間

- 秒またはミリ秒

- 構文

- Transition-duration: s | ms;

- デフォルト値 0 で、効果がないことを意味します

- transition-duration属性を設定する必要があります。それ以外の場合、持続時間は0です。トランジション効果はありません

トランジション関数transition-timing-function

-transition-timing-function この属性は、トランジション効果の速度カーブを指定します

- 値は事前定義された関数またはベジェ曲線です

- 構文

- Transition-duration: function;

- 事前定義された関数

-ease: デフォルト値、低速開始、高速から高速、その後ゆっくり終了

- リニア: 同じ速度で開始から終了まで

- イーズイン: 低速で開始、加速効果

- イーズアウト: 低速で終了、減速効果

- イーズインアウト: 開始と終了遅い速度で終了し、最初は速度を上げてから遅くします

トランジション遅延transition-delay

- トランジション遅延属性は、トランジション効果がいつ開始されるかを指定します

- つまり、要素がいつ変更されるかトランジション効果の実行を開始する属性の後

- 秒またはミリ秒単位

- 構文

- Transition-delay: s | ms;

省略属性transition

- トランジション属性は省略属性です。 4 つのトランジション プロパティを設定するために使用されます

- 構文

- トランジション: プロパティ期間タイミング関数遅延;

複数のトランジション効果

- 複数のトランジション サブプロパティの複数の値を設定します値はカンマで区切ります

- トランジション属性に複数の値をカンマで区切って設定します

概要: この章では主に CSS トランジション (概要、トランジション サブプロパティ) を紹介します