CSSで文字の色や背景色を変える際、簡単なアニメーションをつけたいと思うことはありませんか？動きのあるサイトはおしゃれな仕上がりになりユーザーに楽しんでもらえます。
CSSのtransitionというプロパティを使用すれば簡単なアニメーションを作ることができます。
この記事ではtransitionプロパティでできることやtransitionの使い方を解説します。この記事を読むと基礎知識や使い方だけでなくcssアニメーションとの違いやtransitionを使うことが多い場面などがわかります。transitionの使い方を学習して動きのあるおしゃれなサイトを作ってみましょう。
transitionを使ったアニメーションの作り方transitionの種類・指定方法transitionを使うことが多い場面transitionとCSSアニメーションの違い
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
transitionプロパティとは
transitionプロパティを一言で表すと「遷移を見せるプロパティ」です。
言い換えると「CSSプロパティの上書き前と上書き後のスタイルの変化を、指定した時間かけて見せるプロパティ」となります。
次の例を見てみましょう。
灰色の背景にカーソルを合わせると、オレンジのボックスが右に動きます。
See the Pen transitionプロパティ使用例 by ZeroPlus (@zeroplus-programming) on CodePen.
変化するい際に時間をかけて動いているのがわかります。こちらはtransitionプロパティを使っているからです。
transitionを使ったアニメーションの作り方
transitionを使うと簡単なアニメーションを作成することができます。
以下にアニメーションのサンプルを用意しました。オレンジ色の要素にホバーすると枠内に広がります。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
このような動きを表現できるのがtransitionプロパティです。
transitionの種類・指定の方法
transitionのプロパティには4つの種類があります。
| transitionのプロパティ | 詳細 |
| transition-duration | 変化の秒数 |
| transition-delay | 変化が開始するまでの秒数 |
| transition-property | 変化させたいプロパティ |
| transition-timing-function | 変化の進行度 |
それぞれ解説していきます。
transition-duration
transition-durationはアニメーションの秒数を指定します。何秒かけて変化させるかを設定できます。記述例は以下のようになります。
transition-duration: 秒数;s（秒）もしくはms（ミリ秒）が指定できる値です。
サンプルにホバーしてみてください。ホバー時から1秒かけてアニメーションが発生します。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
transition-delay
transition-delayはアニメーションの開始を遅らせることができます。こちらもtransition-durationと同様にs（秒）もしくはms（ミリ秒）の単位を指定します。記述例は以下のようになります。
transition-delay: 秒数;サンプルにホバーしてみてください。ホバーした瞬間から1秒後に要素が変化します。
See the Pen transition-duration&delay by ZeroPlus (@zeroplus-programming) on CodePen.
transition-property
transition-propertyは、アニメーションさせたいプロパティを選択できる指定です。記述例は以下のようになります。
transition-property: プロパティ名;サンプルにホバーしてみてください。背景色はホバーと同時に変化し、文字色のみ1秒かけて変化します。
See the Pen css transiton-property by ZeroPlus (@zeroplus-programming) on CodePen.
複数のプロパティを選択する場合
複数のプロパティを選択する場合はプロパティ名をカンマ（,）で区切って指定します。記述例は以下のようになります。
transition: プロパティ名, プロパティ名;すべてのプロパティを選択する場合
すべてのプロパティを選択する場合はallという値を指定します。記述例は以下のようになります。
transition: all;/*すべてのプロパティに適用*/allを使用するとすべてのプロパティにtransitionが適用されるため、想定していないアニメーションとなる可能性があります。予想外のエラーを防ぐためにプロパティの指定は一つずつ行うのが確実です。
transition-propertyは単体では動かないためdurationかdelayのどちらかもしくは両方を併用するようにしましょう。
transition-timing-function
transition-timing-functionはアニメーションの進行度合いを設定できるプロパティです。
おもな値は6種類あります。以下の表にわかりやすくまとめました。
| 指定できる値 | 詳細 |
| ease | 開始時と終了時の動きをなめらかにする |
| ease-in | 開始時だけなめらかにする |
| ease-out | 終了時だけなめらかにする |
| ease-in-out | easeよりもゆっくり変化させる |
| linear | 一定の速度で変化させる |
| cubic-bezier | 変化の度合いをX軸、Y軸の曲線で指定できる |
それぞれがどのようなアニメーションをするのかサンプルで確認してみましょう。ホバーしたときにそれぞれの背景色が横に広がります。
See the Pen transition-timing-function by ZeroPlus (@zeroplus-programming) on CodePen.
transition-timing-functionも単体では動かないためdurationかdelayのどちらかもしくは両方を併用する必要があります。
cubic-bezierについて
cubic-bezierはアニメーションの進行度合いを自作できる指定方法です。ベジェ曲線という関数を用いて指定します。ベジェ曲線とは、X軸とY軸の座標上の2点を経由する原点から終了地点までを結んだ曲線のことです。
コードの書き方は以下のようになります。
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25,0.1,0.25,0.1);ちなみに、この例の数値はeaseと同じ値です。
一括指定（ショートハンド ）
transitionの値は一括指定が可能です。このような指定の仕方をショートハンドといいます。記述例は以下のようになります。
transition: プロパティ 秒数 変化を遅らせる 進行度合い;
transition: all 1s 0s ease;指定の順番は特にありませんがdurationとdelayは先に記述した値がdurationとなるので注意しましょう。
ショートハンドでの指定では使わない値の記述を省略することができます。記述していない値には初期値が適用されます。
transition: 1s;
/*property・delay・timing-functionは省略しているため初期値が適用される*/
transitionとCSSアニメーションとの違い
アニメーションといえばCSSアニメーションが思い浮かんだ人もいるのではないでしょうか。transitionプロパティとCSSアニメーションの違いを簡単にまとめてみます。
transitionでは簡単な設定、CSSアニメーションは高度な設定が可能- CSSアニメーションでは
@keyframesの設定が必要 transitionでは要素を変化させるための擬似クラスが必要
transitionでは簡単な設定、 CSSアニメーションでは高度な設定が可能CSSアニメーションを使うと、変化を秒数によって細かく刻んだりループさせたりなどの高度な設定ができます。transitionではここまで高度な設定はできませんがコードの記述が簡単というメリットがあります。
CSSアニメーションでは@keyframesの設定が必要CSSアニメーションを使うときは、@keyframesという設定が必要となります。0%〜100%の数値で開始時・中間地点・終了時の任意のタイミングで変化を切り替えるポイントを設定できる方法です。本格的なアニメーションを作成したいときに使用します。
transitionでは要素を変化させるための擬似クラスが必要transitionを使用するときには要素の状態を変化させるため、ホバー時（要素にカーソルを合わせたとき）やクリック時（要素をクリックしてから離すまで）などの状態を変化させる擬似クラスを使用する必要があります。
擬似クラスの使い方はこちらの記事で解説しています。
transitionを使うことが多い場面
ホバー時
この記事ではホバー時にtranstionを使ってアニメーションをつける方法を説明してきました。
ホバー時に出現するアニメーションはサイトの彩りやユーザーを楽しませる効果があります。そのため制作の現場ではホバーしたときのアニメーションとしてtransitionをよく使います。
.test{
}
.test:hover{
/*ホバー時のアニメーション*/
}クラスが追加・解除された時
JavaScriptを使うとclassを追加したり外したりすることができます。JavaScriptで動きをつけてtransitionでアニメーションの肉付けをする、という流れでclassの追加や解除を行ったときにもtransitionを使うことが多いです。
.test{
}
.test .class{
/*.testに.classが追加されたときのアニメーション*/
}transitionが効かない時のチェックポイント
transitionが効かないときのよくある設定ミスを2つ挙げてみました。
設定しているはずなのに、期待通り動作しない場合は以下の点で設定ミスがないか確認してみましょう。
displayプロパティにtransitionを設定している
要素の表示・非表示を切り替える際にdisplay: none;やdisplay: block;の切り替えをすることがよくあります。
そこで、表示の切り替えにアニメーションをつけるためtransitionを設定したとしても期待通りには動きません。
なぜならtransitionプロパティはdisplayプロパティには作用しないためです。
表示・非表示を切り替える際にアニメーションをつけたい場合は、visibilityやopacityプロパティを使用しましょう。
疑似クラスにtransitionの設定をしている
transitionプロパティを:hoverや:activeなど疑似クラスの方に指定すると期待通りの動作はしません。
正しく大元の要素にtransitionが設定されているか確認してみましょう。
まとめ
transitionはアニメーションを作成できるCSSプロパティです。要素が変化するまでの時間やアニメーションの開始を遅らせる秒数などを指定できます。手軽にアニメーションを作成できるため制作現場では多用しています。
サイトにアニメーションがあると、ユーザーを楽しませることができます。またアニメーションは情報をわかりやすく伝える効果もあります。transitionを使用してユーザーを楽しませつつ情報を伝えるサイトを作成してみましょう。
transitionまとめ
- アニメーションを作成できるプロパティ
- アニメーションの秒数・開始を遅らせる秒数・適用させたいプロパティ・進行度合いを指定できる
- CSSアニメーションと違い手軽にアニメーションを作成できる
- ホバー時やclassの移動時に多用
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
