animation - CSS

Css animation とは

キーフレームアニメーションを適用できる機能です。

利用できるプロパティは、9個あります。

animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

duration ：デュレイション

間隔

delay ：ディレイ

先延ばしにする

iteration ：イテレーション

反復

direction ：ディレクション

方向

fill ：フィル

いっぱいにする

state ：ステート

状態、状況、国

プロパティ	内容
animation-name	利用するキーフレームの名前
animation-duration	アニメーションが終わるまでにかかる時間
animation-timing-function	アニメーションの速度
animation-delay	アニメーションを何秒後に開始するか
animation-iteration-count	アニメーションを何回再生するか
animation-direction	アニメーションを再生する方向
animation-fill-mode	アニメーションの再生前後のスタイルを指定
animation-play-state	アニメーションを再生中か、一時停止かを指定

プロパティについて

animation-duration

初期値：0s、1s や 100ms など

animation-timing-function

速度を指定するためのプロパティで値は次のようなものがあります。

値	内容
ease	ゆっくり始まって、ゆっくり終わる（初期値）
ease-in	ゆっくり始まる
ease-out	ゆっくり終わる
ease-in-out	ease よりさらにゆっくり始まって、ゆっくり終わる
liner	一定の速度で始まって終わる
step-start	最初からアニメーション終了時の状態になる
step-end	最後に一瞬でアニメーション終了時の状態になる
steps(n)	n の回数だけコマ送りする

animation-delay

初期値：0s、1s や 100ms など

animation-iteration-count

1(初期値)、1.5、infinite(無限ループ)

animation-direction

値	内容
normal	通常方向を実行（初期値）
alternate	通常方向と逆方向の順で繰り返す
reverse	毎回逆方向に実行
alternate-reverse	逆方向と通常方向の順で繰り返す

animation-fill-mode

値	内容
none	初期値
forwards	再生後も、@keyframes(100%)のスタイルが適用されたままになる
backwards	再生前は、@keyframes(0%)のスタイルが適用される。
both	再生前は@keyframes(0%)が、再生後は@keyframes(100%)のスタイルが適用される

animation-play-state

running：再生（初期値）、paused：一時停止

要素を動かしてみる

要素の横幅が次第に変わるサンプルを動かしてみます。

index.html

<div class="animation-box"></div>

style.css

@keyframes animation-sample{
  0%{
      width: 0;
  }
  100%{
      width: 100%;
  }
}
.animation-box{
  animation-name: animation-sample;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  height: 10px;
  background-color: black;
}

@keyframes を使うことによって、アニメーションの流れに沿ったキーフレーム（または中間地点）のスタイルを定義することができます。

サンプルの「 animation-sample 」は任意でつけることができます。実際に呼び出すときの名前になります。

文字をフェードインさせる

hello, world

HTML

<p>hello, world</p>

css

p {
  animation-name: fade;
  animation-duration: 5s;
  animation-iteration-count: 1;
}

@keyframes fade{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}