キーフレームアニメーションの開始のきっかけ（トリガー）

【HTML+CSS】ホバー時にスライドで背景色が変わるボタン

Webページの要素に動きをつけるためのCSSの＠規則「@keyframe」。
「@keyframe」で指定したキーフレームアニメーションは、基本的にはページを開くと指定した時間待機してスタートされますが、CSSの記述やjQuery（同じ動作をするJavaScriptでも問題ありません）を併せて使用することで、スタートのタイミングをコントロールすることができます。
ここでは、キーフレムアニメーションのスタートのタイミングをまとめました。

Contents

マウスカーソルを要素に乗せる、マウスホーバー

要素にマウスカーソルを載せた時のスタイルを指定する疑似クラス「:hover」に、「animation」プロパティーでアニメーションのキーフレームを指定します。

マウスカーソルを離すと、アニメーション前の状態にアニメーションしないてすぐに戻ります。

サンプルページでボタンにマウスカーソルを乗せた後、アニメーションの途中でカーソルを離すとわかるかと思いますが、アニメーションの途中で離すと、最初の状態にすぐ戻ります。

ホーバー時のアニメーションで、カーソルを離した時に逆再生するアニメーションを付与したい場合は、CSSの「transition」プロパティでアニメーションを指定すると良いです。

→マウスホーバーサンプル

サンプルのHTMLソース

ボタンのスタイルを設定しているクラス「trigger_sample_button」をボタンの要素「a」タグに指定しているだけです。
アニメーションの設定は全てCSSでおこないます。

  1. <div><p><a href="" class="trigger_sample_button">サンプルボタン</a></p></div>

サンプルのCSSの記述

  1. @keyframes hover_animation {
  2.   100% {
  3.     background: #000000;
  4.     color: #ffffff;
  5.   }
  6. }
  7. .trigger_sample_button {
  8.   padding: 20px 40px;
  9.   border-radius: 40px;
  10.   text-decoration: none;
  11.   background-color: #ffffff;
  12.   color: #000000;
  13. }
  14. .trigger_sample_button:hover {
  15.   animation-name: hover_animation;
  16.   animation-duration: 0.5s;
  17.   animation-fill-mode: both;
  18. }

1〜6行目がアニメーションの指定です。
ここではアニメーション完了時のスタイルのみ指定しています。
アニメーションが「100%」の完了時に背景色を黒、文字を白にします。

7〜13行目は、サンプルボタンのスタイルです。
アニメーションしていない時の指定、初期設定です。
背景色は白、文字色は黒、アニメーションすると色の指定が反転するようなイメージです。

14〜18行目がマウスカーソルがボタンの上に乗った時のスタイルを疑似要素「:hover」で指定しています。
15行目に1〜6行目で指定したアニメーションを「animation-name」プロパティで指定しています。
16行目の「animation-duration」プロパティでアニメーションの再生時間を指定、今回は0.5秒でアニメーションします。
17行目はアニメーション再生後のスタイルの指定です。アニメーション完了後はアニメーションを繰り返さないように設定しています。

要素のクリック

jQueryを使用してクリックのイベントを指定します。

jQueryでクリックイベントにキーフレームアニメーションを指定したクラスを付与して、アニメーションをスタートさせます。

アニメーションの終了は、jQueryのアニメーション終了イベント「animated」でクリック時に付与した削除します。

→クリックトリガーサンプル

サンプルのHTMLソース

ホーバーの時と同様、ボタンのスタイルを設定しているクラス「trigger_click_sample_button」をボタンの要素「a」タグに指定しているだけです。
アニメーションの設定は全てCSSでおこないます。
jQueryでは、アニメーション開始と終了の設定をします。

  1. <div><p><a href="" class="trigger_click_sample_button">サンプルボタン</a></p></div>

サンプルのCSSソース

  1. @keyframes click_animation{
  2.   0%{
  3.     // 初期値はボタンのスタイルで指定
  4.   }
  5.   100%{
  6.     // アニメーション完了時のスタイル
  7.     background: #000000;
  8.     color: #ffffff;
  9.   }
  10. }
  12. .trigger_click_sample_button{
  13.   padding: 20px 40px;
  14.   border-radius: 40px;
  15.   text-decoration: none;
  17.   background-color: #ffffff;
  18.   color: #000000;
  19. }
  21. .start_animation_click{
  22.   // キーフレームアニメーションを指定
  23.   animation-name: click_animation;
  24.   // アニメーションの時間を指定
  25.   animation-duration: 0.5s;
  26.   //アニメーション再生後のスタイルを指定
  27.   animation-fill-mode: both;
  28. }

