検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptでCSS3アニメーションイベントをキャプチャする方法

JavaScriptでCSS3アニメーションイベントをキャプチャする方法

Lisa Kudrow
Lisa Kudrowオリジナル
2025-02-25 11:31:11555ブラウズ

How to Capture CSS3 Animation Events in JavaScript

キーポイント

  • JavaScriptは、イベントハンドラーを要素に追加してCSS3アニメーションを管理し、アニメーションを順番に再生するなど、アニメーションを細かく制御できるようにすることができます。キャプチャできるイベントには、「AnimationStart」、「AnimationItration」、および「AnimationEnd」の3つのタイプがあります。
    • これらのアニメーションイベントのクロスブラウザー互換性は、カスタム関数を使用してすべてのプレフィックスされた名前と未定の名前を呼び出すことで実現できます。これにより、イベントハンドラーをコード行を使用して割り当てることができます。
  • addEventListenerアニメーションリスナー関数に渡されたイベントオブジェクトは、アニメーション名とアニメーションの開始以来の経過時間を提供します。これを使用して、特定のアニメーションが終了したときに他のコードを実行し、特定の順序で別のCSS3アニメーションを適用するなど、他のコードを実行できます。
    • CSS3アニメーションはスムーズで簡単に実装できますが、JavaScriptとは異なり、フレームごとの制御はありません。幸いなことに、イベントハンドラーを任意の要素に適用して、アニメーション状態を決定できます。これにより、さまざまなアニメーションを順番に再生するなど、細かい制御が可能になります。

このシンプルなCSS3アニメーションを考えてみましょう：

<code class="language-css">#anim.enable {
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* 动画 */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}</code>
クラスがID

の要素に適用されると、enableという名前のアニメーションが3回実行されます。各反復は1秒間続き、その間に要素がフェードアウトしてからフェードインします。 anim アニメーションが発生すると、flash 3種類のイベントがトリガーされます。

アニメーションが最初に開始されたとき、animationstart

イベントが起動されます。 
<code class="language-javascript">var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);</code>

animationstart

animationiteration

イベントは、新しいアニメーションの各反復、つまり最初の反復を除く各反復の各反復の先頭に発生します。 
<code class="language-javascript">anim.addEventListener("animationiteration", AnimationListener, false);</code>

animationiteration

animationend

アニメーションの終わりにイベントが発射されます。 
<code class="language-javascript">anim.addEventListener("animationend", AnimationListener, false);</code>

animationendブラウザー互換性執筆時点で、Firefox、Chrome、Safari、Opera、およびIE10は、CSS3アニメーションと関連するイベントハンドラーをサポートしています。さらに、Opera、IE10、およびWebKitブラウザはプレフィックスを使用しており、完全に防止するためにいくつかのケース変更を加えました...

W3C Standard Firefox webKitオペラIE10

animationstartanimationstart webkitAnimationStart oanimationstart MSAnimationStartanimationiteration animationiteration webkitAnimationIterationoanimationiteration MSAnimationIterationanimationendanimationendwebkitAnimationEnd oanimationend MSAnimationEnd

addEventListenerプレフィックスの問題を解決する最も簡単な方法は、カスタム関数を使用してすべての接頭辞と未解像度の名前を呼び出すことです。 

<code class="language-javascript">var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p] + type, callback, false);
    }
}</code>
クロスブラウザーイベントハンドラーは、コードの行を使用して割り当てることができます：

<code class="language-css">#anim.enable {
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* 动画 */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}</code>

イベントオブジェクト

上記のコードでは、アニメーションイベントが発生するたびに

関数が呼び出されます。イベントオブジェクトは、単一のパラメーターとして渡されます。標準のプロパティとメソッドに加えて、次のことも提供します。 AnimationListener

    ：css3アニメーション名（つまり
  • ）animationName flash
    • ：アニメーションの開始以来の時間（秒単位）。
  • elapsedTime したがって、
アニメーションがいつ終了するかを検出できます。たとえば、

flash たとえば、

コードは、既存のクラスを削除したり、特定の順序で別のCSS3アニメーションを適用したりできます。 
<code class="language-javascript">var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);</code>

javascriptのCSS3アニメーションイベントデモンストレーションを表示

デモページにボタンが表示されます。クリックすると、「enable」クラスが切り替えられ、アニメーションが開始されます。アニメーションイベントがトリガーされると、ステータスがコンソールに表示されます。アニメーションが終了すると、ボタンを再度クリックできるように「有効」クラスが削除されます。

興味深いプロジェクトでアニメーションイベントキャプチャを使用する場合は、お知らせください。 flash

（この記事を読むのが好きなら、学習できるのが気に入るはずです。これはマスターから新しいスキルとスキルを学ぶ場所です。現実の世界のCSS3）

（この記事のコメントは閉じられています。CSSについて質問はありますか？フォーラムで尋ねてみませんか？）

CSS3アニメーションとJavaScriptイベントハンドラーについてのFAQ（FAQ） CSS3アニメーションとJavaScriptイベントハンドラーとは何ですか？

