CSSアニメーションは確実に進化している!キーフレームを使ったCSSアニメーションの実装ポイントまとめ

CSSアニメーションは確実に進化しています。
ユーザーを楽しませるだけでなく、ユーザーの注意をつかみ、サイトのゴールに導くための重要な手段にもなります。

単調なアニメーションではなく、キーフレームを使い、タイミング・ディレイ・反復・方向・「will-change」機能を使ったCSSアニメーションの実装のポイントを紹介します。

サイトのキャプチャ

How to Use CSS Animations Like a Pro


下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

1. キーフレーム

状態を徐々に変化させることで、ページ上のオブジェクトをアニメーション化します。ここでポイントとなるのがキーフレームで、各ステージごとにオブジェクトの動作をコントロールできます。

上記のコードを見てみましょう。

  1. アニメーションの名前は、「pulse」です。
  2. 0%(開始時)、50%(x時)、100%(終了時)の3つのステージから構成されます。
  3. CSSの値は、「scale3d(x, y, z)」です。

JotForm

「@keyframes」でアニメーションを定義すると、私たちは以下をコントロールできます。

  • アニメーションがどれだけ持続するか。
  • アニメーションがどれくらい遅れて開始するか。
  • アニメーションの繰り返しの頻度。
  • アニメーションの方向。

簡単な実装例を見てみましょう。

上記のコードでは、ボタンにアニメーションを与え、継続時間を1秒に定義し、さきほど作成したアニメーションの名前を「pulse」を指定しています。

アニメーションの持続時間を変更すると、下記のようにボタンのアニメーションも違ったように見えます。

デモページ

2. アニメーションのタイミング

アニメーションのタイミング機能は、アニメーションがその動きのサイクル中にどのように加速し、減速するかを決めるときに使用します。その要素が動く速度を決定しなければなりません。オプションには、linear, ease, ease-in, ease-out, ease-in-outなどがあります。

タイミングのオプション

クレジット: https://i.stack.imgur.com/qyvON.png

アニメーションのタイミング: ease

アニメーションのタイミング: linear

アニメーションを調整するのは簡単なプロセスです。「Cubic Bezier Curves」をガイドとして使用して、必要に応じてタイミングを調整できます。

アニメーションのタイミング: cubic-bezier(.18,.18,.83,-1.33)

「Cubic Bezier Curves」の使用方法に関する情報は、Mozillaの開発者向けWebサイトで入手できます。

3. アニメーションのディレイ

アニメーションのディレイ(遅延)は、アニメーションの遅延時間を決定するときに使用します。アニメーションはトリガーによって、1秒後に開始します。例えば、「Send Feedback」ボタンに遅延を適用してみました。

遅延時間: 1秒

遅延時間: 2秒

4. アニメーションの再生状態

アニメーションの再生状態は、アニメーションを一時停止するか継続するかを指定するために使用されます。

  • running
    アニメーションは続行されます。
  • paused
    アニメーションは停止されます。

5. アニメーションの反復回数

インタラクションのカウントは、アニメーションがそのサイクルを何回繰り返すかを決定するために使用されます。

  • infinite
    アニメーションは永遠に繰り返されます。
  • x
    アニメーションはx回繰り返されます。
  • inherit
    アニメーションは親からの値を継承して、繰り返します。

デモページ

6. アニメーションの方向

アニメーションの方向は、アニメーションがどの方向に移動するかを決定するために使用されます。
そのサイズの0%から100%、100%から0%、または0%から100%のいずれであるか、100%から0%への反対など。

  • Normal
    アニメーションは0%から100%に進みます。
  • Reverse
    アニメーションの開始は100%で、0%に向かって移動します。
  • Alternate
    アニメーションは0%から100%に進み、その後100%から0%に戻ります。
  • Alternate-reverse
    アニメーションは100%から0%に進み、その後0%から100%に進みます。

デモページ

7. アニメーションの塗りつぶしモード

アニメーションが終了すると、その間に適用された要素のスタイルは永続的ではありません。アニメーション中にのみ適用され、その後は削除されます。

  • Backward
    アニメーションが終了すると、0%のスタイルが要素に適用されます。
  • Forward
    アニメーションが終了すると、100%のスタイルが要素に適用されます。
  • Both
    基本スタイルは、アニメーションの最初と最後に適用されます。
  • Initial
    このプロパティをデフォルト値に設定します。

デモページ

8. 「will-change」機能

「will-change」機能のおかげで、ブラウザに事前に通知して、アニメーションを適用する要素をマークすることができます。これにより要素をアニメーション化し、CSSのプロパティを変更することができます。それにより、アニメーション中のパフォーマンスの損失を最小限に抑えることができます。

ここでは、アニメーション化されていない場所でも、すべてのアニメーションで使用するようにします。

上記のような使用法は、他の状況では不必要なシステムリソースが割り当てられない可能性があり、パフォーマンスが低下する可能性があります。

そのため、CSSアニメーションはどこでも使えます。

「will-change」機能の詳細については、以下を参照してください。
About the CSS will-change Property

9. CSSの4つの重要な値

キーフレームにはCSSのほとんどすべての値を適用できます。一般的なブラウザでは、position, scale, rotation, opacityの値を簡単に定義できます。

CSSの4つの重要な値

クレジット: HTML5Rock

10. 終わりに

これらのプロパティは、WebサイトにCSSアニメーションを実装するために知っておくべき基本事項です。基本を知った後は、クリエイティブを始めましょう。

CSSアニメーションの多くの事例を見たい場合は、CodepenのCSS Animationsセクションが参考になります。

サイトのキャプチャ

CSS Animations

top of page

©2017 coliss