CSS3 transition アニメーション
今回は、CSS3の「transition」について書きます。
「transition」を使うと、要素に簡単なアニメーションをつけれます。
transitionには、4つのプロパティがあります。
- transition-property・・・アニメーションさせる対象
- transition-duration・・・変化に掛かる時間
- transition-timing-function・・・変化のタイミング
- transition-delay・・・ 変化がいつ始まるか
この4つです。
※「webkit」などのベンダープレフィックスは適宜つけてください。最新のchromeですとベンダープレフィックスはいりません。
1の「transition-property」は、アニメーションさせる対象を指定できます。
基本的には、このように使います。
transition-property: all;
「all」は、変化を適用できるプロパティすべてがアニメーションします。
例えば、
このようなボックスに、「transition-property: all;」とすると、「背景色」,「高さ」,「幅」などがアニメーションします。
高さだけアニメーションさせたい場合は、
transition-property: height;
このようにします。
幅は「width」、背景色は「background-color」と指定します。
ちなみに、
transition-property: height background-color;
このように複数指定するともできます。複数指定する場合は、スペースで区切ります。
2の「transition-duration」は、アニメーションする時間を指定できます。
基本的には、このように使います。
transition-duration:1s;
数値が大きいほど、アニメーションする時間がゆっくりです。
3の「transition-timing-function」は、アニメーションするタイミングを指定できます。
簡単に言いますと、すぐアニメーションを開始するのか、または、ゆっくりアニメーションを開始するなど、こういう事を指定します。
基本的には、このように使います。
transition-timing-function:ease;
タイミングの指定方法は複数あります。
- ease・・・開始と終了が滑らか
- linear・・・一定
- ease-in・・・ゆっくり始まる
- ease-out・・・ゆっくり終わる
- ease-in-out・・・ゆっくり始まってゆっくり終わる
この辺は、実際にやってみた方が分かりやすいです。
4の「transition-delay」は、アニメーション開始時間を指定できます。
基本的には、このように使います。
transition-delay:2s;
この場合ですと、2秒後にアニメーションが開始されます。
1〜4を実際のプログラムに使うとこんなかんじです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>css3</title> <style> div{ width: 200px; height: 200px; background-color: red; transition-property: all; transition-duration:2s; transition-timing-function:ease; transition-delay:0.1s; } div:hover { background-color:yellow; width:400px; height:300px; } </style> </head> <body> <div id="nya"></div> </body> </html>
実行結果
アニメーション後
こちらのプログラムは、赤色のボックスにマウスカーソルをのせると黄色のボックスに変化します。
ちなみに、1〜4は1つにまとめれます!!
transition: all 2s ease 0.1s; /*transition: property duration timing-function delay*/
一番左から、property,duration,timing-function,delayの順番です。
上のプログラムを書き直します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>css3</title> <style> div{ width: 200px; height: 200px; background-color: red; transition: all 2s ease 0.1s; } div:hover { background-color:yellow; width:400px; height:300px; } </style> </head> <body> <div id="nya"></div> </body> </html>
スッキリな形になりました。
アニメーションを応用すると・・・
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>css3</title> <style> div{ width: 200px; height: 200px; background-color: red; transition: all 2s ease 0.1s; } div:hover { background-color:yellow; width:400px; height:300px; -webkit-transform:rotateY(180deg); } </style> </head> <body> <div id="nya"></div> </body> </html>
こちらのプログラムは、マウスカーソルがボックスに重なると、回転しながら大きくなります。
アニメーションは以上です。
参考サイト
transition-CSS3リファレンス