CSSアニメーションとトランジションでWebページに命を吹き込む

公開: 2017-10-09

ウェブサイトのデザインは絶えず進化しています。レスポンシブデザイン、美しいタイポグラフィ、完璧なカラーコーディングスキーム、イラストから、ウェブサイトの作成者は毎日新しいアイデアやデザインを考え出しています。

このような高品質のコンテンツがインターネット上で利用できるため、最近のユーザーはユーザーインターフェイスに大きな期待を寄せています。ウェブサイトのインターフェースが進化するにつれて、その背後にあるテクノロジーも進化しています。 Webサイトインターフェイスの強化を担当する主要なコンポーネントの1つは、 CSSです。

CSSまたはカスケードスタイルシートは、スタイル、レイアウト、デザインを定義することにより、サイトをよりインタラクティブにする責任があります。 CSSの最新の標準であるCSS3は、アニメーションと変換の概念を導入し、ユーザーインターフェイスに深みを加えることでユーザーエクスペリエンスを向上させています。 CSSアニメーションとトランジションを使用すると、ストーリーを伝え、豪華な効果を作成し、ユーザーとWebサイトとの対話を非常に効果的で意味のあるものにすることができます。

アニメーションは、写真のような一連のオブジェクトを次々に表示することによって作成される動きの単なるシミュレーションです。一方、遷移は基本的に、オブジェクトがある状態から別の状態に変化するプロセスです。ただし、Webアニメーションについて説明する場合、基本的に3つのタイプがあります。CSSアニメーションまたはキーフレームアニメーション、 CSSトランジション、およびJavaScriptアニメーションです。

CSSアニメーション

CSSでアニメーションを作成するには、画像やテキストなどの要素のCSSプロパティを一定期間変更する必要があります。要素のプロパティは何度でも変更でき、アニメーションの長さも設定できます。

@keyframesの指定

CSSアニメーションは、キーフレームで少し定義されています。これらのキーフレームは、アニメーションの中間点です。すべてのCSSアニメーションは、@keyframesルールの下で指定されます。これらのキーフレームは、特定の瞬間に要素に何が起こるかを指定します。

どのプロパティが変更されていますか
要素がアニメーション化するとき
要素がどのようにアニメーション化するか

独自のキーフレームを次のように定義できます。

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

ここで、「to」と「from」はアニメーションの開始と終了を指定します。次のように、開始と終了の間の中間の瞬間のアニメーションを指定することもできます。

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

ここで、0％はアニメーションの開始を表し、100％はアニメーションの終了を表し、50％は開始と終了の間の変化を表します。しかし、アニメーションがどのくらいの時間行われるべきかをブラウザにどのように伝えるのでしょうか？これは、特定のアニメーションプロパティを使用して行います。これらのアニメーションプロパティは、アニメーション化される要素に関連付けられています。例えば：

element_name
{
animation_property: value;
style_property: value;
}

ここで、要素はdiv、span、img、pなどの任意のHTMLタグであり、 style_propertyはbackground_color、width、heightなどの任意のCSSスタイリングプロパティです。ここで、いくつかのアニメーションプロパティを詳しく見てみましょう。

@keyframes ：キーフレームは、上記で説明したようにアニメーションコードを指定するために使用されます。
アニメーション名：@keyframesで指定された名前はアニメーションの名前です。この名前は、アニメーション化する要素でキーフレームを参照するために使用されます。
Animation-duration：アニメーションの継続時間を秒またはミリ秒で指定するために使用されます。たとえば、5秒に設定すると、アニメーションは5秒間だけ実行されます。このプロパティを設定しないと、デフォルト値が0であるため、アニメーションはまったく実行されません。
アニメーション遅延：アニメーション遅延時間を指定することで、アニメーションの開始を遅らせることができます。たとえば、ページがブラウザに読み込まれてから5秒後にアニメーションを開始する場合は、animation-delayを5sに設定するだけです。
アニメーション方向：このプロパティを使用して、アニメーションが逆方向に移動するのか、交互のサイクルで移動するのかをブラウザに伝えることができます。たとえば、アニメーションを最初から最後まで実行する場合は、animation-durationの値を「normal」に設定します。終わりから始めまで実行したい場合は、値を「reverse」に設定するだけです。
Animation-fill-mode ：アニメーションがこのモードで再生されていないとき、つまりアニメーションが遅延または終了したときの要素のスタイルを指定できます。要素のスタイルはどうあるべきですか。
Animation-iteration-count ：アニメーションを再生できる回数は、このプロパティで表されます。たとえば、アニメーションを一度1に設定して再生する場合、またはアニメーションを永久に再生する場合は、「無限」に設定するだけです。
Animation-Timing-Function ：このプロパティは、線形、加速、減速などのアニメーションの速度曲線を指定するために使用されます。
アニメーション：すべてのアニメーションプロパティを設定するための省略形のプロパティです。

たとえば、次のコードスニペットを使用して、バウンスするオブジェクトをアニメーション化できます。ここでは、アニメーションの省略表記がどのように使用されているかに注目してください。

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}

.stage:hover .object {
 animation: slide 2s linear;	/*shorthand animation property*/
}

.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

トランジション

