ywork2020.com

Title

アニメーションの再生と停止の指定

目次 (INDEX)

animation-play-stateとは

ここで説明するanimation-play-state とは次の語句からなるCSSのプロパティです。
animation
読み: アニメーション
意味: 動画、アニメーション
play
読み: プレー
意味: 演奏する、遊ぶ
state
読み: ステート
意味: 状態、ありさま

目次に戻る

animation-play-stateプロパティの概要

このプロパティはアニメーションの再生状態を指定します。

具体的には一時停止しているアニメーションを再生するように指定するか、 逆に再生中のアニメーションを一時停止するかを指定します。

要素にアニメーション効果を付けて実行するためには、要素に対して、最低でも animation-name プロパティで @keyframes 名を指定し、 なおかつ animation-duration プロパティで1回のアニメーションを実行する所要時間を指定しなければいけません。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{animation-play-state: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

このサンプルでは以下のプロパティも指定をしています。

初期値: running

初期値のrunningキーワードは、 アニメーションが停止している場合にアニメーションを実行します。

このサンプルでは通常ではアニメーションを停止していますが、 マウスオーバーしている間はアニメーションが実行されます。

div{
	animation-name: myRotation;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}
.div:hover{
	animation-play-state: running;	
}
@keyframes myRotation{
	0%{ transform: rotateY(0);}
	100%{ transform: rotateY(360deg); }
}	

目次に戻る

キーワード値: paused

pausedキワードは、 実行中のアニメーションを停止します。

このサンプルでは通常ではアニメーションを実行していますが、 マウスオーバーしている間はアニメーションが停止されます。

div{
	animation-name: myRotation;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-play-state: running;
}
.div:hover{
	animation-play-state: paused;
}
@keyframes myRotation{
	0%{ transform: rotateY(0);}
	100%{ transform: rotateY(360deg); }
}	

目次に戻る

グローバル値

animation-play-stateプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値のrunningに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{animation-play-state: グローバル値;}

目次に戻る

補足説明

  • すべての要素に適用可能
  • 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

animation-play-state: paused;

animation-play-state: running;

サンプル: ブロック要素

サンプル: インライン要素

目次に戻る