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

サイト構築 -CSS

Post on:2011年11月14日

sponsorsr

CSS3アニメーションはたいていの場合、ホバー時（:hover）に仕込まれるものが多いと思います。
ここでは他の疑似クラス「:active」や「:focus」などやMedia Queriesに仕込んでみるチュートリアルを紹介します。

CSS3 Transitions Without Using :hover

[ad#ad-2]

下記は各ポイントを意訳したものです。

「:active」を使ってCSS3アニメーション
「:focus」を使ってCSS3アニメーション
「:checked」を使ってCSS3アニメーション
「:disabled」を使ってCSS3アニメーション
「Media Queries」を使ってCSS3アニメーション
各スタイルシートについてのメモ

「: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;
	}
}