CSS3アニメーションは、JavaScriptやFlashを使用せずにHTML要素をアニメーション化できるCSS3（Cascading StyleSheets）の機能です。追加のリソースなしで、CSSコードでシンプルなアニメーションを直接作成する方法を提供します。一方、JavaScriptイベントハンドラーは、特定のイベントが発生したときにトリガーするJavaScriptの関数です。これらのイベントは、ユーザーがボタンをクリックしたり、ページの読み込みをしたり、アニメーションを終了したりするなど、あらゆるイベントにすることができます。 CSS3アニメーションとJavaScriptイベントハンドラーを使用して、動的なインタラクティブなWebコンテンツを作成します。

CSS3アニメーションでJavaScriptイベントハンドラーを使用する方法は？

CSS3アニメーションを備えたJavaScriptイベントハンドラーを使用するには、アニメーション化するHTML要素にイベントリスナーを追加する必要があります。このイベントリスナーは、アニメーションの最後にJavaScript関数をトリガーします。基本的な例は次のとおりです

このコードでは、「AnimationEnd」は私たちが聴いているイベントであり、CSS3アニメーションが完了したときに発火します。

CSS3トランジションを備えたJavaScriptイベントハンドラーを使用できますか？

はい、CSS3アニメーションと同じように、CSS3トランジションを備えたJavaScriptイベントハンドラーを使用できます。聞く必要があるイベントは「TransitionEnd」です。このイベントは、CSSの移行が完了した後に解雇されます。 
<code class="language-javascript">anim.addEventListener("animationiteration", AnimationListener, false);</code>

JavaScriptを使用してCSS3アニメーションの時間を制御する方法は？

JavaScriptを使用して、「アニメーション」プロパティを使用してCSS3アニメーションの時間を制御できます。このプロパティは、アニメーションの開始時の遅延を設定します。このプロパティを次のようにJavaScriptに設定できます： このコードでは、ページが2秒間ロードされた後にアニメーションが開始されます。 

<code class="language-css">#anim.enable {
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* 动画 */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}</code>

JavaScriptを使用してCSS3アニメーションを繰り返す方法は？

「アニメーションアイテーションカウント」プロパティを使用して、JavaScriptを使用してCSS3アニメーションを繰り返すことができます。このプロパティは、アニメーションを再生する回数を指定します。このプロパティを次のようにJavaScriptに設定できます： このコードでは、アニメーションが無期限に繰り返されます。

JavaScriptを使用してCSS3アニメーションの速度を変更できますか？ 
<code class="language-javascript">var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);</code>

はい、JavaScriptを使用してCSS3アニメーションの速度を変更できます。 「アニメーション期間」プロパティは、アニメーションがサイクルを完了するのにかかる時間の長さを制御します。このプロパティを次のようにJavaScriptに設定できます： このコードでは、アニメーションは2秒間続きます。

JavaScriptを使用してCSS3アニメーションを一時停止して復元する方法は？

「アニメーションプレイステート」プロパティを使用してJavaScriptを使用してCSS3アニメーションを一時停止して復元できます。このプロパティは、アニメーションが実行されているか一時停止しているかを設定します。このプロパティを次のようにJavaScriptに設定できます：<code class="language-javascript">anim.addEventListener("animationiteration", AnimationListener, false);</code> このコードでは、アニメーションが一時停止されます。

JavaScriptを使用してCSS3アニメーションの方向を変更できますか？

はい、JavaScriptを使用してCSS3アニメーションの方向を変更できます。 「アニメーション方向」プロパティは、交互のサイクル中にアニメーションを逆に再生する必要があるかどうかを定義します。このプロパティを次のようにJavaScriptに設定できます： このコードでは、アニメーションが後方に再生されます。 
<code class="language-javascript">anim.addEventListener("animationend", AnimationListener, false);</code>
JavaScriptを使用してCSS3アニメーションの終わりを検出する方法は？

JavaScriptを使用して、「AnimationEnd」イベントにイベントリスナーを追加することで、CSS3アニメーションの終了を検出できます。このイベントは、CSS3アニメーションが完了した後に解雇されます。それを行う方法は次のとおりです

JavaScriptを使用してCSS3アニメーションのアニメーション - タイミング機能を変更できますか？

はい、JavaScriptを使用してCSS3アニメーションの「アニメーション - タイミング機能」を変更できます。このプロパティは、アニメーションの速度曲線を指定します。このプロパティを次のようにJavaScriptに設定できます：
<code class="language-javascript">var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p] + type, callback, false);
    }
}</code>

このコードでは、アニメーションがゆっくりで開始され、加速します。

以上がJavaScriptでCSS3アニメーションイベントをキャプチャする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html5 firefox css chrome safari css3 html webkit count function 对象 事件 样式表 animation
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：パディングストリングと数字のユーティリティ関数次の記事：パディングストリングと数字のユーティリティ関数

関連記事

続きを見る