[CSS]CSS3 Transitionsを使用して、ホバー時に繊細なアニメーションを与えるスタイルシート
Post on:2010年11月18日
sponsors
マウスのホバー時にカラーが変更するスタイルシートに、ほんの数行を加えるだけでふわっと繊細なアニメーションを与えるスタイルシートを紹介します。
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」は変化の方法です。
詳しくは下記ページを参照ください。
元記事では、「transition: all 0.3s ease;」に至るまでのスタディが記されています。また、なぜjQueryなどのJavaScriptを使用しないかということに関しては、CSS3の簡単さとフレキシビリティに重点をおいて採用している、とのことです。
最後に一番大切なポイントは、こういったエフェクトはほんの少しだけ繊細に与えることです。
sponsors