1〜10行目がアニメーションの指定です。
ここではアニメーション完了時のスタイルのみ指定しています。
アニメーションが「100%」の完了時に背景色を黒、文字を白にします。

12〜19行目は、サンプルボタンのスタイルです。
アニメーションしていない時の指定、初期設定になります。
背景色は白、文字色は黒、アニメーションすると色の指定が反転するようなイメージです。

21〜28行目がjQueryで付与するアニメーションのスタイルを指定したクラスです。
ホーバーのトリガーの解説で使用したスタイルと同じです。

サンプルのjQueryソース

  1. $(function () {
  2.   $('.trigger_click_sample_button').on({
  3.     'click':function(){
  4.       // aタグのデフォルトの動作を削除
  5.       event.preventDefault();
  6.       // アニメーションのクラス「start_animation_click」を付与
  7.       $(this).addClass('start_animation_click');
  8.     }
  9.   ,
  10.     'animationend':function(){
  11.       // アニメーションが完了したら「start_animation_click」を削除
  12.       $(this).removeClass('start_animation_click');
  13.     }
  14.   });
  15. });

2〜14行目でサンプルボタンにスタイルを指定しているクラス「trigger_click_sample_button」のクリック時の動作、アニメーションが完了した時の動作を設定しています。

3〜8行目でクリック時の動きを指定しています。
5行目はボタンのスタイルを指定したaタグをクリックした時のデフォルトの動作（リンクをクリックした時にページ遷移する）をキャンセルしています。今回のトリガーの動作には直接関係ありません。

7行目はボタンをクリックした際に、アニメーションの動きを指定しているCSSのクラス「start_animation_click」を「trigger_click_sample_button」に付与する動きを指定しています。

10〜13行目がアニメーション完了した際の動きの指定です。
先の3行ではクリック時のイベント「click」を指定していましたが、ここではアニメーション完了時のイベント「animationend」を指定しています。
そして12行目で、アニメーションが完了したらクリック時に付与された「start_animation_click」クラスを削除しています。
そしてボタンのスタイルを初期状態に戻しています。

画面のスクロール

クリックと同じく、jQueryを使用します。

jQueryでスクロールイベントをきっかけに、アニメーションを指定した要素が画面内に表示されたタイミングで、キーフレームアニメーションを指定したクラスを付与して、アニメーションをスタートさせます。

アニメーションを終了はキーフレームアニメーションのCSSの記述の仕方で変わります。
（キーフレームアニメーションのプロパティ「animation-fill-mode」（アニメーション再生後のスタイル指定）、「animation-iteration-count」（再生回数））

再生後に、指定した要素が画面外に出たらアニメーションをリセットしたい場合は、要素が外に出たタイミングで、アニメーションのクラスを削除します。

→スクロールトリガーサンプル

サンプルのHTMLソース

  1. <div class="display_flex width100vw height100vh align_items_center justify_content_center flex_direction_column">
  2.     <div><h1 class="font_size_small">キーフレームアニメーショントリガー「スクロール」</h1></div>
  3.     <div>
  4.       <p class="text_align_center">下にスクロールしてください。<br>↓↓↓</p>
  5.     </div>
  6.   </div>
  7.   <div class="display_flex width100vw height100vh align_items_center justify_content_center flex_direction_column">
  8.     <div><p>ボタンが画面に入ると、ボタンの色が変わる</p></div>
  9.     <div><p><a href="" class="trigger_scroll_sample_button">サンプルボタン</a></p></div>
  10.   </div>

スクロールトリガーサンプルのHTMLですが、多くの記述はボタンのサンプルの位置調整のための記述です。
サンプルのアニメーションするボタンに関する記述は、9行目のみです。
記述内容はこれまでのサンプルと同じ、ボタンのスタイルの初期設定クラス「trigger_scroll_sample_button」をボタンのaタグに付与しているだけです。

