CSSでアニメーションを起こす方法はいくつかありますが、その一つであるtransitionプロパティについて、解説していきます。
- CSSの、見た目の変化にかける時間の指定がわかる
- 見た目を変化させる要素・緩急の設定の仕方がわかる
transitionプロパティとは
transitionプロパティを一言で表すと「遷移を見せるプロパティ」であるといえます。
言い換えると「CSSプロパティのスタイルの変化を、指定した時間かけて見せるプロパティ」となります。
次の例を見てみましょう。
灰色の背景にカーソルを合わせると、オレンジのボックスが右に動きます。
See the Pen transitionプロパティ使用例 by ZeroPlus (@zeroplus-programming) on CodePen.
動くときに瞬間的ではなく、少し時間をかけて動いているのがわかりますが、こちらはtransitionプロパティを使っているからです。
transitionプロパティの構成要素
transitionプロパティでは、次の４つを一括指定することができます。
| 構成要素のプロパティ | 役割 |
|---|---|
| transition-property | 変化を見せるCSSプロパティ名 |
| transition-duration | 変化する所要時間 |
| transition-timing-function | 変化の緩急の付け方 |
| transition-delay | 変化をし始めるまでの待機時間 |
この4つを次の順番で一括指定して使うことができます。書くときの順番は以下の通りです。
.selector {
transition: プロパティ名 所要時間 緩急の付け方 待機時間;
}transition-property
アニメーションを適用させるCSSプロパティを指定します。
基本的な指定の仕方
CSSプロパティを指定すると、そのCSSプロパティのみが時間をかけて変化します。
See the Pen transition-propertyの基本的な解説 by ZeroPlus (@zeroplus-programming) on CodePen.
こちらの例では、変化前と変化後でcolorとbackgroundの２つのCSSプロパティが変化しています。
しかし、transition-propertyで指定しているのがbackgroundプロパティのみなので、「文字の色は時間をかけず瞬間的に変化し、背景色は時間をかけて変化する」ということが起こっています。
複数プロパティの指定の仕方
では、複数指定する場合はどうするかをみていきましょう。
複数プロパティを指定したい場合は次のような書き方をします。
.selector {
transition-property: プロパティ名, ２つ目のプロパティ名;
}See the Pen transition-propertyの複数指定の解説 by ZeroPlus (@zeroplus-programming) on CodePen.
こちらの例では、colorとbackgroundの両方がtransition-propertyに指定されているので、「文字の色と背景色が、時間をかけて変化する」ということが起こっています。
すべて適応させる or すべて適応させない
transition-propertyには、CSSプロパティ名以外に「all」と「none」という値を当てることができます。
allを使用すると「すべてのCSSプロパティが時間をかけて変化する」ようになり、noneを使用すると「すべてのCSSプロパティが時間をかけずに変化する」ようになります。
おすすめの指定の仕方
上書きしたCSSプロパティを、すべて時間をかけて変化させたい場合はallを使おうと思いがちですが、ここで注意点があります。allを使うと、思わぬCSSプロパティが変化してしまうなど、問題が発生する可能性があります。
なので、基本的には手間でも一つ一つ変化させるCSSプロパティ名をかいてあげると良いです。
transition-duration
アニメーションにおける変化の所要時間を指定します。
次のように指定し、単位は「s（秒）」か「ms（ミリ秒）」で指定します。
由来は英語で「秒」を表す「second」の頭文字からきています。
.selector {
transition-duration: 所要時間;
}See the Pen transition-durationの解説 by ZeroPlus (@zeroplus-programming) on CodePen.
transition-timing-function
アニメーションの緩急の付け方を指定します。
基本的な指定の仕方
基本的な指定の仕方は次の５つです。初期値はeaseです。
| 値 | 動き |
|---|---|
| ease | 変化の半分まで速度を上げて、最後に遅くなる |
| ease-in | 最初は遅く、だんだん加速する |
| ease-out | 最初は早く、だんだん減速する |
| ease-in-out | 最初は遅く、加速したのち、減速する |
| linear | 一定のスピードを保って変化する |
それぞれの例を見ていきましょう。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
始まりと終わりのタイミングは同じですが、途中の緩急が違うことがわかると思います。
自分で作った緩急を指定する
こちらは紹介だけになりますが、cubic-bezier()という値を使えば、緩急の付け方を自作することができます。
詳しくは、MDN Web Docsを参照ください。
transition-delay
アニメーションが始まるまでの待機時間を指定します。
次のように指定し、transition-durationと同じく、単位は「s（秒）」か「ms（ミリ秒）」で指定します。
.selector {
transition-delay: 待機時間;
}See the Pen transition-delayの解説 by ZeroPlus (@zeroplus-programming) on CodePen.
ホバーしてから、１秒間待機してから、アニメーションが始まるようになりました。ホバーを外した時も、指定した秒数分待機します。
transitionプロパティを使う
ここまで紹介した４つのプロパティを組み合わせてtransitionプロパティはできています。
基本的な使い方
全て指定する必要はなく、transition-propertyとtransition-durationの二つだけあればアニメーションします。
.selector {
transition: プロパティ名 所要時間;
}また、全て指定したい場合は冒頭でも紹介したように、transition-property, transition-duration, transition-timing-function, transition-delayの順で指定します。
.selector {
transition: プロパティ名 所要時間 緩急の付け方 待機時間;
}transition-durationとtransition-delayで、先に指定してある秒数がtransition-durationとして扱われるので、この２つの順番だけ気をつければ、問題なく指定できます。
複数指定するとき
複数指定する場合は、次のように「,（カンマ）」をつかって区切ります。
.selector {
transition: プロパティ名 所要時間 緩急の付け方 待機時間, プロパティ名 所要時間 緩急の付け方 待機時間;
}
まとめ
以上が、transitionプロパティの使い方になります。
- transitionを使うとホバー時などに見た目を変化させるとき、時間・緩急・プロパティなどを指定できる
というところを押さえられていればOKです。細かい指定の順番などは、覚えるに越したことはないですが、まずは参考サイトを見ながらできていれば問題ありません！transitionプロパティのできることをまずは把握しておきましょう！
アニメーションはWebサイトを使いやすくするための重要な要素なので、使いこなせるようになると良いでしょう。
