[CSS]ホバー以外にも使ってみたいCSS3アニメーションのテクニック

Post on:2011年8月8日

sponsorsr

アニメーションのエフェクトを仕込む際、:hoverを使ってユーザーのホバー操作に対して実行することが多いですが、それ以外の擬似クラス :active, :focus, :checked, :disabled やMedia Queriesに仕込むスタイルシートのテクニックを紹介します。

CSS3 Transitions Without Using :hover

[ad#ad-2]

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

はじめに -「:hover」の例
「:active」でCSS3アニメーション
「:focus」でCSS3アニメーション
「:checked」でCSS3アニメーション
「:disabled」でCSS3アニメーション
Media QueriesでCSS3アニメーション
対応ブラウザ

はじめに -「:hover」の例

CSS3アニメーションのトリガーとしては、「:hover」を利用するものをよく見かけると思います。例えば、下記はホバー時にリンクのカラーを変えるエフェクトです。

CSS

a, a:link, a:visited {
	color: lightblue;
	-webkit-transition: color .4s linear;
	-moz-transition: color .4s linear;
	-o-transition: color .4s linear;
	-ms-transition: color .4s linear;
	transition: color .4s linear;
}

a:hover {
	color: white;
}

しかし、CSS3アニメーションはホバーに限定されるものではありません。ここでは他のトリガーに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;
}

「:focus」でCSS3アニメーション

「:focus」はマウスやキーボードでその要素をフォーカスした時です。
フォーカスが与えられたフィールドの幅はCSS3アニメーションで大きくなります。

デモページ：「:focus」

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

「:checked」でCSS3アニメーション

「:checked」はチェックボックスがチェックされた時です。
チェックされた要素は幅をCSS3アニメーションで変更します。

デモページ：「:checked」

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

「:disabled」でCSS3アニメーション

「:disabled」はフォームの入力が無効な時です。
下記は、一番下のラジオボタンをチェックすると、背景色がCSS3アニメーションで変更します。

デモページ：「:disabled」

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

ラジオボタンのチェックで「disabled」を変更するのは、「jQuery」を使用します。

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

Media QueriesでCSS3アニメーション

この最後のMedia Queriesは、ユーザーの閲覧環境によって最適なスタイルシートを提供するテクニックです。
ブラウザのサイズを変更（961pxより小さく）すると、CSS3アニメーションでボックスのサイズを小さくします。

デモページ：Media Queries

デモページをブラウザのサイズを小さくして表示

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