CSS遷移は、特定のタイミング関数（別名イージング関数）に基づいて、特定の期間、要素のプロパティに適用されます。タイミング関数とは、線形進行、加速、減速など、要素のプロパティをある状態から別の状態に変更する関数を意味します。ホバーすると画像がスライドしたり別の画像に変換されたり、マウスをクリックすると音が鳴ったりすることに気づいたかもしれません。これらはすべて、Webサイトをインタラクティブにすることができる移行効果です。

イージング関数は、トランジションを作成するために重要です。これらは、プロパティがどのように変更されるかを指定します。また、プロパティの値が遷移の開始点から終了点まで変化する速度を変更することもできます。次の方法でトランジションを適用できます。

element 
{
style_property: value;
transition_property: value;
}

ここで要素は、div、H1、imgなどのように変換するHTML要素を指定します。style_propertyは、その要素に適用されるCSSスタイルです。ここで、いくつかの遷移プロパティを見てみましょう。

transition-property ：遷移効果は、要素の幅、高さ、色、形状などの要素のCSSプロパティに常に適用されます。この属性の値は、要素のCSSプロパティを指定します。トランジション効果は、このプロパティがマウスのホバーやクリックなどで変更されるたびに開始されます。
transition-timing-function ：これは要素に適用されるイーズ関数です。このプロパティは、イーズイン、イーズアウト、リニアなどの遷移の速度曲線を指定するために使用されます。
transition-duration ：animation-durationプロパティと同じです。遷移効果の持続時間を秒またはミリ秒で指定するために使用されます。たとえば、5秒に設定すると、移行は5秒で完了します。このプロパティを設定しない場合、デフォルト値は0であるため、遷移はまったくありません。
transition-delay ：このプロパティを使用すると、トランジション効果を遅らせる時間を指定できます。たとえば、マウスをホバーしてから5秒後にエフェクトを開始する場合は、transition-delayを5sに設定します。
遷移：これは、上記のすべての遷移プロパティをまとめて設定するための省略形のプロパティです。

たとえば、次のコードは、マウスホバー時のdiv要素の幅を変更します。ここで適用される遷移短縮プロパティを参照してください。

div { 
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

アニメーションとトランジション

Animations vs. Transitions

アニメーションとトランジションの類似点

遷移とアニメーションの両方を使用して、要素のプロパティの変化を視覚化します。
トランジションとアニメーションを実行する期間を指定できます。
アニメーションだけでなく、トランジションでも、ある値から別の値に移動する速度を変更する特定のタイミング関数があります。

アニメーションとトランジションの違い

CSSトランジションはリアクティブです。それらはユーザーによってトリガーされる必要があります。一方、アニメーションは、ページがブラウザに読み込まれるたびに実行されます。トリガーする必要はありません。
遷移は1回実行され、その後停止します。次に、アニメーションがループする可能性がある間、それらを何度もトリガーする必要があります。彼らは彼ら自身の停止で始めて、それから再び始めることができます。
ブラウザがトランジション自体を処理します。遷移の開始と終了を指定する必要があります。トランジション効果を設定することはできますが、その間のトランジションの変化率を変更することはできません。たとえば、画像をマウスに合わせるとスライドすると、画像にカーソルを合わせるとフェードインまたはフェードアウトします。
一方、アニメーションは、開始と終了の間でプロパティを変更する柔軟性を提供します。これは、キーフレームの助けを借りて行われます。たとえば、アニメーションの最初の5秒間は画像の色を赤に設定し、次の5秒間は青に、次の5秒間は緑に、最後の5秒間は黄色に設定できます。したがって、アニメーションを制御できます。

ベンダープレフィックス

すべてのCSS3機能がすべてのブラウザでサポートされているわけではありません。したがって、-webkit-（Safari）、-moz-（Firefox）、-o-（Opera）などの特定のブラウザーでは、これらのCSSプロパティに沿ってプレフィックスを使用します。これにより、ブラウザマーカーでそのCSS3機能のサポートを追加できます。これらのプレフィックスは、ベンダープレフィックスまたはCSSブラウザプレフィックスと呼ばれます。したがって、アニメーションとトランジションのプロパティとともにベンダープレフィックスを配置する必要があります。たとえば、以下のコードを検討して、Safariのベンダープレフィックスがどのように使用されているかを確認してください。

div {
width: 100px;
height: 100px;
background: red;

/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;

/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

ヒント！ -prefix-freeなどのライブラリを使用することで、この煩わしさを回避できます。これは、現在のブラウザのプレフィックスを任意のCSSコードに追加するJavaScriptライブラリです。ウェブ上で利用可能な多くのそのようなライブラリをチェックしてください。

結論

Webサイト開発者は、アニメーションと変換を適用して、ユーザーをWebサイトに引き付けることができます。これらを使用して、フォーム、通知、背景グラフィック、画像、グラフ、落書き、召喚ボタンなどを強化できます。想像力を働かせれば、ユーザーを驚かせる方法を見つけることができます。あなたのウェブサイトの小さな変更でさえ、それをはるかに良く見せ、その価値を高めることができることを忘れないでください。それで、あなたはもうあなたのウェブサイトでアニメーションを使いましたか？アニメーションとトランジションの使用についての考えを共有してください。