ホームページ > 記事 > ウェブフロントエンド > CSS を使用して CSS アニメーションの一時停止および再生機能を実装するチュートリアル

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

小云云オリジナル: 2017-11-20 14:59:562917ブラウズ

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アニメーションの一時停止と再生機能を実装する方法についてのチュートリアルです。

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

関連記事