CSSトランジション

CSSトランジションを使用すると、特定の期間にわたってプロパティ値をスムーズに変更できます。

下の要素にカーソルを合わせると、CSSトランジション効果が表示されます。

この章では、次のプロパティについて学習します。

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

トランジションのブラウザーサポート

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

CSSトランジションの使用方法

トランジション効果を作成するには、次の2つを指定する必要があります。

• 効果を追加するCSSプロパティ
• 効果の持続時間

ノート：デュレーション部分が指定されていない場合、デフォルト値は0であるため、トランジションは効果がありません。

次の例は、100px *100pxの赤い<div>要素を示しています。<div>要素では、幅プロパティのトランジション効果も指定されており、持続時間は2秒です。

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

ここで、ユーザーが<div>要素の上にマウスを置いたときにwidthプロパティに新しい値を指定しましょう。

カーソルが要素の外に出ると、徐々に元のスタイルに戻ることに注意してください。

複数のプロパティ値を変更する

次の例では、幅と高さの両方のプロパティにトランジション効果を追加します。幅は2秒、高さは4秒です。

トランジションの速度曲線を指定する

のtransition-timing-functionプロパティは、遷移効果の速度曲線を指定します。

transition-timing-functionプロパティには、次の値を指定できます。

• ease- 開始が遅く、次に速く、次にゆっくり終了するトランジション効果を指定します(これがデフォルトです)。
• linear- 最初から最後まで同じ速度でトランジション効果を指定します
• ease-in- 開始が遅いトランジション効果を指定します
• ease-out- スローエンドのトランジション効果を指定します
• ease-in-out- 開始と終了が遅いトランジション効果を指定します
• cubic-bezier(n,n,n,n)- キュービックベジエ関数で独自の値を定義できます

次の例は、使用できるさまざまな速度曲線の一部を示しています。

トランジション効果を遅らせる

のtransition-delayプロパティは、遷移効果の遅延(秒単位)を指定します。

次の例では、開始前に1秒の遅延があります。

トランジション+トランスフォーメーション

次の例では、トランジション効果を変換に追加します。

その他の遷移の例

CSSトランジションプロパティは、次のように1つずつ指定できます。

または省略形のtransitionプロパティを使用して

CSSトランジションプロパティ

次の表に、すべてのCSSトランジションプロパティを示します。