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

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

サイトのキャプチャ

CSS3 Transitions Without Using :hover

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

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

デモ

サイズが960px以下の場合、アニメーションでボックスのサイズが小さくなります。

デモのキャプチャ

Media Queriesを使ったデモページ

各スタイルシートについてのメモ

各デモのスタイルシートはベンダープレフィックスを含み、最後に標準的なプロパティを記述しています。CSS3アニメーションを正式にサポートしていないIE9, IE10用にも「-ms-」で記述しています。

また、各デモページのコードは上記と全く同じではありません。ここではポイントとなる箇所にフォーカスがあたるよう、可能な限りシンプルなスタイルシートにしています。

top of page

©2017 coliss