今回は、CSSのtransitionプロパティを利用して、下記のように手軽にアニメーションを作成する方法を紹介します。
CSSだけでアニメーションって作れるんですね！Javascriptが必要だと思っていました！
はい！今はCSSだけでもアニメーションが作れます。CSSでは、アニメーションを作るために「animation」プロパティもしくは「transition」プロパティが利用できます。
今回はよりシンプルなtransitionプロパティについて説明していきますね！
もくじ
【PR】ネットショップを始めるなら！無料でスタートできるBASEがオススメ！
transitionの使い方
CSSのtransitionプロパティを利用すると、あるHTML要素の状態の変化をアニメーションとして動作させることができます。
下記の水色のブロックにカーソルを合わせてください(スマホの方はタッチしてみてください)。
3秒間で、右に伸びていって、色が水色からオレンジ色に変化します。カーソルを外すと(スマホの方は別のところにタッチすると)、元に戻っていきます。
transitionプロパティの使い方
まず、基本的なtransitionプロパティの使い方を説明します。
transitionプロパティは、「transition: 変化の対象 変化の時間 変化の仕方 (順不同)」を指定します。加えて、変化の終わりの状態となる「:hover」などの擬似クラスと組み合わせて利用するとアニメーションが発生します。
■例)マウスオーバー(hover)したときにwidthとbackgroundをアニメーションする
■上記のソースコード
1 2 3 4 5 6 7 8 9 10 11 | .tra-sample{ width:10%; height:50px; background-color: aqua; transition:all 3s ease-out; } .tra-sample:hover{ width:80%; background-color: orange; } |
上記例の場合は、下記のように3秒かけてアニメーションを実現しています。
上記例のアニメーションの場合
- 変化の開始：hoverしていない時のCSS。width:10%とbackground-color:aqua
- 変化の終了：hoverした時のCSS。width:80%とbackground-color:orange
通常、transitionの設定は、変化の終わり(.sapmle:hover)ではなく、変化の始まり(.sample)に記述します。
アニメーションに遅延を入れる
秒数を2つ指定することでアニメーションに遅延を入れることができます。
■2秒遅れてからアニメーションがスタートする例
■上記のソースコード
1 2 3 4 5 | .tra-sample2{ width:80%; background-color: orange; transition:all 3s 2s ease-out; } |
上記例の場合は「2秒遅延後」に「3秒間のアニメーション」が実行されます。
時間に関する順番は「変化の時間」が先、変化の遅延が後で順番を入れ替えることができませんので注意してください。
【PR】初めてホームページを作るなら使いやすいロリポップがオススメ！
transitionの詳細プロパティ
「transition」で変化の対象と変化の秒数と変化の仕方をまとめて指定しましたが、それぞれ個別に指定することができます。
transtionを構成する各プロパティ
- transition-property：変化対象のCSS
- transition-duration：変化の開始から終了までの時間
- transition-delay：変化がいつ始まるか(遅延)
- transition-timing-function：変化の仕方
変化対象のCSSを指定 transition-property
「transition-property」では、変化対象のCSSプロパティを指定できます。
transition-property:allで(transition対象の)CSSプロパティを一括で指定できます。
transtion-property:background-colorのように指定すればtransitionによるアニメの対象は「background-color」のみになります。
変化の時間を指定 transition-duration
「transition-duration」は、変化の開始から終了するまでの時間(秒またはミリ秒)を指定できます。
transition-duration:3sにするとアニメーションが3秒間続くことになります。
初期値は0でアニメーションにはなりません。負の値は0扱いになります。
変化がいつ始まるか(遅延) transition-delay
transition-delayは先ほどの例では使いませんでしたが、変化がいつ始まるかを指定できます。
transition-delayプロパティで指定した時間が経過した後にアニメーションが開始されます。省略した場合は初期値は0で変化がすぐに開始されます。
変化の仕方 transition-timing-function
「transition-timing-function」で変化の仕方（一定スピードで変化、はじめゆっくりでだんだん速く変化など）を指定します。
以下の中から指定方法を選択できます。
transition-timing-function」のよくある設定値
- ease(開始と終了を滑らかに)
- linear（一定）
- ease-in(開始がゆっくり)
- ease-out(終了がゆっくり)
- ease-in-out（開始と終了がゆっくり）
- cubic-bezier(※)
※cubic-bezireはベジェ曲線を4つの変数を指定して設定する方法です。数学の世界に入るためここでは割愛します。
上記をまとめると「transition:all 3s 2s ease;」は下記のように記述することができます。
1 2 3 4 | transition-property: all; transition-duration: 3s; transition-delay: 2s; transition-timing-function: ease; |
【PR】初めてホームページを作るなら使いやすいロリポップがオススメ！
transitionプロパティのWebブラウザの互換性
transitionというプロパティは昔から存在していたわけではなく、CSS3という比較的新しい規格のなかで生まれました。そのため、一部の古いWebブラウザでは正常に動作しない場合があります。
特に、Internet Explororの場合はバージョン10より以前のバージョンは正常に動作しませんのでご注意ください。
Chrome、Safari、FireFox、Operaでも古いバージョンの場合は、ベンダープレフィックスという識別子を指定しないと正常に動作しない場合があります。
CSS3 transitionのサポートWebブラウザ
http://caniuse.com/#search=transitionより抜粋
ベンダープレフィックスをつけた場合の書き方
- Chrome/Safariの場合：-webkit-transition
- FireFox の場合：-moz-transition
- Operaの場合：-o-transition
互換性を気にする場合はCSSにベンダープレフィックスも指定した形式で記述しておくと安定動作につながると思います。
1 2 3 4 | transition:all 3s ease-out; -webkit-transition:all 3s ease-out; -moz-transition:all 3s ease-out; -o-transition:all 3s ease-out; |
まとめ
今回は、CSSのtransitionプロパティを利用して、手軽にアニメーションを作成する方法を紹介しました。
transitionプロパティを利用することで、javascriptを利用しなくても手軽なアニメーションが作成できます。
javascriptがわからなくても手軽に作れますのでぜひ試してみてください。
今回は以上になります。最後までご覧いただきありがとうございました。
『自分で作る選択を！』
弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。
