CSSカスタムプロパティを使用してCSSアニメーションを再生および一時停止する方法

CSSアニメーションの再生と一時停止：CSSカスタムプロパティを使用して細かい制御

この記事では、CSS @keyframesアニメーションについて説明し、アニメーションを一時停止および制御する方法に焦点を当てています。 animation-play-stateプロパティを使用してJavaScriptと協力して制御することができますが、詳細がたくさんあります。 CSSカスタムプロパティを使用して、アニメーションの細かい制御を可能にする、より柔軟なセットアップ方法を紹介します。

アニメーションを一時停止することの重要性

CSS駆動型のスライドを開発するとき、私は興味深い現象に気づきました：ウィンドウにないアニメーションはまだ実行されています！これは私に考えさせます：これらの実行中のアニメーションはまだCPU/GPUリソ​​ースを消費しているので、ページのパフォーマンスに影響しますか？

DevToolsのパフォーマンスパネルは、「画面外」フレームのアニメーション消費を直接表示することはできませんが、スライドから離れて再び戻るときはアニメーションが一時停止しませんが、次の画面まで実行され続けます。

したがって、アニメーションがどのように一時停止されるかを研究することが重要です。これは以下に関連しています。

1. パフォーマンス：不必要なリソース消費を避けてください。
2. コントロール：アニメーションに対するユーザー制御を提供します。
3. アクセシビリティ：一部のユーザーがアニメーションに敏感である可能性があることを考慮してください。

アニメーションを一時停止する基本的な方法

CSSでは、アニメーションを一時停止する唯一の方法は、 animation-play-stateプロパティを使用して、その価値を一時pausedことです。

 .paused {
  Animation-Play-State：一時停止。
}

JavaScriptでは、このプロパティはanimationPlayStateであり、設定方法は次のとおりです。

 element.style.animationPlayState = 'Poused';

animationPlayStateの現在の値を読むことで、プレイ/一時停止の切り替えを作成できます。

 const running = element.style.animationPlayState === 'running';
element.style.animationPlayState = running？ 「一時停止」：「ランニング」;

アニメーションを一時停止するもう1つの方法は、 animation-durationを0sに設定することです。アニメーションは実際にはまだ実行されていますが、期間がゼロであるため、アクションは見られません。ただし、これは実際の一時停止ではありません。

アニメーションの直接削除（ animation: none !important; ）も実際の一時停止ではありません。

データ属性とCSSを使用したカスタムプロパティ

データ属性（ data-animationなど）をCSSセレクターとして使用し、CSSカスタム属性をアニメーション属性の値として使用します。

<div data-animation=""></div>

 [データアニメーション] {
  アニメーション：
    var（ -  animn、なし）
    var（ -  animdur、1s）
    var（ -  animtf、linear）
    var（ -  animdel、0s）
    var（ - アニック、無限）
    var（ -  animdir、代替）
    var（ -  animfm、なし）
    var（ -  animps、running）;
}

カスタムプロパティを通じて、アニメーションのすべての側面を制御できます。 CSSカスタムプロパティの利点は、CSSとJavaScriptで読み取り、設定できることであり、CSSコードの量を減らすことができることです。

アニメーション自体はクラスセレクターを使用し、 [data-animation]セレクターの変数を更新します。

 /*アニメーションクラス*/
.a-pulse {
   - アニムン：パルス;
}
.ASLIDE {
  -Animdur：3s;
   - アニムン：スライド;
}

/* keyframe*/
@KeyFrames Pulse {
  / * ... */
}
@KeyFramesスライド{
  / * ... */
}

例：チェックボックスのトリックを使用して、アニメーションを一時停止します

すべてのアニメーションの一時停止を制御するチェックボックスを作成します。

<input type="checkbox" id="data-animation-pause">

 [data-alimation-ase]：checked〜 [data-animation] {
  -Animps：一時停止。
}

チェックボックスをクリックして、JavaScriptなしですべてのアニメーションを一時停止/再生します。

CSSのみのスライドショー

私は使用します<details></details>タグは、アクティブなアニメーションautoplayにスライドを自動的に切り替えるスライドを作成します。各スライドには独自のセカンダリアニメーションがあります。 --animps属性はアニメーションの再生ステータスを制御し、 --img-animps属性はセカンダリアニメーションの再生ステータスを制御します。

GPUの過負荷を防ぐために、理想的には、メインアニメーションはすべてのセカンダリアニメーションを一時停止する必要があります。 Chromeブラウザー（現在） @keyframesアニメーションからCSSカスタムプロパティを更新できます。

メインアニメーション@keyframesで--img-animpsプロパティを更新します：

 @keyframes autoplay {
  / * ... */
  51％{-img-animps：一時停止} /*停止！ */
  / * ... */
}

他のブラウザと互換性があるため、初期値runningために設定する必要があります。

prefers-reduced-motion有効にします

prefers-reduced-motionメディアクエリを使用して、ユーザーの好みに応答できます。

 @media（reduced-motionを好む）{
  [data-animation = "代替"] {
    -Animdur：4s;
     - アニムン：不透明。
  }
  / * ... */
}

JavaScriptを使用してアニメーションを一時停止します

JavaScriptを使用して、すべての[data-animation]要素を繰り返し、 --animps属性を切り替えることができます。

 // ... JavaScriptコード...

IntersectionObserverを使用します

アニメーションを自動的に再生して一時停止するには、 IntersectionObserver使用できます。

 // ... JavaScriptコード...

スライドにオーディオを追加する（ボーナス）

オーディオタグを追加し、その再生を制御し、JavaScriptで一時停止します。

<audio src="your-audio.mp3"></audio>

 // ... JavaScriptコード...

上記の方法により、CSSアニメーションの再生と一時停止を柔軟に制御し、ページのパフォーマンスとアクセシビリティを改善できます。

以上がCSSカスタムプロパティを使用してCSSアニメーションを再生および一時停止する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。