CSS を使用して CSS アニメーションの一時停止および再生機能を実装するチュートリアル

CSS は、フォント、色、位置などのスタイル構造を定義する言語です。Web ページ上の情報をフォーマットして表示する方法を記述するために使用されます。 CSS スタイルは、HTML Web ページに直接保存することも、別のスタイル シート ファイルに保存することもできます。いずれの場合も、スタイル シートには、指定されたタイプの要素にスタイルを適用するためのルールが含まれています。このセクションでは、CSS を使用して CSS アニメーションの一時停止および再生機能を実装するチュートリアルを共有します。

CSS3 アニメーションには、アニメーションを一時停止および再生できるプロパティがあることがわかっています:

{ 
   animation-play-state: paused | running; 
 }

animation-play-state: このプロパティは、アニメーションが実行中か一時停止かを定義します。これをクエリして、アニメーションが実行中かどうかを確認できます。さらに、その値を設定してアニメーションの再生を一時停止および再開することができます。

JavaScript を使用すると、CSS アニメーションの実行と再生を制御できます。いくつかの主要なコードを以下に示します。

<div class="btn">stop</div>  <div class="animation"></div> 
 <style>  .animation {      animation: move 2s linear infinite alternate;  } 
  @keyframes move {      0% {          transform: translate(-100px, 0);      }  
      100% {          transform: translate(100px, 0);      }  }
        </style> document.querySelector(&#39;.btn&#39;).addEventListener(&#39;click&#39;, function() 
        {      let btn = document.querySelector(&#39;.btn&#39;);      let elem = document.querySelector(&#39;.animation&#39;);  
            let state = elem.style[&#39;animationPlayState&#39;];            if(state === &#39;paused&#39;)
             {          elem.style[&#39;animationPlayState&#39;] = &#39;running&#39;;          btn.innerText = &#39;stop&#39;;      }
              else {          elem.style[&#39;animationPlayState&#39;] = &#39;paused&#39;;          btn.innerText = &#39;play&#39;;      }        }); 
Demo — pause CSS Animation(https://codepen.io/Chokcoco/pen/GWYBdM)

純粋な CSS 実装

純粋な CSS を使用して実現できるかどうかを調べてみましょう。

hover 擬似クラスの実装

hover 擬似クラスを使用して、マウスがボタン上に移動したときのアニメーション スタイルの一時停止を制御します。

キーコードは次のとおりです:

<div class="btn stop">stop</div> 
 
<div class="animation"></div> 
 
<style> 
 .stop:hover ~ .animation { 
 
    animation-play-state: paused; 
 
} 
 
</style>

デモ — CSSアニメーション(ホバー)の一時停止と再生を実装する純粋なCSSメソッド: (https://codepen.io/Chokcoco/pen/PpxKBX)

もちろん、これはマウスの自由を放し、一度クリックして一時停止し、もう一度クリックして再生するという方法は賢明ではありません。他の方法はありますか?

チェックされた疑似クラスの実装

前の記事「興味深い CSS トピック (8): Pure CSS ナビゲーション バー タブの切り替えソリューション」でも、ラジオ タグのチェックされた疑似クラスの使用と、Pure の実装について説明しました。クリックイベントをキャプチャするCSS。

クリックされた要素を使用して、いくつかの CSS スタイルを制御できます。実装は次のとおりです:

<input id="stop" type="radio" name="playAnimation" /> 
 
<input id="play" type="radio" name="playAnimation" /> 
 
<div class="box"> 
 
    <label for="stop"> 
 
        <div class="btn">stop</div> 
 
    </label> 
 
    <label for="play"> 
 
        <div class="btn">play</div> 
 
    </label> 
 
</div> 
 
<div class="animation"></div>

主要な CSS コードの一部:

.animation { 
 
    animation: move 2s linear infinite alternate; 
 
} 
 
  
 #stop:checked ~ .animation { 
 
    animation-play-state: paused; 
 
} 
 
  
 #play:checked ~ .animation { 
 
    animation-play-state: running; 
 
}

2 つのラジオ #stop と #play がクリックされると、.animation 要素にanimation-play-state: 一時停止またはアニメーションが割り当てられることを期待します。 -play-state: 実行中。また、2 つのうち 1 つだけが有効になるため、2 つの無線タグには同じ name 属性を与える必要があります。

デモ - CSS アニメーションの一時停止と再生を実現する純粋な CSS メソッド: (https://codepen.io/Chokcoco/pen/QpJwBW)

上記のデモ例では、一時停止を実現するために純粋な CSS メソッドが実装されていますそしてCSSアニメーションの再生。

もちろん、ラジオをチェックボックスに置き換えたり、:target 疑似クラスセレクターを使用して上記と同じ効果を実現するなど、他の方法もあります。興味がある場合は、試してみてください。

上記はCSSを使用してCSSアニメーションの一時停止と再生機能を実装する方法についてのチュートリアルです。

関連する推奨事項:

HTMLとCSSでQQペンギンを作成するチュートリアル

動く猫の顔を実現するcss

css3の簡単なグラフィック描画チュートリアル

以上がCSS を使用して CSS アニメーションの一時停止および再生機能を実装するチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。