cssで動きを付ける「transition」について
基本の書き方や注意点と設定が効かない時の対処法
昔なら動きを付けるのはJSという感じでしたが、今では簡単な動きの多くはCSSのみで実装できるようになりました。今回テーマに挙げているtransitionもその1つで、CSSによってHTML要素の状態変化をアニメーションとして動かす事ができます。
特にこのtransitionは個人的にはかなり実際のコーディングでも使っています。
このサイト・ブログでもところどころで使っていますし特に使い所として多いのは、リンクのバナーやボタンなどに簡単なアニメーションを付ける形かなとも思います。
代表的なところで言えば:hoverで色を変えるだけだと瞬間に色が切り替わりますが、transitionを組み合わせることで、ゆっくりホバーの色が切り替わるので使われる機会も多いのではないかなと思います。
そんなtransitionについて、設定の仕方や注意点、うまく動かない時の見るべきところなどなど解説していきたいと思います。
transitionの基本的な使い方
transitionは簡単に言えば要素に動きを付けるものになります。
○秒で、△の動きを付けるといった事が可能になり、例えば下記のようなものになります。
下記のグレー背景にマウスオーバーすると、10%のグレーの横幅が0.5秒かけて100%まで幅が広がり背景や枠線のカラーも濃いグレーに変わっていくのが確認できるはずです。
実際のコードは下記のようになっています。
<div class="transition-sample"></div>.transition-sample{
display: block;
width: 20%;
height: 50px;
margin: 30px 0px 0px;
border: 2px #ddd solid;
border-radius: 3px;
background-color: #eee;
transition: all 0.5s 0s linear;
}
.transition-sample:hover {
width: 100%;
border: 2px #333 solid;
background-color: #999;
}もし、transitionを設定しなければ下記のような動きになってしまいます。
デモを見るとわかるように、transitionがあるかないかだけでもだいぶ印象が変わってしまいます。
実際のコードの書き方
transitionの実際の使い方・書き方としては下記のようになります。
transitoin: 対象のプロパティ 変化の時間 変化の開始時間 変化の仕方;実際には1行でまとめて書いていますが、それぞれを個別で指定することもでき、個別指定の場合はそれぞれ下記のようにコードを書きます。
transition-property: 対象のプロパティ;
transition-duration: 変化の時間;
transition-delay: 変化の開始時間;
transition-timing-function: 変化の仕方;とはいえ、これだけ見てもまだ良くわからないかと思います。
詳細や解説は後ほど記載していきますが、例えば先ほどの上記のグレーのサンプルですと、transitionのところだけ抜粋すると下記のような書き方になっています。
transition: all 0.5s 0s linear; 1行にまとめず個別に書く場合は下記になります。
transition-property: all;
transition-duration: 0.5s;
transition-delay: 0s;
transition-timing-function: linear;実際には複雑な設定の時は1つ1つ細かく指定することもあるかもしれませんが、多くの場合は簡単なアニメーションで終わらせることも多いので、その場合は1行にまとめた記載をすることが多いのではないかなと思います。（実際自分もほとんど1行で書く事が多いです）
transitionの各プロパティの詳細について
ここからは、先ほど書いていたtransitionのプロパティをそれぞれ1つ1つ見て解説していきたいと思います。
transition-property：対象となるプロパティの指定
ここはどのプロパティを対象とするかという指定になります。
先ほどの例ですと「all」を指定していますが、この設定でtransitionの対象をどのプロパティとするかというのを指定します。
最初のサンプルでは「all」を指定しましたが、変化させたいところを下記のように個別で指定することも可能です。
transition-property: all;
transition-property: background-color;
transition-property: color;例えば最初のデモでも表示していたマウスオーバーでグレーの四角が伸びるものがあったかと思いますが、下記は全く同じ設定で表示しています。
これだと、allを指定していたので、枠線も背景も横幅も全てにtransitionが効いています。例えばここを、下記のようにwidthだけを指定すると、枠線や背景色は変わらずに横幅だけにtransitionが有効になります。
transition-property: width;実際にマウスオーバーすると、横幅はゆっくり広がりますが、枠線や背景色はtransitionが効いていないため即座に濃いグレーの色に変更になります。
同じようにwidthではなく、background-colorを対象とすると下記のようになります。
transition-property: background-color;背景色のみtransitionが効いて、横幅や枠線は瞬時に変わっているのが確認できます。
とはいえ基本的な使い方で特定の何かを指定して動きを付けたいといったような事でなければ、通常は「all」を指定しておいて問題ないと言えます。
transition-duration: 対象のアニメーションの時間の指定
ここで、transitionで動きを付けるアニメーションの時間を指定します。
時間は秒単位もしくはミリ秒単位で指定していきますが、多くは「0.3s」と秒をカンマ区切りで指定する書き方をされる人が多いのではないかなと思います。
また、書き方としては、「0.3s」の0は省略して「.3s」と書く事も多いです。
ちなみに初期値は「0」になっておりアニメーションされません。そして負の値を誤って入れたとしても0の扱いになってアニメーションしないという形になります。
transition-duration: 2s;
transition-duration: 0.5s;
transition-duration: .3s;2sと書くと、マウスオーバーしてから2秒かけて指定したアニメーションの動作をします。.3sですと、0.3秒でアニメーションの動きが完了するという形になります。
指定する長さによって印象なども大きくかわりますし、指定する要素の大きさ次第で同じ秒数指定でも印象がかなり変わる事もあるので、試しつつ最適な秒数を探るようにしましょう。
下記は、最初のグレーのサンプルを3秒に設定にしたものです。
下記は、0.3秒に設定したものになります。
transition-delay：対象のアニメーションの開始の指定
実際にあまり使う機会は多くないかもしれませんが、この値ではアニメーションがいつ開始するかという事を指定できます。例えば何かをしてから○秒後に開始したいという場合はこの値を指定してあげれば遅れて動かす事が可能になります。
transition-delay: 1s;
transition-duration: .5s;下記は最初のデモのグレーをマウスオーバーの1秒後に動くように設定していますが、1秒後に動作するという設定はマウスオーバーを離した時にも同じように効いてくるので注意が必要です。
また、この値はデフォルトの値が「0s」となっているため、省略するとその0sの値が適用されるため、すなわち0秒＝すぐに開始となります。
実際にはこの値を設定する機会は特殊な場合を除いてあまりないと思うので多くは省略する事が多いかと思います。
transition-timing-function：変化の仕方を指定
transitionのメインとも言えるどういう動きをするかを指定します。
指定できる種類は6種類ありますが、実際は5種類の中から指定していくことが多いと思います。
- ease：開始時と終了時をゆっくり変化させる（初期値）
- ease-in：開始時をゆっくりと変化させる
- ease-out：終了時をゆっくりと変化させる
- ease-in-out：easeよりも開始時と終了時をゆっくり変化させる
- linear：開始時から終了時まで一定の速度で変化させる
- cubic-bezier：ベジェ曲線を4つの変数を指定
となります。ただ、cubic-bezierは数学の世界に入ってしまうためここでは割愛します（自分も使った事がありません。）
実際にコードとして書くと下記のような感じになります。
transition-timing-function: ease-in;
transition-timing-function: linear;
transition-timing-function: ease-in-out;違いがわかりやすいように、下記にそれぞれ最初のデモで、transition-timing-functionを変更したものをそれぞれ並べて見ました。また、動きがわかりやすいようにtransition-durationも1sにしています）
下記はeaseで指定したものです。
下記はease-inで指定したものです。
下記はease-outで指定したものです。
下記はease-in-outで指定したものです。
下記はlinearで指定したものです。
実際に使う時というのは、0.3sや0.5sくらいで使う事も多く、それくらいの指定だと見た目的にそこまで大きな変化がないので省略して自動的にeaseが与えられるように使っているという方も多いのではないかなと思いますし、自分も省略してかくケースも多いです。
結局は1行にまとめて書く事がほとんど
1つ1つコードを見ていきましたが、それぞれのスペルが長いこともありますし、transitionの指定は基本は1行にまとめて書く事が多いかと思います。
transition: all .5s 0s ease-in;ただ実際の書き方としては、開始を遅延させるtransition-delayと変化の仕方を指定するtransition-timing-functionは省略して書く事もできるので、動きにそこまでこだわりがないような場合は、下記のように対象のプロパティと秒数指定のみを書くケースも多いです。
transition: all .3s;実際自分もたいていのケースでこの書き方になっているような気がします。
transitionの注意点や効かない時のチェックポイント
実はこのtransitionですが、以外とくせ者でもあり慣れるまでは設定したのに思った通りに動かない！といった事や、設定したのに効いてない！なんてケースに出くわす事があります。
最後に注意点と設定したのに効いてない時はこういうケースが多いという例も紹介しておきたいと思います。
:hoverに設定してしまうと戻りがおかしくなる
マウスオーバーした時に動きを指定したいということで、つい:hoverにtransitionを指定しようと考えてしまいがちですが、実はこれをやると、マウスを離した時の動きにはアニメーションがつきません。
下記が:hoverに指定してしまった例です。
マウスオーバーした時は同じように動きますが、マウスを離した瞬間にアニメーションなく元に戻ってしまいます。
:hoverに設定するのではなく、hover無しの元の要素に対してtransitionを設定するようにしましょう。
display: none;＆block; と組み合わせては使えない
これがよくやるミスというか設定したのに効かない！という事例の一番多いのでは？という気もしますが、display: none;と組み合わせて使うと動きません。
どういうケースでよく使うのかというと、最初にdisplay: none;を指定しておき、マウスオーバーやチェックボックスにチェックを入れて、display: block;で表示する、もしくは逆のように表示から非表示に切り替える時などがあります。
しかしながら、display: none;との組み合わせでは使えません。
下記はチェックボックスにチェックを入れると、下にボックスを表示するようにしていますが、この時、display: none と block で切り替えています。
実際のコードはこんな感じです。
<input type="checkbox" class="sample-checkbox">チェックでボックスが表示
<div class="sample-box"></div>.sample-checkbox{
margin: 50px 5px 0px 0px;
}
.sample-box{
display: none;
width: 50%;
height: 100px;
margin: 15px 0px 0px;
background-color: #ddd;
transition: all .5s;
}
.sample-checkbox:checked + .sample-box{
display:block;
}transitionを設定しても効いていません。
こういう場合は、visibilityとopacityの設定で意図した動きになります。
.sample-box{
width: 50%;
height: 0px;
margin: 15px 0px 0px;
background-color: #ddd;
visibility: hidden;
opacity: 0;
transition: all .5s;
}
.sample-checkbox:checked + .sample-box{
height: 100px;
visibility: visible;
opacity: 100;
}こうすることで、チェックボックスにチェックを入れる・外すで動作するアニメーションがきちんと動作しているのが確認出来ます。
この時に1点、高さなどサイズを変える場合などは注意点が必要です。
というのも、opacityやvisibilityなどは、隠している要素は非表示にしているだけに過ぎないため、そのサイズ分が隠れた状態で表示される形にはなってしまいます。
そのため、元のボックスに高さや幅を指定してしまうと、非表示にした高さの分もブラウザ上では高さ分が確保されてしまい、真っ白で表示される事になります。
そのため、上記のサンプルでは隠している状態の時は0pxで高さを指定し、チェックボックスが入った時に100pxとなり、opacityやvisibilityやtransitionが動作するようにしています。
こう設定することで、チェックがないときは隠れ、チェックが入るとアニメーションが効きながら表示され、チェックが外れるとアニメーションが効きながら非表示になっていきます。
displayとopacityとvisibilityの表示・非表示は少しややこしい特徴があるため、下記でも取り上げて解説しているので詳しくはそちらもご確認ください。
- CSSのみで要素を表示/非表示にする方法【opacity・display・visibility】
- コーディングをしていく中で、とある条件によっては表示して、とある条件によっては非表示にしたいという事はよく起こります。 特にレスポンシブデザインなどの...
指定の値がautoなどを使っている場合
あまり多くはないかもしれませんが、例えばサイズの指定などでautoを指定しているとtransitionは上手く動きません。
下記は一番最初のデモのサンプルコードから、マウスオーバーの値をautoにしたものです。
<div class="transition-sample"></div>.transition-sample{
display: block;
width: 20%;
height: 50px;
margin: 30px 0px 0px;
border: 2px #ddd solid;
border-radius: 3px;
background-color: #eee;
transition: all 0.5s 0s linear;
}
.transition-sample:hover {
width: auto;
border: 2px #333 solid;
background-color: #999;
}100%の場合は正常に動きますが、autoにするとtransitionが効かずにそのまますぐにhoverの動きをしてしまうので注意しましょう。また、この場合width: auto;だけtransitionが効かず、他の枠線や背景には効いているのが確認できます。
その他、スペル間違い、css設定まちがいなど
その他によくある事例としては、スペル間違いやcssの設定間違いなどが挙げられます。
よくある事例としては、transitionの「s」の付け忘れです。
.3sや1sと付けなければいけないのを付け忘れたりするのはよく見かけます。
また、transitionと似て別のtransformがありますが、なにかで間違ってtransformと書いて設定していたりといった事もありますので、書き間違いなども以外と侮れないのでチェックしておきましょう。
まとめ
今回はtransitionについてまとめてみましたが、動きを簡単に付けられる事もあってか色々なシーンで活用されます。
スマホファーストになった今では、あまりマウスオーバーでの動きの設定はPCでしか設定が反映されず意味がないかもしれませんが、それでもハンバーガーメニューの表示非表示のアニメーションにも使えますし、使い方次第で色々なシーンで活用できます。
設定の方法も思っている以上にシンプルでもあり簡単でそこまで凝った使い方をすることもあまりないとは思うので基本をおさえておいて損はないCSSのプロパティではないかなと思います。
transitionに慣れるとPCのマウスオーバーなどで瞬間切り替わりに逆に違和感を覚えるくらいになるかもしれませんね。
記事のシェアにご協力お願いします
