投稿日:

【CSS】animationを使ってみよう

使用スタイル

animation(duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name );

duration

durationには一回のアニメーションの再生時間を記載します。単位はミリ秒(ms)と秒(s)を指定する事ができます。

timing-function

timing-functionはアニメーションの再生の進行度合いを設定できます。早い段階で多くのアニメーションを進行させ、最後の段階ではゆっくり進行させるなど、どのように進行させるかを決められます。初期値はeaseという開始と終了の進行度合いをゆっくりにして滑らかにします。cubic-bezier()を指定して自由に進行度合いを決めたり、stepを指定して段階的に進行させることもできます。

delay

delayにはアニメーションを再生する前に待つ時間を指定できます。こちらも単位はミリ秒(ms)と秒(s)を指定する事ができます。

iteration-count

iteration-countにはアニメーションの再生回数を指定できます。再生回数を数字で指定する事ができ、infiniteを指定する事で無限に繰り返す事もできます。

direction

directionにはアニメーションの再生方向を指定できます。normal,reverse,alternate,alternate-reverseを指定する事ができ、各々でアニメーションの再生方向が違います。左から右に移動するアニメーションだと仮定して説明します。

normal
normalを指定すると常に通常の方向に再生します。つまり、常に左から右に移動します。
reverse
reverseを指定すると常に逆の方向に再生します。つまり、常に右から左に移動します。
alternate
alternateを指定すると、奇数回目は通常方向、偶数回目は逆の方向に再生します。つまり、1回目は左から右に移動し、2回目は右から左に移動し、3回目は左から右に移動します。4回目は…となります。
alternate-reverse
alternate-reverseを指定すると、奇数回目は逆方向、具数回目は通常の方向に再生します。つまり、1回目は右から左に移動し、2回目は左から右に移動し、3回目は右から左に移動します。4回目は…となります。

fill-mode

fill-modeにはアニメーション再生前・再生後の状態を指定する事ができます。none, backwards, forwards, bothを指定する事ができ、再生後の状態が各々で変わります。左から右に移動するアニメーションだと仮定して説明します。

none
アニメーションの再生後はキーフレームの値に関係なく、元のスタイルに戻ります。
backwards
アニメーションの再生後はキーフレームで指定された0%あるいはfromのスタイルが適用されます。
forwards
アニメーションの再生後はキーフレームで指定された100%あるいはtoのスタイルが適用されます。delayで指定された時間分待っている間は元のスタイルが適用されます。
both
アニメーションの再生後はキーフレームで指定された100%あるいはtoのスタイルが適用されます。forwardsと違う点はdelayで指定された時間分待っている間はキーフレームで指定された0%あるいはfromのスタイルが適用されます。

play-state

play-stateではアニメーションを再生するか、一時停止するかを指定できます。running, pausedを指定する事ができ、runningが指定されている最中はアニメーションが再生され、pausedが指定されている最中は指定されたときの状態で一時停止します。再度runningを指定して再生した際は、最初から再生しなおすわけではなく、一時停止の状態から再生されます。

name

nameではキーフレームを指定する事ができます。「@keyframes XXX」のXXX部分を指定する事で、キーフレームを選択できます。キーフレームを選択しないと、animationは実行されません。

サンプル

#animation-view155{
  box-sizing: content-box;
  height: 1.5em;
  overflow: hidden;
  width: 16em;
}

#animation-contents155{
  -moz-animation: 4s steps(15) 0s infinite normal none running typing;
  -webkit-animation: 4s steps(15) 0s infinite normal none running typing;
  animation: 4s steps(15) 0s infinite normal none running typing;
  display: inline-block;
  float: right;
  text-shadow: 1px 1px 3px rgba(128, 128, 128, .6);
  width: 0em;
  word-break: break-all;
}

@-moz-keyframes typing{
  0%{ width: 0em; }
  100%{ width: 16em; }
}

@-webkit-keyframes typing{
  0%{ width: 0em; }
  100%{ width: 16em; }
}

@keyframes typing{
  0%{ width: 0em; }
  100%{ width: 16em; }
}
HTML CSS javascriptのまとめ