このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

transition”プロパティ:遷移効果CSS3で追加

記事Aug. 30th,2021
要素に適用されているプロパティの値が変化した時の遷移効果を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 transition-property: all;
transition-duration: 0s;
transition-timing-function: ease;
transition-delay: 0s;
適用対象 すべての要素
継承 No
パーセント値 パーセント値は指定できません
計算値 一括指定が対象とする各プロパティの定義に依る
アニメーション 不可

transition”プロパティは要素に適用されているプロパティの値が変化した時に適用される遷移効果に関する指定をする以下のプロパティの一括指定プロパティです。

:hover”擬似クラスなどの擬似クラスメディア・クエリ、スクリプトによって要素に適用されているスタイルの値が変化した際には通常は直ちに値の変更が反映されますが、遷移効果を適用すると緩やかに変更を反映することができます。

サンプルコード

div { transition: transform 3s ease-in-out 1s;}

必要な値をホワイトスペースで区切って記述することができ、初期値のままで良い値は省略できます。一部の値は記述される順序によって解釈のされ方が変わります。他の値は記述する順序は自由です。

<time>”値は1個もしくは2個記述することができます。1個だけ記述された場合は遷移効果の所要時間を指定するtransition-duration”プロパティの値として扱われます。2個記述された場合は1個目がtransition-duration”プロパティの値として扱われ、2個目が遷移効果の遅延時間を指定するtransition-delay”プロパティの値として扱われます。

<single-transition-property>”値と“none”はどちらか1個だけ記述できます。

複数のプロパティの遷移効果を指定する

値のセットを“,(コンマ)”で区切って並べて記述することでプロパティごとに異なる遷移効果の設定を指定することができます。

transition:
〚1個目の“<single-transition-property>”値〛 〚1個目のプロパティの“<time>”値〛 〚1個目のプロパティの“<easing-function>”値〛 〚1個目のプロパティの“<time>”値〛,
〚2個目の“<single-transition-property>”値〛 〚2個目のプロパティの“<time>”値〛 〚2個目のプロパティの“<easing-function>”値〛 〚2個目のプロパティの“<time>”値〛,
〚3個目の“<single-transition-property>”値〛 〚3個目のプロパティの“<time>”値〛 〚3個目のプロパティの“<easing-function>”値〛 〚3個目のプロパティの“<time>”値〛,
...;

コンマで区切って複数の値を記述する場合は“none”は使用できません。いずれかの値の“none”が含まれる場合は宣言は無効になります。

仕様書

定義されている仕様書
Level 1
作業草稿(WD)
transition
定義あり

使用例

遷移効果を指定する

.sample-box:hover {
transform: scale(1.5);
background-color: #e95295;
transition: transform 3s ease-in-out 1s;
}
hover!

複数のプロパティの遷移効果を指定する

.sample-box:hover {
transform: scale(1.5);
background-color: #e95295;
transition: transform 3s ease-in-out 1s, background-color 4s steps(5,jump-none);
}
hover!
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク