ywork2020.com

Title

アニメーションの再生方向を指定する

目次 (INDEX)

animation-directionとは

ここで説明するanimation-direction とは次の語句からなるCSSのプロパティです。
animation
読み: アニメーション
意味: 動画、アニメーション
direction
読み: ディレクション
意味: 方向

目次に戻る

animation-directionプロパティの概要

このプロパティは要素にアニメーションをさせた場合の再生方向を指定できます。

具体的にいうと @keyframes で設定したアニメーションをfrom(0%)からto(100%)の方向に向かって再生するか、 逆にto(100%)からfrom(0%)の方向に向かって再生するかを指定することができます。 また、アニメーションを繰り返し再生する場合に順方向と逆方向の交互再生をさせることも可能です。

目次に戻る

構文

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

セレクター{animation-direction: 設定値}

目次に戻る

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

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

このサンプルでは、 @keyframes で定義したアニメーションパターンを animation-name プロパティでdiv要素に適用しています。 また、一回のアニメーションに掛ける時間は animation-duration プロパティで5秒を指定しています。

初期値: normal

初期値のnormalキーワードは、アニメーションを順方向から再生します。

div

div{
	animation-name: myAnimation;
	animation-duration: 5s;
	animation-direction: normal;
}
@keyframes myAnimation{
	0% {width: 0%; background-color: transparent;}
	20% {width: 20%; background-color: red;}
	40% {width: 40%; background-color: yellow;}
	60% {width: 60%; background-color: blue;}
	80% {width: 80%; background-color: blueviolet;}
	100% {width: 100%; background-color: transparent;}
}

目次に戻る

キーワード値: reverse

reverseキーワードは、アニメーションを逆方向から再生します。

div

div{
	animation-name: myAnimation;
	animation-duration: 5s;
	animation-direction: reverse;
}
@keyframes myAnimation{
	0% {width: 0%; background-color: transparent;}
	20% {width: 20%; background-color: red;}
	40% {width: 40%; background-color: yellow;}
	60% {width: 60%; background-color: blue;}
	80% {width: 80%; background-color: blueviolet;}
	100% {width: 100%; background-color: transparent;}
}

目次に戻る

キーワード値: alternate

alternateキーワードは、アニメーションは順方向から再生が始まり、 アニメーションを繰り返し再生した場合に再生毎に再生方向が反転します。

ここではアニメーションの繰り返し再生を行うのでanimation-iteration-count: infinite;を記述しています。

div

div{
	animation-name: myAnimation;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes myAnimation{
	0% {width: 0%; background-color: transparent;}
	20% {width: 20%; background-color: red;}
	40% {width: 40%; background-color: yellow;}
	60% {width: 60%; background-color: blue;}
	80% {width: 80%; background-color: blueviolet;}
	100% {width: 100%; background-color: transparent;}
}

目次に戻る

キーワード値: alternate-reverse

alternate-reverse値は、アニメーションは逆方向から再生が始まり、 アニメーションを繰り返し再生した場合に再生毎に再生方向が反転します。

ここではアニメーションの繰り返し再生を行うのでanimation-iteration-count: infinite;を記述しています。

div

div{
	animation-iteration-count: infinite;
	animation-name: myAnimation;
	animation-duration: 5s;
	animation-direction: alternate-reverse;
}
@keyframes myAnimation{
	0% {width: 0%; background-color: transparent;}
	20% {width: 20%; background-color: red;}
	40% {width: 40%; background-color: yellow;}
	60% {width: 60%; background-color: blue;}
	80% {width: 80%; background-color: blueviolet;}
	100% {width: 100%; background-color: transparent;}
}

目次に戻る

グローバル値

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

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

目次に戻る

補足説明

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

目次に戻る

まとめ

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

animation-direction: normal;

animation-direction: reverse;

animation-direction: alternate;

animation-direction: alternate-reverse;

サンプル: ブロック要素

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

目次に戻る