CSS | アニメーションの再生・一時停止の指定値と比較

2020-01-102020-09-27CSS アニメーション 基本,CSS

animation-play-stateプロパティを使ってCSSアニメーションの一時停止と再生で指定可能な値と、実装する方法のまとめ、動作サンプル集になります。

動作中の再生や停止は、JavaScriptを使った実装が基本になりますが、マウスホバー・マウスアウトやチェックボックスを使った簡単なアニメーション操作ならCSSだけでも実装可能となっています。

animation-play-stateの記述方法

CSSアニメーションの再生状態を指定、変更可能にするにはanimation-play-stateの設定プロパティで個別に、またはanimationプロパティにて一括で設定する事が可能です。

animation-play-stateの記述例は以下のようになります。

/* 個別に指定 */
animation-name: animname;

/* まとめて指定 */
animation: anim 3s running;

animation-play-stateに指定可能な値一覧

animation-play-stateにて設定可能な再生状態を示す値はrunningとpausedの2種類となっており、デフォルト値はrunningです。

マウスホバーで再生・一時停止を切り替えるサンプル

animation-play-stateプロパティを利用する際、JavaScriptなどのスクリプトにて処理を実装する場合も多いですが、CSSのみでも簡単な挙動であれば実装するのは簡単です。

伸縮バーアニメーションでanimation-play-stateの値を変更した場合を比較した動作サンプルになります。

See the Pen CSS animation play state (mouse hover) by yochans (@yochans) on CodePen.

この動作サンプルでは、Aはマウスホバー時（:hover）にanimationプロパティを指定したもの、Bは非マウスホバー時にanimationプロパティを指定してanimation-play-stateにてpaused、マウスホバー時にrunningを指定しています。

挙動の違いとしてAはマウスカーソルが要素上から離れた際に元の状態に戻りますが、Bはその状態で一時停止となり、再度マウスカーソルが要素上に入ったら再生を開始します。

実装したいアイテムにもよりますが、これだけでスムーズなアニメーションを用意する事が可能になるかもしれません。

<div class="box">
  <div class="A">A</div>
  <div class="B">B</div>
 </div>

.box{
  display: flex;
}

.box div{
  display: flex;
  width:100px;
  height:100px;
  font-size: 70px;
  color:#FFF;
  background:#0091EA;
  margin:20px;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
}


.A:hover{
  animation: animName 2s linear infinite;
}

.B{
  animation: animName 2s linear infinite paused;
}

.B:hover{
  animation-play-state: running;
}

@keyframes animName {
 0%{
    transform: rotate(0deg);
   }
100%{
    transform: rotate(360deg);
   }
}

チェックボックスを利用して再生・一時停止を切り替える方法

チェックボックスを利用したCSSプロパティ値の変更は良く使われますが、CSSアニメーションにおいても活用可能となっています。

See the Pen CSS animation play state (Toggle button) by yochans (@yochans) on CodePen.

動作サンプルでは、要素をクリックする事で回転開始、再度クリックする事で一時停止するようになっています。

ポイントは、通常状態（チェックされていない時）ではpausedを指定しておき、チェックが入った時にanimation-play-stateの値をrunningに切り替えています。

<div class="box">
  <input type="checkbox" id="sample">
  <label for="sample">★</label>
</div>

.box input[type="checkbox"] {
  display: none;
}

.box label {
  display: flex;
  width:100px;
  height:100px;
  font-size: 70px;
  margin:20px;
  color:#FFF;
  background:#0091EA;
  justify-content: center;
  align-items: center;
  animation: animName 2s linear infinite paused;
}
 

.box input[type="checkbox"]:checked + label{
  animation-play-state: running;
}

@keyframes animName {
 0%{
    transform: rotate(0deg);
   }
100%{
    transform: rotate(360deg);
   }
}

JavaScriptのクリックイベントを利用して再生・一時停止を切り替える方法

JavaScriptのクリックイベントを利用してanimation-play-stateの値を変更、再生・一時停止を切り替える方法になります。

See the Pen CSS animation play state (JavaScript) by yochans (@yochans) on CodePen.

再生用のCSSclassを用意してJavaScriptでそのclassを付与、削除という方法もあると思いますが、今回は直接animation-play-stateの値を切り替えています。

<div id="box">★</div>

#box{
  display: flex;
  width:100px;
  height:100px;
  font-size: 70px;
  margin:20px;
  color:#FFF;
  background:#0091EA;
  justify-content: center;
  align-items: center;
  animation: animName 2s linear infinite paused;
}
 
@keyframes animName {
 0%{
    transform: rotate(0deg);
   }
100%{
    transform: rotate(360deg);
   }
}

const box = document.getElementById('box');
let state = 'paused';

box.addEventListener('click', () => {
  
  
  if(state === 'paused'){
    
     state = 'running';
     box.style.animationPlayState = 'running';
    
  }else if(state === 'running'){
    
     state = 'paused';
     box.style.animationPlayState = 'paused';
    
  }
  
}, false);

※サンプルではCSSアニメーションが再生中か一時停止中か判別するのに変数を使っていますが、複雑なコンテンツであればCSSからanimation-play-stateの値を取得して判別した方が良いかもしれません。

jQueryのクリックイベントを利用して再生・一時停止を切り替える方法

jQueryのクリックイベントを利用してanimation-play-stateの値を変更、再生・一時停止を切り替える方法になります。

See the Pen CSS animation play state (JavaScript) by yochans (@yochans) on CodePen.

基本的にはJavaScriptと同じようにクリックイベントから処理を実装しています。

JQueryでのanimation-play-stateプロパティ値の変更はcss()で切り替える事が可能です。

<div id="box">★</div>

#box{
  display: flex;
  width:100px;
  height:100px;
  font-size: 70px;
  margin:20px;
  color:#FFF;
  background:#0091EA;
  justify-content: center;
  align-items: center;
  animation: animName 2s linear infinite paused;
}
 
@keyframes animName {
 0%{
    transform: rotate(0deg);
   }
100%{
    transform: rotate(360deg);
   }
}

let state = 'paused';

$('#box').click(function() {
  
  if(state === 'paused'){
    
     state = 'running';
     $(this).css('-webkit-animation-play-state', 'running');
    
  }else if(state === 'running'){
    
     state = 'paused';
     $(this).css('-webkit-animation-play-state', 'paused');
    
  }
  
});

※サンプルではCSSアニメーションが再生中か一時停止中か判別するのに変数を使っていますが、複雑なコンテンツであればCSSからanimation-play-stateの値を取得して判別した方が良いかもしれません。