transitionを日本語訳すると、
- 移り変わり
- 移行
- 変遷
- 変化
といった意味になります。
まさにアニメーションに関するプロパティですね。少し難しく表現すると「時間的変化」を表現するものです。
マテリアルの表現はtransitionを理解せずには実現できません。マテリアルデザインの鍵を握るtransitionについて解説していきます。
W3Cの公式ドキュメントはこちらです。
→ https://drafts.csswg.org/css-transitions/
はにわまんtransitionで簡単なアニメーションを実現しましょう！
内包している4つのプロパティの役割
backgroundやborderなどのプロパティと似ていて、transitionも４つプロパティを一括で指定できるCSSです。まとめて表現できるプロパティをショートハンドプロパティを呼ばれたりします。
指定する順番に紹介すると、
- transition-property -> アニメーションさせるプロパティを指定
- transition-duration -> 時間（アニメーションが動いている間）
- transition-timing-function -> タイミング
- transition-delay -> 時間（アニメーションが開始するまでの間）
の４つのプロパティを指定できます。
初期値は以下のとおり。
- transition-property: none;
- transition-duration: 0s
- transition-timing-function: ease;
- transition-delay: 0s;
これをまとめて表現すると、
transition: none 0s ease 0s;
という書き方になるわけです。
それぞの要素を個別に深掘りしていきます。
transition-property
アニメーションの効果を表現するプロパティです。
| 値 | 説明 |
|---|---|
| all | 変化を適用できるプロパティすべてが変化する（初期値） |
| none | どのプロパティも変化しない |
| プロパティ名 | 変化させるプロパティ名のリストをカンマ（ , ）区切りで指定 |
実例を見ていきましょう。
allを指定した場合
変化対象となる、background、width、heightのすべてにアニメーションが適応されているのが分かります。
※ マウスホバー or タップ
<div class="transition-property-all"></div>.transition-property-all {
width: 100px;
height: 100px;
background: #00BCD4;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
.transition-property-all:hover {
width: 200px;
height: 200px;
background: #009688;
}widthだけを指定した場合
指定外のbackground、heightは直ぐに切り替わり、widthだけにアニメーションが適応されているのが分かります。
※ マウスホバー or タップ
<div class="transition-property-width"></div>.transition-property-width {
width: 100px;
height: 100px;
background: #00BCD4;
transition-property: width; // 複数指定する場合は width, height などカンマ区切り
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
.transition-property-width:hover {
width: 200px;
height: 200px;
background: #009688;
}transition-duration
アニメーションが開始してから終わるまでの時間を指定できるプロパティです。
| 値 | 説明 |
|---|---|
| xs | x秒 |
| xms | xミリ秒（1000ミリ秒 = 1秒） |
実例を見ていきましょう。
1sを指定した場合
変化が開始してから終わるまでの時間が1秒となります。
※ マウスホバー or タップ
<div class="transition-duration-1s"></div>.transition-duration-1s {
width: 100px;
height: 100px;
background: #00BCD4;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
.transition-duration-1s:hover {
width: 200px;
height: 200px;
background: #009688;
}5sを指定した場合
変化が開始してから終わるまでが5秒となります。
※ マウスホバー or タップ
<div class="transition-duration-5s"></div>.transition-duration-5s {
width: 100px;
height: 100px;
background: #00BCD4;
transition-property: all;
transition-duration: 5s;
transition-timing-function: ease;
transition-delay: 0s;
}
.transition-duration-5s:hover {
width: 200px;
height: 200px;
background: #009688;
}transition-timing-function
変化の表現を指定するプロパティです。
一定のスピード、最初を早く段々遅く、などを指定できます。
| 値 | 説明 |
|---|---|
| ease | 開始と完了を滑らかにする（cubic-bezier(0.25, 0.1, 0.25, 1.0) を指定したのと同じ）（初期値） |
| linear | 一定（cubic-bezier(0.0, 0.0, 1.0, 1.0) を指定したのと同じ） |
| ease-in | ゆっくり始まる（cubic-bezier(0.42, 0, 1.0, 1.0) を指定したのと同じ） |
| ease-out | ゆっくり終わる（cubic-bezier(0, 0, 0.58, 1.0) を指定したのと同じ） |
| ease-in-out | ゆっくり始まってゆっくり終わる（cubic-bezier(0.42, 0, 0.58, 1.0) を指定したのと同じ） |
| cubic-bezier(数値, 数値, 数値, 数値) | 3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定 |
各値の違いを見てみよう
ease、linear、ease-in、ease-out、ease-in-outの各値を並べてみました。
開始から終了までのアニメーション時間は同じですが、動きがそれぞれ異なることが分かります。
transition-delay
アニメーションが始まるまでの時間を指定できるプロパティです。
| 値 | 説明 |
|---|---|
| xs | x秒 |
| xms | xミリ秒（1000ミリ秒 = 1秒） |
1sを指定した場合
アニメーション開始までに1秒かかっていることが分かります。
※ マウスホバー or タップ
<div class="transition-delay-1s"></div>.transition-delay-1s {
width: 100px;
height: 100px;
background: #00BCD4;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 1s;
}
.transition-delay-1s:hover {
width: 200px;
height: 200px;
background: #009688;
}3sを指定した場合
アニメーション開始までに3秒かかっていることが分かります。
※ マウスホバー or タップ
<div class="transition-delay-3s"></div>.transition-delay-3s {
width: 100px;
height: 100px;
background: #00BCD4;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 3s;
}
.transition-delay-3s:hover {
width: 200px;
height: 200px;
background: #009688;
}transitionでまとめて記載する
transition-property、transition-duration、transition-timing-function、transition-delayはまとめて書くことができます。
記載順番は、
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]
という並びになります。
実例としては以下のような感じです。
※ マウスホバー or タップ
<div class="transition"></div>.transition {
width: 100px;
height: 100px;
background: #00BCD4;
transition: all 1s ease 0s;
}
.transition:hover {
width: 200px;
height: 200px;
background: #009688;
}ずいぶんとスッキリしますね。
おわり
transitionプロパティについて解説しました。
１つ１つのプロパティの意味を見つつ、実際に動きを確認していくとすぐに覚えられると思います！
