animation-play-state: paused;
で実行中のアニメーションを一時停止できる。
実際に動作を確認したい人向け
https://jsfiddle.net/junya_5102/ttc43Lry/
Sample Code
html
<button id="reset">RESET</button>
<input id="stop" type="checkbox"><label for="stop">STOP</label>
<div class="box"></div>
css
.box{
position: relative;
left: 0;
width: 100px;
height: 100px;
margin-top: 50px;
border: 50px inset blue;
box-sizing: border-box;
/* animation */
animation: turn_anim 1s linear infinite alternate;
}
/* stop */
#stop:checked ~ .box{
animation-play-state: paused;
}
/* reset */
#reset:active ~ .box{
animation: none;
}
@keyframes turn_anim{
100%{
left: 100px;
}
}
animation-play-stateについて
値は running
と paused
の2つです
runningと指定するとアニメーションが実行されます。
初期値なので省略が可能
pausedと指定するとアニメーションを停止できます。
停止中のアニメーションを再開すると停止した時の状態から再開されます。
詳細は下記URLを参照
animation-play-state - CSS | MDN