【CSS】アニメーションの再生方向を指定するanimation-direction

2020年10月13日
スポンサーリンク

1.animation-direction

animation-directionプロパティはアニメーション再生順を指定するプロパティで値にはキーワードを入れます。

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

初期値は”normal”になっています。

ボタンのon / offで切り替わります

on/off
こばゆた
こばゆた

その他の値も見ていこうと思います。

1-1.alternate

値を”alternate”にすると終了時に逆再生しながら戻ってきます。

セレクター{
  animation-direction: alternate; /*アニメーション終了時に折り返してくる*/
}

A.単一のアニメーションの場合

ボタンのon / offで切り替わります

on/off
/*keyframesの設定*/
@keyframes translate{
  100%{
    transform: translateX(200px); /*100%の時にX軸に200px移動する*/
  }
}

/*アニメーションの設定*/
.dragon{
  animation-name: translate; /*keyframesの名前は"translate"*/
  animation-duration: 1.3s; /*アニメーションの時間は1.3秒*/
  animation-direction: alternate; /*アニメーション終了時に折り返してくる*/
}

B.アニメーションを細かく設定した場合

ボタンのon / offで切り替わります

boxA
on/off
/*keyframesの設定*/
@keyframes direction{
  0%{
    transform: none;
  }
  60%{
    transform: translateX(200px);
  }
  100%{
    transform: translateX(200px) rotate(360deg);
  }
}

/*アニメーションの設定*/
.boxA{
  animation-name : direction; /*keyframesの名前は"direction"*/
  animation-duration: 2s; /*アニメーションの時間は2秒*/
  animation-direction: alternate; /*アニメーション終了時に折り返してくる*/
}

1-2.reverse

値を”reverse”とすると終了時のフレームから再生されます。

セレクター{
  animation-direction: reverse; /*アニメーションを逆から再生する*/
}

A.単一のアニメーションの場合

ボタンのon / offで切り替わります

on/off
/*keyframesの設定*/
@keyframes translate{
  100%{
    transform: translateX(200px); /*100%の時にX軸に200px移動する*/
  }
}

/*アニメーションの設定*/
.dragon2{
  animation-name: translate; /*keyframesの名前は"translate"*/
  animation-duration: 1.3s; /*アニメーションの時間は1.3秒*/
  animation-direction: reverse; /*アニメーションを逆から再生する*/
}

B.アニメーションを細かく設定した場合

ボタンのon / offで切り替わります

boxB
on/off
/*keyframesの設定*/
@keyframes direction{
  0%{
    transform: none;
  }
  60%{
    transform: translateX(200px);
  }
  100%{
    transform: translateX(200px) rotate(360deg);
  }
}

/*アニメーションの設定*/
.boxB{
  animation-name : direction; /*keyframesの名前は"direction"*/
  animation-duration: 2s; /*アニメーションの時間は2秒*/
  animation-direction: reverse; /*アニメーションを逆から再生する*/
}

1-3.alternate-reverse

値を”alternate-reverse”とすると終了時のフレームから再生され、開始時まで行くと再生しながら折り返してきます。

セレクター{
  animation-direction: alternate-reverse; /*アニメーションを逆から再生し、終了時に折り返す*/
}

A.単一のアニメーションの場合

ボタンのon / offで切り替わります

on/off
/*keyframesの設定*/
@keyframes translate{
  100%{
    transform: translateX(200px); /*100%の時にX軸に200px移動する*/
  }
}

/*アニメーションの設定*/
.dragon3{
  animation-name: translate; /*keyframesの名前は"translate"*/
  animation-duration: 1.3s; /*アニメーションの時間は1.3秒*/
  animation-direction: alternate-reverse; /*アニメーションを逆から再生し、終了時に折り返す*/
}

B.アニメーションを細かく設定した場合

ボタンのon / offで切り替わります

boxC
on/off
/*keyframesの設定*/
@keyframes direction{
  0%{
    transform: none;
  }
  60%{
    transform: translateX(200px);
  }
  100%{
    transform: translateX(200px) rotate(360deg);
  }
}

/*アニメーションの設定*/
.boxC{
  animation-name : direction; /*keyframesの名前は"direction"*/
  animation-duration: 2s; /*アニメーションの時間は2秒*/
  animation-direction: alternate-reverse; /*アニメーションを逆から再生し、終了時に折り返す*/
}
こばゆた
こばゆた

ただ単にシンプルなアニメーションを往復させるだけなら値を”alternate”にするだけでもできますね

スポンサーリンク

2.注意点

今までは回数を無限にしていましたが指定する回数に気をつけないと自分のイメージと異なる動きになる可能性があります。

ちなみにアニメーションの回数に関するプロパティはこちら

【CSS】アニメーションする回数を指定するanimation-iteration-count
...
kbyt-programming.com
2020年11月26日

値を”alternate”または”alternate-reverse”にした場合、回数を奇数にすると返ってこないので注意です。

こばゆた
こばゆた

意図的にやる分にはもちろんOKです

ボタンのon / offで切り替わります

boxD
on/off

/*keyframesの設定*/
@keyframes direction{
  0%{
    transform: none;
  }
  60%{
    transform: translateX(200px);
  }
  100%{
    transform: translateX(200px) rotate(360deg);
  }
}

/*アニメーションの設定*/
.boxD{
  animation-name : direction; /*keyframesの名前は"direction"*/
  animation-duration: 2s; /*アニメーションの時間は2秒*/
  animation-iteration-count: 3; /*アニメーションの回数を3回*/
  animation-fill-mode: forwards; /*アニメーション終了時はその場に留まる*/
  animation-direction: alternate; /*アニメーションを逆から再生し、終了時に折り返す*/
}

3.まとめ

animation-direction まとめ
  • animation-directionプロパティはアニメーション再生方向を指定するプロパティ
セレクター{
  animation-direction: 値;
}
  • 値には以下のキーワードが入る

ボタンのon / offで切り替わります

A

normal

B

alternate

C

reverse

D

alternate-reverse

on / off
/*上から*/
.boxA{
   animation-direction: normal; /*何も指定しない(デフォルト)*/
}

.boxB{
   animation-direction: alternate; /*アニメーション終了時に折り返してくる*/
}

.boxC{
   animation-direction: reverse;  /*アニメーションを逆から再生する*/
}

.boxD{
   animation-direction: alternate-reverse; /*アニメーションを逆から再生し、終了時に折り返す*/
}

スポンサーリンク

コメント