4.1 transitionプロパティ
CSSのトランジションは、CSSプロパティの値の変化をアニメーション化し、開始状態と終了状態の間でスムーズな移行を作り出す。このパワフルなツールは、Webページに動きを加え、使いやすさを向上させる。トランジションのプロパティ、持続時間、タイミング関数などの基本的な側面について考えよう。
transition
プロパティは、トランジションの全ての側面を一つのプロパティにまとめることができる。以下を含めることができるよ:
- アニメーション対象のプロパティ。
- アニメーションの持続時間。
- タイミング関数。
- アニメーション開始前の遅延(オプション)。
構文:
element {
transition: property duration timing-function delay;
}
ここで:
property
: トランジションが適用されるプロパティ(例:width
,height
,background-color
)duration
: トランジションの持続時間(例:2s
は2秒、500ms
は500ミリ秒)-
timing-function
: アニメーションの変更速度を定義するタイミング関数(例:ease
,linear
,ease-in
,ease-out
,ease-in-out
) delay
: トランジション開始前の遅延(例:1s
は1秒)
例:
HTML
コンテンツ
CSS
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: width 2s ease-in-out, background-color 1s ease;
}
コードの説明:
-
transition: width 2s ease-in-out
,background-color 1s ease
: 2つのトランジションを定義していて、1つはプロパティwidth
で、持続時間は2秒、タイミング関数はease-in-out
、もう1つはプロパティbackground-color
で、持続時間は1秒、タイミング関数はease
4.2 トランジションプロパティ
1. transition-propertyプロパティ
transition-property
プロパティは、どのプロパティのトランジションを適用するかを決定するよ。
構文:
element {
transition-property: property1, property2 ...;
}
例:
CSS
.box {
transition-property: width, height, background-color;
}
2. transition-durationプロパティ
transition-duration
プロパティは、トランジションの持続時間を設定するんだ。
構文:
element {
transition-duration: time;
}
例:
CSS
.box {
transition-duration: 2s, 1s, 3s;
}
3. transition-timing-functionプロパティ
transition-timing-function
プロパティは、アニメーションが時間の中で変化する速度を定めるよ。
構文:
element {
transition-timing-function: function;
}
例:
CSS
.box {
transition-timing-function: ease-in, linear, ease-out;
}
4. transition-delayプロパティ
transition-delay
プロパティは、トランジション開始前の遅延を設定するんだ。
構文:
element {
transition-delay: time;
}
例:
CSS
.box {
transition-delay: 1s, 0s, 500ms;
}
4.3 トランジションの持続時間
トランジションの持続時間は、プロパティが変化するアニメーションがどれだけの時間続くかを決定する。秒(s)またはミリ秒(ms)で指定されるよ。
例:
CSS
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: width 2s, height 1s, background-color 500ms;
}
コードの説明:
-
transition: width 2s
,height 1s
,background-color 500ms
:width
のトランジションは2秒、height
は1秒、background-color
は500ミリ秒続くよ。
4.4 タイミング関数
タイミング関数は、プロパティの値が時間の中でどのように変化するかを決定する。いろんなアニメーション効果を作ることができるよ。
基本的なタイミング関数:
ease
: アニメーションはゆっくり始まり、途中で速くなり、最後にまたゆっくりになるlinear
: 始めから終わりまで一定の速度でアニメーションするease-in
: アニメーションはゆっくり始まり、次第に速くなるease-out
: アニメーションは速く始まり、その後ゆっくりになるease-in-out
: アニメーションは開始と終了時にゆっくりで、途中で速くなる
例:
CSS
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transition: width 2s ease-in-out, height 1s linear, background-color 500ms ease;
}
コードの説明:
ease-in-out
: 始めと終わりがゆっくりなスムーズなトランジションlinear
: 一定速度のトランジションease
: ゆっくり始まり、途中で速くなり、最後でまたゆっくりなトランジション
GO TO FULL VERSION