CSSアニメーション | animation-play-stateで再生・一時停止を実装する方法まとめ

CSS, CSS アニメーション 基本

css

こちらはCSSアニメーションの一時停止と再生(animation-play-state)で指定可能な値と、実装する方法のまとめ、動作サンプル集になります。

animation-play-stateの設定方法

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

animation-name: animname;
animation-duration: 1s;
animation-play-state: running;
animation: animation 1s running;

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

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

挙動
running(デフォルト値)再生
paused一時停止

animation-play-stateでCSSアニメーションの再生・一時停止させる方法

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の値を取得して判別した方が良いかもしれません。