昨日、私は
なでしこさんで回が回る回｜みけCAT
で、こう書いた。

次は、CSS アニメーションを用いて、プログラムを書かずに回を回すのに挑戦したい。

そういえば、今は Qiita で大量の記事を書くことを要求されているんだった。
早速やってみよう。

CSS アニメーションの指定

CSS アニメーションは、CSS の指定により、その要素に設定されている CSS プロパティを時間の経過に伴い自動で変化させる機能である。
これにより、基本的なアニメーションであれば、JavaScript で明示的に操作しなくても実現できる。

具体的には、以下のプロパティで指定を行う。

これらのプロパティは、この順番で animation により一括指定できる。
このとき、指定しないプロパティの値は省略できるが、

• 時間を指定すると、最初のものが animation-duration として解釈される
• animation-name のつもりで名前を指定しても、それが省略した他のプロパティの値として有効な文字列の場合、そのプロパティの設定として扱われることがある

といった注意点がある。

animation-duration (変化にかける時間)

1周期の変化にかける時間を、s (秒) または ms (ミリ秒) 単位で指定する。
単位は省略できない。

.target {
  animation-duration: 1s; /* 1周期の変化を1秒で行う */
}

animation-timing-function (変化の補間方法)

時刻と、その時刻で変化がどこまで進んだかの関係を決める関数を設定する。
一例として、以下の名前が指定できる。

その他の指定方法は、以下を参照してほしい。
animation-timing-function - CSS | MDN

.target {
  animation-timing-function: linear; /* 等速で変化する */
}

animation-delay (変化を始める時刻)

アニメーションのプロパティが設定されてから実際に変化が始まるまでの時間を、s (秒) または ms (ミリ秒) 単位で指定する。
単位は省略できない。

負の時間を指定すると、プロパティを設定してすぐに、指定した時間過ぎた時点から変化が始まる。

.target {
  animation-delay: 1s; /* 1秒後から変化を開始する */
}

animation-iteration-count (変化を行う回数)

変化を何回繰り返して行うかを指定する。
整数でない実数も指定でき、指定した場合は最後の変化が指定に応じて途中で止まる。
数値のかわりに infinite を指定すると、変化を無制限に繰り返す。

.target {
  animation-iteration-count: infinite; /* 変化を無制限に繰り返す */
}

animation-direction (変化の方向)

変化をそのまま行うか、逆向きに (本来のおわりからはじめに) 行うかを指定する。
また、変化を往復させる (1周期ごとに方向を変える) こともできる。

以下の名前から指定する。

.target {
  animation-direction: alternate; /* 変化を往復させる */
}

animation-fill-mode (変化外での適用)

変化の指定により設定されるプロパティを、変化の前や後にも適用するかを指定する。
適用しない場合、プロパティはアニメーション以外の CSS で指定されたものになる。

以下の名前から指定する。

.target {
  animation-fill-mode: forwards; /* 変化後、変化したスタイルを使用する */
}

animation-play-state (変化の一時停止)

変化を一時停止するかを指定する。
一時停止を解除すると、一時停止した時刻から変化が再開する。

以下の名前から指定する。

.target {
  animation-play-state: paused; /* 変化を一時停止する */
}

animation-name (キーフレームリスト名)

どのような変化を行うかを指定するキーフレームリストの名前を指定する。
キーフレームリストは、0% (はじめ) から 100% (おわり) までの地点と、その地点におけるプロパティの値を指定する。
0% は from、100% は to とも書ける。

.target {
  animation-name: anime1; /* キーフレームリストの名前を指定する */
}

/* キーフレームリスト */
@keyframes anime1 {
  /* 変化開始時のプロパティを設定する */
  0% {
    color: #000000;
  }

  /* 変化終了時のプロパティを設定する */
  100% {
    color: #ffffff;
  }
}

回を回す

CSS アニメーションを用いて、実際に回を回してみた。
今回は、animation-timing-function の指定をしない (ease) ものと linear を指定するものを並べ、比較してみた。

<div class="kaiWrapper">
<div class="kai" id="kai1">回</div>
</div>
<div class="kaiWrapper">
<div class="kai" id="kai2">回</div>
</div>

.kaiWrapper {
  width: 20em;
  height: 20em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.kai {
  font-size: 1500%;
}

#kai1 {
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: rotate-anime;
}

#kai2 {
  animation: 1s linear infinite rotate-anime;
}

@keyframes rotate-anime {
  0% {
    rotate: 0turn;
  }
  100% {
    rotate: 1turn;
  }
}

左側 (#kai1) は、各プロパティの個別設定を用い、animation-timing-function は指定せずデフォルトの ease を用いている。
右側 (#kai2) は、animation による一括設定を用い、animation-timing-function は linear を指定している。

右側 (linear 指定) は一定の速さで回っているのに対し、左側 (ease 適用) は中盤の速さが序盤や終盤より速くなっているのがわかる。

まとめ

CSS アニメーションの指定方法を確認し、実際に CSS アニメーションを用いてプログラムを書かずに回を回すことができた。