CSSでのアニメーション
ここではCSSでのアニメーションをまとめます。プロパティとしてはtransitionとanimationがありますが、より高度なアニメーションを表現できるのはanimationプロパティです。
animationプロパティを利用することで昔のFlashコンテンツに近いリッチクライアントコンテンツを作成可能ですが、複雑にすればするほど手間がかかりますので、簡単なエフェクトレベルに留め、高度な表現をする場合は動画を利用することを検討して下さい。
transition
width、height、font-size等サイズを指定するプロパティを利用してアニメーションするプロパティです。疑似クラスである:hover(マウスオーバー)など何等かのきっかけ(トリガ)がないとアニメーションしないプロパティでもあり、自動再生するアニメーションを作成したい場合は後述のanimationプロパティを利用して下さい。
| transition値 | 説明 |
| 対象プロパティ アニメーションする時間 アニメーションが始まるまでの待ち時間 アニメーション進行度合 | 対象のプロパティ： アニメーションの対象となるプロパティです。width、height、font-size等サイズを指定します。 アニメーションする時間、アニメーションが始まるまでの待ち時間 s(秒)またはms（ミリ秒）で指定します。 アニメーション進行度合 ease(初期値)：自然な速度 linear：一定速度 ease-in：ゆっくり始まる ease-out：ゆっくり終わる ease-in-out：ゆっくり始まりゆっくり終わる |
transitionプロパティ利用例
結果
HTML
CSS
-
マウスオーバーして下さい。
font-size:15px→30px -
/* HTMLの例 */
マウスオーバーして下さい。 font-size:15px→30px -
/* CSSの例 */ .sample1 { width:400px; height:50px; background:skyblue; font-size:15px; transition:font-size 1s 0.2s ease-in; } .sample1:hover { font-size:30px; }
animation
自動再生、ループ再生可能なアニメーションを作成できるプロパティです。労力をかければ、複雑なアニメーションを作成することもできます。
animationプロパティは@keyframes規則とセットで利用します。@keyframes規則は「各時点でどのような状況か」を指定するために利用します。
animation
| animation値 | 説明 |
| アニメーション名 アニメーションする時間 アニメーション進行度合 アニメーションが始まるまでの待ち時間 繰り返し回数 反転再生 再生前後の表示 | アニメーション名： 任意で名前をつけます。@keyframes規則で同じ名前で規定します。 アニメーションする時間 s(秒)またはms（ミリ秒）で指定します。 アニメーション進行度合 ease(初期値)：自然な速度 linear：一定速度 ease-in：ゆっくり始まる ease-out：ゆっくり終わる ease-in-out：ゆっくり始まりゆっくり終わる アニメーションが始まるまでの待ち時間 s(秒)またはms（ミリ秒）で指定します。 繰り返し回数 連続再生の場合はinfinite、回数を指定する場合は例えば2回なら2と数値で指定します。 反転再生 繰り返し回数が指定されている場合の再生方法を指定します。 normal(初期値)：最初→最後の順に再生 alternate：最初→最後→最後→最初の行って来いの再生順 再生前後の表示 再生前後に表示する状態を指定します。 none(初期値)：再生前＝未指定、再生後＝未指定 forwards：再生前＝未指定、再生後＝@keyframeの100% backwards：再生前＝@keyframeの0%、再生後＝未指定 both:再生前＝@keyframeの0%、再生後＝@keyframeの100% ※未指定の場合はデフォルトで指定されているものが表示されます。 |
@keyframes
@keyframesの書き方
@keyframes anime1{
0%: { width:100px; }
50%: { width:200px; }
100%: { width:300px; }
}
上記の例ではアニメーション名：「anime1」に対して、アニメーションの再生状況が0%の時はwidth:100px、再生状況が50%の時はwidth:200px、再生状況が100%の時はwidth:300pxと設定しています。
このように@keyframes規則は「各時点でどのような状況か」を指定するために利用します。25%、75%というようにさらに細かくキーフレームをいくつでも設定できます。
animationプロパティ及び@keyframes規則 利用例
結果
HTML
CSS
-
文字色：黒⇔白
背景色：赤⇔青 -
/* HTMLの例 */
文字色：黒⇔白 背景色：赤⇔青 -
/* CSSの例 */ .sample2 { width:400px; height:60px; background:skyblue; color:black; animation:anime2 1s ease-in 0.2s infinite none; } @keyframes anime2 { 0% {background:red;color:white;} 100% {background:blue;color:black;} }