cman.jp > WEBページ作成TOP > CSSリファレンス > 「アニメーションの再生と一時停止」
WEBページ作成
広告
animation-play-state 「アニメーションの一時停止／再開」
「animation-play-state」は「animation」の動きを「一時停止」や「再開」することができます。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | - | - |
広告
animation-play-stateの指定方法
| プロパティ/設定値 | 意味 |
|---|---|
| animation-play-state : running | アニメーションを動かす。再開する |
| animation-play-state : paused | アニメーションを一時停止する |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
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
| 関連するCSS(STYLE) | |
|---|---|
| animation | アニメーションの設定 |
| animation-fill-mode | アニメーションの再生前後のスタイル |
| keyframes | アニメーションの動きを指定 |
| backface-visibility | 裏面の表示 |
| perspective | 子要素の奥行きの指定 |
| perspective-origin | 子要素の奥行きのx軸・y軸方向の位置 |
| transition | トランジションの設定 |
| transition-delay | トランジションのディレイ |
| transition-duration | トランジションの再生時間 |
| transition-property | トランジション対象のCSSプロパティ |
| transition-timing-function | トランジションの速度 |
| animation-delay | アニメーションのディレイ |
| animation-direction | アニメーションの方向 |
| animation-duration | アニメーションの再生時間 |
| animation-fill-mode | アニメーションの再生前後のスタイル |
| animation-iteration-count | アニメーションの繰り返し |
| animation-name | アニメーションのキーフレーム名 |
| animation-timing-function | アニメーション速度 |
広告