[CSS]CSS3 Transitionsを使用して、ホバー時に繊細なアニメーションを与えるスタイルシート

マウスのホバー時にカラーが変更するスタイルシートに、ほんの数行を加えるだけでふわっと繊細なアニメーションを与えるスタイルシートを紹介します。

Understanding CSS3 Transitions
デモページ（当方作成）

[ad#ad-2]

少し前まではこういったCSS3のエフェクトはWebkit系（Chrome, Safari）のみの場合が多かったのですが、最近ではFirefox 4, Opera 10.5など主要ブラウザの最新バージョンで次々にサポートされるようになってきました。
※CSS3 AnimationはFirefox, Operaは非サポートとなっていますが、CSS3 Transitionsはサポートとなっています。

下記に紹介するものは、対応ブラウザでは期待通りに、非対応ブラウザでもそれなりにスタイルシートが適用されるものとなっています。

• 元となるカラーを変更するスタイルシート
• 繊細なアニメーションを与えるスタイルシート

元となるカラーを変更するスタイルシート

HTML

HTMLはa要素にclassを指定するだけの非常にシンプルなものです。

<a href="#" class="foo">Transition me!</a>

CSS

a要素に余白をpaddingで設定し、カラーを指定します。

a.foo {
	padding: 5px 10px;
	background: #9c3;
	}
a.foo:hover {
	background: #690;
	}

[ad#ad-2]

繊細なアニメーションを与えるスタイルシート

CSS3 Transitionsを使用して、ふわっと繊細なアニメーションを与えます。
デモページ（当方作成）

CSS

追加するのは、L4-7です。
※デモページではpaddingなどの値を若干変更しています。

a.foo {
	padding: 5px 10px;
	background: #9c3;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
	}
a.foo:hover,
a.foo:focus {
	background: #690;
	}

CSS3 Transitionsとは

上記で使用している「transition: all 0.3s ease;」は複数のプロパティをまとめたもので、個別に記述すると下記のようになります。

transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;

「transition: all 0.3s ease;」の「all」はすべてのプロパティを対象、「0.3s」は変化にかかる時間、「ease」は変化の方法です。

詳しくは下記ページを参照ください。

• A Comprehensive Guide to CSS 3 Transitions（英語）
• CSS3メモ「transition」の使い方

元記事では、「transition: all 0.3s ease;」に至るまでのスタディが記されています。また、なぜjQueryなどのJavaScriptを使用しないかということに関しては、CSS3の簡単さとフレキシビリティに重点をおいて採用している、とのことです。

最後に一番大切なポイントは、こういったエフェクトはほんの少しだけ繊細に与えることです。