アニメーションの設定はこれまで同様にCSSで、アニメーションのトリガーはjQueryで設定します。

サンプルのCSSソース

  1. @keyframes scroll_animation{
  2.   0%{
  3.     // 初期値はボタンのスタイルで指定
  4.   }
  5.   100%{
  6.     // アニメーション完了時のスタイル
  7.     background: #000000;
  8.     color: #ffffff;
  9.   }
  10. }
  12. .trigger_scroll_sample_button{
  13.   padding: 20px 40px;
  14.   border-radius: 40px;
  15.   text-decoration: none;
  17.   background-color: #ffffff;
  18.   color: #000000;
  19. }
  21. .start_animation_scroll{
  22.   // キーフレームアニメーションを指定
  23.   animation-name: scroll_animation;
  24.   // アニメーションの時間を指定
  25.   animation-duration: 3s;
  26.   //アニメーション再生後のスタイルを指定
  27.   animation-fill-mode: both;
  28. }

1〜10行目がアニメーションの指定です。
ここではアニメーション完了時のスタイルのみ指定しています。
アニメーションが「100%」の完了時に背景色を黒、文字を白にします。

12〜19行目は、サンプルボタンのスタイルです。
アニメーションしていない時の指定、初期設定になります。
背景色は白、文字色は黒、アニメーションすると色の指定が反転するようなイメージです。

21〜28行目がjQueryで付与するアニメーションのスタイルを指定したクラスです。
ホーバーやクリックのトリガーの解説で使用したスタイルと同じです。
違う点は、アニメーションの時間を3秒にしたこと（他のサンプルは０.5秒）です。
スクロールした時にアニメーションを確認しやすいように時間を長くしています。

サンプルのjQueryソース

  1. $(function () {
  2.   $(window).scroll(function(){
  3.     var windowHeight = $(window).height(),
  4.     scrollY = $(window).scrollTop(),
  5.     buttonPosition = $('.trigger_scroll_sample_button').offset().top;
  7.     if(scrollY > buttonPosition - windowHeight){
  8.       $('.trigger_scroll_sample_button').addClass('start_animation_scroll');
  9.     }else{
  10.       $('.trigger_scroll_sample_button').removeClass('start_animation_scroll');
  11.     }
  12.   });
  13. });

2行目でブラウザのウィンドウのスクロールイベントを取得するために、「$(window).scroll()」でイベントを登録しています。

3〜5行目に変数を定義しています。
ウィンドウ内がスクロールされる度に値が上書きされます。

  • windowHeight・・・ウィンドウの高さ
  • scrollY・・・ウィンドウが下方向にスクロールされた数値
  • buttonPosition・・・サンプルボタンの縦方向の位置

これらの変数をスクロールの都度、更新しつつ、サンプルボタンがウィンドウ内に入ったかどうかを判定します。

7〜11行目はサンプルボタンがウィンドウ内に入ったかどうかを判定する記述です。
条件文「if(scrollY > buttonPosition – windowHeight)」の意味ですが、「scrollYの値が、buttonPositionの値から windowHeightの値を差し引いた値よりも大きい時」という意味です。
こちらの条件に当てはまる時に、サンプルボタン「trigger_scroll_sample_button」にクラス「start_animation_scroll」を付与し、条件から外れた時にクラスを削除します。

そうすることで、サンプルボタンが画面内に入ったらアニメーションを開始、画面から外れたら、スタイルをリセットしてアニメーションする前の状態に戻します。

・・・以上です。
要素が画面に入ってきてからアニメーションを実行するスクロールイベントは、さまざまなサイトのアニメーションに利用されているもので、応用範囲が広い手法と言えます。

関連記事

  1. 【HTML+CSS】ホバー時にスライドで背景色が変わるボタン

    要素が画面に入ると要素をフェードインで表示するJavaScriptのサ…

  2. 【HTML+CSS】ホバー時にスライドで背景色が変わるボタン

    【HTML+CSS】ホバー時にスライドで背景色が変わるボタン

  3. 【HTML+CSS】ホバー時にスライドで背景色が変わるボタン

    幅をゼロから指定のサイズまでアニメーションさせる、かんたんなCSSアニ…

  4. 【実例】ページ表示スピードの改善方法

    【実例】ページ表示スピードの改善方法