CSS3 の Transitions と Animations を使用して、Web サイトをもっと個性的に
本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。
【元記事】Adding Personality with CSS3 Transitions and Animations2011/11/22 7:33 AM
Internet Explorer 9 および 10 では、高パフォーマンスのコンパイル済み JavaScript やハードウェア アクセラレーションによる HTML5 および CSS 3 のレンダリングといった最新機能によって、Web 開発者が格段にリッチなユーザー エクスペリエンスを実現できるようになりました。
互いに関連する 2 つの機能 CSS3 Transitions と CSS3 Animations を使用することで、Web 開発者は宣言的なアプローチで、簡単に Web ページに個性を加えることができます。
この記事では、Windows Developer Preview の IE10 に実装されたこれら 2 つの機能と、Windows 8 の HTML で記述された Metro スタイルアプリについて説明します。
同じマークアップ (ただしベンダー プレフィックス付き)
IE9 および IE10 のほぼすべての新機能と同様に、CSS3 Transitions および CSS3 Animations は、“同じマークアップ” による相互運用性を念頭に実装された標準準拠機能です。ただし、安定した W3C 仕様の一部である border-radius、box-shadow、text-shadow などの機能とは異なり、Transitions と Animations は、ベンダーが実装にプレフィックスを付加している仕様策定段階に留まっています。このため、この場合の “同じマークアップ” は “ベンダー プレフィックスを除いては同一のマークアップ” という意味になります。
多くの人がこれらの機能について取り上げており、なかでも Rich Bradshaw の記事「Using CSS3 Transitions, Transforms and Animation (CSS3 の Transitions 、Transforms 、および Animation の使用) 」が秀逸です。
これらの機能を取り上げた記事の多くは、-webkit- プレフィックスのサンプルしか扱っていないため、他のブラウザーで実験してみたいユーザーは、サンプルをコピーして、-webkit- を -ms-、-moz-、-o- などに適宜変更する必要があります。これに対し、サンプルが IE10 でもちゃんと動作するのが、Bradshaw 氏の記事のすごいところです!
Transitions
CSS3 Transitions の機能は、CSS のプロパティ値を、計算に基づいて古い値から新しい値へスムーズに変化させるというきわめて単純なものです。また、要素の CSS クラスまたは疑似クラスでの変更による値の変化も Transitions のトリガーとなります。
次のマークアップ例をご覧ください。
img {
opacity: 1;
transition-property: opacity;
transition-duration: 2s;
transition-delay: 0s;
transition-timing-function: linear;
}
img:hover {
opacity: 0;
}
効果は次のとおりです。ユーザーがマウスを画像の上に移動すると、直ちにトランジションが開始し、2 秒の間に、下に示すように画像が滑らかにフェード アウトします (最終的な状態がわかりやすいように、画像の周りに影を加えました)。
2 秒間で画像をフェード アウト
これには以下の transition プロパティを使用します。
- transition-property – トランジションを適用する CSS プロパティを指定します。キーワード “all” を指定すると、すべてのアニメーション適用可能なプロパティに対して、値の変更時にトランジションが適用されます。既定値は “all” です。
- transition-duration – transition-delay 後に開始されるトランジションの持続時間 (秒またはミリ秒)。既定値はゼロです。これは状態が直ちに変化することを意味します。
- transition-delay – 値が変更されてからトランジションが開始するまでの時間 (秒またはミリ秒)。時間に負の値を設定すると、トランジションは設定された持続時間の途中から開始します。既定値はゼロです。
- transition-timing-function – トランジションの中間値の計算方法。トランジションのスピードを変更できます。3 次ベジエ曲線関数を使用し、一般的な関数に対応したキーワードを指定します。キーワードの規定値は、“ease” です。このキーワードを使用すると、開始時は高速で終わりに近づくにつれて速度が低下します。
上で紹介した画像のフェード アウトは、簡単な例です。次のように、画像を別の画像にフェードするにはどうすればよいでしょうか。
2 秒間で画像を別の画像にフェード
これは次のマークアップによって実行できます (ただし、すべての transition プロパティにベンダー プレフィックスを付加する必要があります)。
HTML のコード スニペット
<div id="imageWrapper">
<img id="backImage" src="imageB.jpg" /><img id="frontImage" src="imageA.jpg" />
</div>
CSS のコード スニペット
#imageWrapper {
display: inline-block;
width: 400px;
height: 267px;
box-shadow: 2px 2px 5px 0px gray;
position: relative;
}
#imageWrapper img {
width: 400px;
height: 267px;
position: absolute;
transition-property: opacity;
transition-duration: 2s;
transition-timing-function: linear;
}
#imageWrapper #frontImage, #imageWrapper:hover #backImage {
opacity: 1;
}
#imageWrapper:hover #frontImage, #imageWrapper #backImage {
opacity: 0;
}
上記のマークアップを実行したものがこちらです。
マウスを画像の上に移動すると別の画像にフェードします。
CSS3 Transitions は、ご使用のブラウザーではサポートされていません。上のトランジションは JavaScript で、効果を擬似的に再現したものです。
上に示すような単純なトランジションは、比較的簡単に JavaScript で再現できます。CSS Transitions の利点は宣言型の定義方法にあります。スクリプトより簡単なうえ、少なくとも IE10 では、メインの処理スレッドとは非同期に実行されるので処理が滑らかで、サイトの応答性も向上します。
CSS3 Transitions の対話型デモが、IE Test Drive サイト ( 英語 ) で提供されています。デモは CSS3 Transitions をサポートするすべてのブラウザーで実行可能で、これには Windows Developer Preview の IE10 も含まれます。
Animations
CSS3 Animations は、CSS の値の変化をスムーズなアニメーションで表す点で CSS3 Transitions と似ていますが、(a) アニメーションのプロパティを指定する方法、(b) アニメーションを起動する方法、(c) 実行可能なアニメーションの複雑度、の点で異なります。
アニメーションは CSS の “keyframes” @ 規則を使用して定義します。前述のトランジションのフェード アウト動作と同等のシンプルな keyframes 規則は次のとおりです。
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
これを次の CSS で画像に適用します。
img {
animation-duration: 2s;
animation-delay: 0s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
img:hover {
animation-name: fadeOut;
}
これらのプロパティの多くは、Transitions で説明したものと同じですが、それ以外に、以下のプロパティが使用されています。
- animation-fill-mode – このプロパティに “forwards” 値を指定すると、アニメーション終了時の “to” プロパティ値がその後も保持されます。このプロパティの既定値は “none” です。この値を指定すると、アニメーション終了時にプロパティ値はアニメーションが適用されていない値に戻ります (animation-fill-mode を使用せずに上記の CSS を構築することも可能です。その場合、“opacity: 0;” を img:hover に追加して、最終的な値を 0 にします)。
- animation-name – animation-name プロパティを設定すると、アニメーションが実行されます。animation-name プロパティを設定すると、animation-delay で指定した時間のカウントダウンが開始されます。animation-delay の残り時間がゼロに達するとアニメーションが開始し、animation-duration で指定された時間、継続されます。animation-timing-function は、前述の transition-timing-function と同様に動作します。
CSS3 Animations の強みは、複数のキーフレームの使用により、中間値を、開始値と終了値の範囲外にも指定できる点にあります。CSS3 Transitions では、中間値は必ず開始値から終了値に向けて変化していく形となり、その範囲を超えることはありませんが、Animations にはこの制限がないということです。
これによって下の例に示すような “バウンス効果” をプログラムできます。
#bouncingImage {
width: 400px;
height: 267px;
box-shadow: 2px 2px 5px 0px gray;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#bouncingImage:hover {
animation-name: zoomInBounce;
}
@keyframes zoomInBounce {
from {
transform: scale(1);
}
30% {
transform: scale(1.4);
}
40% {
transform: scale(1.15);
}
50% {
transform: scale(1.35);
}
60% {
transform: scale(1.2);
}
70% {
transform: scale(1.3);
}
80% {
transform: scale(1.225);
}
90% {
transform: scale(1.275);
}
to {
transform: scale(1.25);
}
}
画像の上にマウスを移動すると、バウンス効果により、弾むようにズームします。
ご使用のブラウザーでは CSS3 Animations がサポートされていないため、上のアニメーションは実行できません
CSS3 Animations の対話型デモが IE Test Drive サイト ( 英語 ) で提供されています。デモは CSS3 Animations をサポートするすべてのブラウザーで実行可能で、これには Windows Developer Preview の IE10 も含まれます。
サイトの個性を育てる
この記事で紹介した 2 つの例を、皆さんが自分のサイトに導入することはないかもしれませんが、念入りに設計されたトランジションとアニメーションは、今日の Web が備えて当然のエクスペリエンスとなりつつあります。Windows 8 Metro スタイルでは、滑らかで繊細なアニメーションを広範囲で使用して、ユーザーがシステムと円滑に対話できるようにしています。Windows 8 Metro スタイル アプリはこれにより、タッチにきびきびと反応する操作感を実現しています。
この記事で紹介したサンプルや IE Test Drive デモ、Web 上にあるたくさんの記事や例を活用して、この新しいテクノロジを試し、Web サイトに個性を加えてみてください。
—Internet Explorer グラフィックス、リード プログラム マネージャー Ted Johnson