WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「アニメーションの再生と一時停止」

animation-play-state 「アニメーションの一時停止/再開」

「animation-play-state」は「animation」の動きを「一時停止」や「再開」することができます。

CSS Ver.適用要素継承
3.0--
広告

animation-play-stateの指定方法

プロパティ/設定値意味
animation-play-state : running アニメーションを動かす。再開する
animation-play-state : paused アニメーションを一時停止する
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

animation-play-state のサンプル


<style type="text/css">
.s1{
  animation : sample_s1 6s ease 0s infinite alternate;
  animation-play-state : running;
  height : 50px;
  color  : #fff;
}
@keyframes sample_s1 {
  0%   { width:  50px; background: blue; }
  100% { width: 250px; background: green;}
}
</style>

<!-- html -->
<div>
  <input type="button" value="アニメを一時停止/再開します"
         style="padding:10px;margin-bottom:5px"
         onclick="goAnime()">
</div>
<div id="anime1" class="s1"
     style="animation-play-state:running">ABC</div>

<!-- JavaScript -->
<script type="text/javascript">
function goAnime(){
  var wObj = document.getElementById('anime1');
  if(wObj.style.animationPlayState == "running"){
     wObj.style.animationPlayState = "paused";
  }else{
     wObj.style.animationPlayState = "running";
  }
}
</script>
ABC
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン