CSSアニメーションは確実に進化している！キーフレームを使ったCSSアニメーションの実装ポイントまとめ
Post on:2017年4月11日
sponsors
CSSアニメーションは確実に進化しています。
ユーザーを楽しませるだけでなく、ユーザーの注意をつかみ、サイトのゴールに導くための重要な手段にもなります。
単調なアニメーションではなく、キーフレームを使い、タイミング・ディレイ・反復・方向・「will-change」機能を使ったCSSアニメーションの実装のポイントを紹介します。
How to Use CSS Animations Like a Pro
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- 1. キーフレーム
- 2. アニメーションのタイミング
- 3. アニメーションのディレイ
- 4. アニメーションの再生状態
- 5. アニメーションの反復回数
- 6. アニメーションの方向
- 7. アニメーションの塗りつぶしモード
- 8. 「will-change」機能
- 9. CSSの4つの重要な値
- 10. 終わりに
1. キーフレーム
状態を徐々に変化させることで、ページ上のオブジェクトをアニメーション化します。ここでポイントとなるのがキーフレームで、各ステージごとにオブジェクトの動作をコントロールできます。
|
1 2 3 4 5 6 7 8 9 10 11 |
@keyframes pulse { 0% { transform: scale3d(1, 1, 1); } 50%{ transform: scale3d(1.1, 1.1, 1.1); } 100% { transform: scale3d(1, 1, 1); } } |
上記のコードを見てみましょう。
- アニメーションの名前は、「pulse」です。
- 0%（開始時）、50%（x時）、100%（終了時）の3つのステージから構成されます。
- CSSの値は、「scale3d(x, y, z)」です。
「@keyframes」でアニメーションを定義すると、私たちは以下をコントロールできます。
- アニメーションがどれだけ持続するか。
- アニメーションがどれくらい遅れて開始するか。
- アニメーションの繰り返しの頻度。
- アニメーションの方向。
簡単な実装例を見てみましょう。
|
1 2 3 4 |
button { animation-duration: 1s; animation-name: pulse; } |
上記のコードでは、ボタンにアニメーションを与え、継続時間を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サイトで入手できます。
See the Pen How to Use CSS Animations Like a Pro - animation-timing-function by Ibrahim Nergiz (@phyesix) on CodePen.
3. アニメーションのディレイ
アニメーションのディレイ（遅延）は、アニメーションの遅延時間を決定するときに使用します。アニメーションはトリガーによって、1秒後に開始します。例えば、「Send Feedback」ボタンに遅延を適用してみました。
遅延時間: 1秒
遅延時間: 2秒
See the Pen How to Use CSS Animations Like a Pro - animation-delay by Ibrahim Nergiz (@phyesix) on CodePen.
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のプロパティを変更することができます。それにより、アニメーション中のパフォーマンスの損失を最小限に抑えることができます。
|
1 2 3 |
button { will-change: transform, opacity; } |
ここでは、アニメーション化されていない場所でも、すべてのアニメーションで使用するようにします。
|
1 2 3 |
*, *::before, *::after { will-change: all } |
上記のような使用法は、他の状況では不必要なシステムリソースが割り当てられない可能性があり、パフォーマンスが低下する可能性があります。
そのため、CSSアニメーションはどこでも使えます。
「will-change」機能の詳細については、以下を参照してください。
About the CSS will-change Property
9. CSSの4つの重要な値
キーフレームにはCSSのほとんどすべての値を適用できます。一般的なブラウザでは、position, scale, rotation, opacityの値を簡単に定義できます。
クレジット: HTML5Rock
10. 終わりに
これらのプロパティは、WebサイトにCSSアニメーションを実装するために知っておくべき基本事項です。基本を知った後は、クリエイティブを始めましょう。
CSSアニメーションの多くの事例を見たい場合は、CodepenのCSS Animationsセクションが参考になります。
sponsors
