CSS3アニメーションを「:hover」だけではなく、他にも仕込んでみるチュートリアル

Post on:2011年11月14日

「:active」を使ってCSS3アニメーション

疑似クラス「:active」をトリガーにするCSS3アニメーションは、あらゆるエレメントにマッチします。
「:active」とはマウスがクリック、もしくはマウスがダウンされた状態です。

クリックしたら、サイズがアニメーションで大きくなるボックスを実装してみましょう。

CSS

.box {
	width: 300px;
	height: 300px;
	background: #222;
	-webkit-transition: width 2s ease, height 2s ease;
	-moz-transition: width 2s ease, height 2s ease;
	-o-transition: width 2s ease, height 2s ease;
	-ms-transition: width 2s ease, height 2s ease;
	transition: width 2s ease, height 2s ease;
}

.box:active {
	width: 500px;
	height: 500px;
}

デモ

このデモではボックスをクリックすると、アニメーションで幅と高さが大きくなります。

:activeを使ったデモページ

「:focus」を使ってCSS3アニメーション

疑似クラス「:focus」はそのエレメントにフォーカスがあたった時のことです。/p>

フォーカスがあたったフォームのエレメントにCSS3アニメーションを与えます。

CSS

input, textarea {
	width: 280px;
	-webkit-transition: width 1s ease;
	-moz-transition: width 1s ease;
	-o-transition: width 1s ease;
	-ms-transition: width 1s ease;
	transition: width 1s ease;
}

input:focus, textarea:focus {
	width: 340px;
}

デモ

このデモではフォーカスのあたったフォームのエレメントの幅がアニメーションで大きくなります。

:focusを使ったデモページ

「:checked」を使ってCSS3アニメーション

疑似クラス「:checked」はチェックボックスをチェックした状態のことです。

チェックしたチェックボックスにCSS3アニメーションを与えてみます。

CSS

input {
	height: 20px;
	-webkit-transition: width 1s ease;
	-moz-transition: width 1s ease;
	-o-transition: width 1s ease;
	-ms-transition: width 1s ease;
	transition: width 1s ease;
}

input:checked {
	width: 30px;
}

デモ

このデモはチェックされたチェックボックスを字下げしたように幅をアニメーションで変更します。

:checkedを使ったデモページ

「:disabled」を使ってCSS3アニメーション

疑似クラス「:disabled」はフォームの要素が無効な状態のことです。

ここではjQueryと組み合わせてみます。

CSS

input[type="text"], textarea {
	background: #e2e2e2;
	-webkit-transition: background 1s ease;
	-moz-transition: background 1s ease;
	-o-transition: background 1s ease;
	-ms-transition: background 1s ease;
	transition: background 1s ease;
}

input:disabled, textarea:disabled {
	background: #666666;
}

JavaScript

$(function() {
	$('input[type="radio"]').click(function() {
		if ($(':checked').val() === "other") {
			$('input[type="text"]').removeAttr("disabled");
		} else {
			$('input[type="text"]').attr("disabled", "disabled");
		}
	});
});

デモ

ラジオボタンにチェックを入れ、入力する際にアニメーションでエレメントの背景色を変更します。

:disabledを使ったデモページ

「Media Queries」を使ってCSS3アニメーション

この最後のMedia Queriesに仕込むものが、もっとも実用的かもしれません。
Media Queriesはユーザーの環境（サイズや解像度など）に合わせて最適なスタイルシートを適用するものです。

サイズを変えるとCSS3アニメーションでレイアウトを変更してみましょう。

CSS

.box {
	width: 440px;
	height: 440px;
	background: #222;
	margin: 0 auto;
	-webkit-transition: width 2s ease, height 2s ease;
	-moz-transition: width 2s ease, height 2s ease;
	-o-transition: width 2s ease, height 2s ease;
	-ms-transition: width 2s ease, height 2s ease;
	transition: width 2s ease, height 2s ease;
}

@media only screen and (max-width : 960px) {
	.box {
		width: 300px;
		height: 300px;
	}
}