【CSS】トランジション(transition)を使ってアニメーションを行う

      2016/08/15

ホームページを作成する上で、アニメーションさせてみたいと思うこともあるかと思います。
GIFアニメーションなどを利用する手もありますが、CSSで簡単にアニメーションさせることもできます。

方法としては
・transitionプロパティを使うCSSトランジション
・animationプロパティを使うCSSアニメーション
があります。

CSSトランジションは、マウスカーソルをホバーした時に色を徐々に変更させたい時や、画像を移動させたい時などにも利用できます。
今回は、このCSSトランジションの使い方を、備忘録として残しておきます。

transitionの使い方

【使用例】マウスカーソルをホバーすると300ms待機後、1秒かけてbox1の幅を300pxにする。

(CSS)
			.wrap {
				background: beige;
				height: 100px;
			}
			#box1 {
				width: 50px;
				height: 50px;
				background: gold;
				transition: width 1s ease 300ms;
			}
			#box1:hover { 
				width: 300px;
				height: 100px;
			}
		
(HTML)
		<div class="wrap">
			<div id="box1">box1</div>
		</div>
		
(実行結果)
box1

box1の高さについては、transition-propertyで指定していないので、ホバー直後に100pxになる。

ホバーをやめると、ホバー時と同様の再生時間、タイミング、待機時間で、元の幅に戻る。

transitionプロパティについて

transitionプロパティに対して、変化させたいCSSのプロパティ、再生時間、タイミング、待機時間を順に指定する。
これにより、指定したCSSプロパティのみが、ホバーする前の状態からホバーした後への状態へと徐々に変化していく。

transitionプロパティの詳細

説明
transition-property 変化させたいCSSプロパティを指定する。allと指定した時は、すべてが対象になる。
transition-duration 再生時間。秒数を指定する。msをつけるとミリ秒指定。
transition-timing-function アニメーションのタイミング。easeやease-in、ease-outなど幾つか指定できる。
transition-delay アニメーションを開始させる時間。指定秒数遅らせることができる。
まとめ

今回は、transitionプロパティプロパティの基本的な使用方法についてまとめてみました。
アニメーションのタイミングtransition-timing-functionについては、別ページで詳しく書いてみる予定です。

(追記)
transition-timing-functionについて、こちらにまとめました。

 - css , , ,