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ルールの下で指定されます。これらのキーフレームは、特定の瞬間に要素に何が起こるかを指定します。

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

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

[css]
@keyframesanimation_name
{{
from {プロパティ：値; }
to {プロパティ：値; }
}
[/ css]

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

[css]
@keyframes名
{{
0％{プロパティ：値; }
50％{プロパティ：値; }
100％{プロパティ：値; }
}
[/ css]

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

[css]
element_name
{{
Animation_property：値;
style_property：value;
}
[/ css]

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

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

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

[css]
@keyframesスライド{
0％{
左：0;
上：0;
}
50％{
左：244px;
上：100px;
}
100％{
左：488px;
上：0;
}
}

.stage：hover .object {
アニメーション：スライド2秒線形; / *短縮アニメーションプロパティ* /
}

。物体 {
背景：＃2db34a;
境界線半径：50％;
高さ：50px;
位置：絶対;
幅：50px;
}
[/ css]

トランジション

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

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

[css]
エレメント
{{
style_property：value;
transition_property：値;
}
[/ css]

ここで、elementは、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要素の幅を変更します。ここで適用される遷移短縮プロパティを参照してください。

[css]
div {
幅：50px;
高さ：50px;
背景：青;
トランジション：高さ4秒; / * 4秒間の高さの遷移の省略形* /
}
div：hover {
高さ：200px; / *マウスホバーの高さを増やします* /
}
[/ css]

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

Animations vs. Transitions

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

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

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

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

ベンダープレフィックス

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

[css]
div {
幅：100px;
高さ：100px;
背景：赤;

/ * Safari3.1から6.0の場合* /
-webkit-transition-property：width;
-webkit-transition-duration：2s;
-webkit-transition-timing-function：線形;
-webkit-transition-delay：1秒;

/ *標準構文* /
遷移プロパティ：幅;
遷移時間：2秒;
遷移タイミング関数：線形;
遷移遅延：1秒;
}
[/ css]

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

結論

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