CSS アニメーションで回が回る回

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

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

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

CSS アニメーションの指定

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

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

プロパティ	意味	初期値
animation-duration	変化にかける時間	0s
animation-timing-function	変化の補間方法	ease (最初と最後がゆっくり)
animation-delay	変化を始める時刻	0s
animation-iteration-count	変化を行う回数	1
animation-direction	変化の方向	normal (0% → 100%)
animation-fill-mode	変化外での適用	none (変化中以外適用しない)
animation-play-state	変化の一時停止	running (一時停止しない)
animation-name	キーフレームリスト名	none

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

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

といった注意点がある。

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

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

指定例

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

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

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

名前	動作	備考
ease	序盤と終盤は遅く、中盤は速く変化する	デフォルト値
linear	常に一定の速さで変化する	-

その他の指定方法は、以下を参照してほしい。
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周期ごとに方向を変える) こともできる。

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

名前	意味
normal	変化をそのまま行う
reverse	変化を逆向きに行う
alternate	変化を往復させる
alternate-reverse	変化を逆向きから始めて往復させる

指定例

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

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

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

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

名前	意味
none	変化中以外は適用しない
forwards	変化後に適用する (変化前は適用しない)
backwards	変化前に適用する (変化後は適用しない)
both	変化前も変化後も適用する

指定例

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

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

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

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

名前	意味
running	一時停止しない (変化を進める)
paused	一時停止する

指定例

.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 を指定するものを並べ、比較してみた。

HTML

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

CSS

.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;
  }
}

See the Pen rotating-kai by MikeCAT (@mike_cat) on CodePen.

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

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

まとめ

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