【CSS】animationプロパティ一覧とkeyframesについて

CSSで出来るアニメーションの基本的な動きについてまとめてみました。


アニメーションを付けるには?

結論から言いますが、アニメーションを付けるにはanimationプロパティとkeyframeプロパティの2つが必要になります。

  • animation
  • アニメーションの動くペースなど

  • keyframes
  • どんな効果を掛けるか

ざっくり言えばanimationプロパティでアニメーションを掛ける時間や開始・終了のペース、アニメーションの繰り返しなどについて指定します。

一方でkeyframeプロパティでは、animationプロパティで指定したアニメーションの時間やペースに合わせて透過や色・サイズなどの変更を掛けていく

時間などが指定されていなければ変化が起きませんし、時間だけ指定してもどのようなアニメーションを掛けるかを指定しなければ何も起こりません。

そしてもう一つ注意しておく事として、animationプロパティはCSSなので基本的にページが読み込まれたタイミングで実行されます。詳しくは後ほど説明します。


animationプロパティ

animationプロパティは一括指定プロパティなので、それぞれの項目を指定する個別のプロパティがあるので見ていきましょう。

プロパティ名 プロパティの内容
animation-name アニメーションの名前を指定します
animation-duration アニメーションに掛ける時間の指定です
animation-timing-function アニメーションの進行ペースの指定です
animation-delay アニメーションの開始タイミングの指定です
animation-iteration-count アニメーションの繰り返し回数の指定です
animation-direction アニメーションの繰り返しの向きの指定です
animation-fill-mode アニメーションの開始前・終了後のstyle指定です
animation-play-state アニメーションの実行状況の指定です
animation アニメーションの一括指定プロパティです

赤字は必須の指定になります。

個人的にはあまり個別で指定する機会がなく、大体は一括指定プロパティを使います。値の種類の理解が少し面倒なので順を追って見ていきましょう。


animation-name

後述するkeyframesとアニメーションをリンクさせるために名前をつけておく必要があります。初期値はnoneで何も定義されていない状態なので必ず指定する必要があります。

  • animation
  • アニメーションの動くペースなど

  • keyframes
  • どんな効果を掛けるか

先ほども話しましたが、keyframesで効果をつけるのはどのアニメーションなのかを紐付けしてあげます。

[CSS]

.testanime{
 animation-name:test;
}

@keyframes test{
 0% {
   width:50%
 }
 100% {
   width:100%
 }
}

今回の例で言うなら、testというアニメーションでは最初は50%の幅で徐々に100%の幅になっていくというアニメーションの指定の仕方です。(厳密にはこれでは時間を指定していないので動きませんが)


animation-duration

animation-durationはアニメーションに掛ける時間の指定です。

animation-duration

  • testanime1
  • testanime2

[HTML]

<ul>
  <li class="testanime1">testanime1</li>
  <li class="testanime2">testanime2</li>
</ul>

[CSS]

.testanime1 {
 background:lightgreen;
 animation-name:test1;
 animation-duration:3s
}

.testanime2 {
 background:skyblue;
 animation-name:test1;
 animation-duration:6s
}

@-webkit-keyframes test1{
  0% {
    width:50%;
  }
  100% {
    width:100%;
  }
}

@keyframes test1{
  0% {
    width:50%;
  }
  100% {
    width:100%;
  }
}

『◎s』(sはsecondで秒)と指定していきます。

アニメーションの内容としては幅を50%から100%に変化していく内容で、testanime1は3秒掛けて動き、testanime2は6秒掛けて動きます。


animation-timing-function

animation-timing-functionはアニメーションの進行するペースに関する指定をします。

  • ease
  • (開始から終了まで滑らかに)

  • linear
  • (開始とから終了まで一定)

  • ease-in
  • (開始部分だけゆっくり)

  • ease-out
  • (終了部分だけゆっくり)

  • ease-in-out
  • (開始と終了がゆっくり)

  • cubic-bezier
  • 関数で数値指定※

cubic-bezier関数は説明が長くなるので他の値について先に見ていきます。

animation-timing-function

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out

動き方に差がありますが、最終的にアニメーションが終了するタイミングは一緒です。linear以外はanimation-duration(アニメーションに掛ける時間)が短いと動きがガクガクしやすいので注意が必要です。

cubic-bezier関数はベジェ曲線を用いてアニメーションの変化のペースについて指定する方法です。

cubic-bezier関数での指定

簡単に言えば、A1とA2、B1とB2の値を指定する事で曲線のアーチを変化させることが出来ます。

animation-timing-function:cubic-bezier(A1,A2,B1,B2);

Illustratorを使う人は理解が早いかもしれませんね。

先に説明した簡易指定をcubic-bezier関数で表すと以下のようになります。

ease
(開始から終了まで滑らかに)
cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear
(開始とから終了まで一定)
cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in
(開始部分だけゆっくり)
cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out
(終了部分だけゆっくり)
cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out
(開始と終了がゆっくり)
cubic-bezier(0.42, 0, 0.58, 1.0)

animation-delay

animation-delayはアニメーションが始まるまでの時間を指定します。アニメーションが開始するタイミング自体をずらすことができます。

animation-delay

  • testanime3
  • testanime4

[HTML]

<ul>
  <li class="testanime3">testanime3</li>
  <li class="testanime4">testanime4</li>
</ul>

[CSS]

.testanime3 {
 background:lightgreen;
 animation-name:test3;
 animation-duration:3s;
}

.testanime4 {
 background:skyblue;
 animation-name:test3;
 animation-duration:3s;
 animation-delay:3s;
}

@-webkit-keyframes test3{
  0% {
    width:50%;
  }
  100% {
    width:100%;
  }
}

@keyframes test3{
  0% {
    width:50%;
  }
  100% {
    width:100%;
  }
}

testanime3はページ読み込み後すぐに実行されていますが、testanime4は読み込み後秒が経過してからアニメーションの処理が行われます。

注意する必要があるのはCSSは基本的にページが読み込みの段階で処理がされてしまうので、ページがある程度進んだ位置にアニメーションを設定しても意図したアニメーションになりにくい場合があります。その場合はJS側でスクロールした時に発火するイベントと一緒に指定する必要があります。


animation-iteration-count

animation-iteration-countではアニメーションの繰り返しについて指定します。初期値は1回で、マイナスの値を指定した場合は0として処理されます(0回なのでアニメーションにはなりません。)

animation-iteration-count

  • testanime5
  • testanime6

testanme5は2回、testanime6は無限にアニメーションを繰り返します。

[HTML]

<ul>
  <li class="testanime5">testanime5</li>
  <li class="testanime6">testanime6</li>
</ul>

[CSS]

.testanime5 {
 background:lightgreen;
 animation-name:test4;
 animation-duration:3s;
 animation-iteration-count:2;
}

.testanime6 {
 background:skyblue;
 animation-name:test4;
 animation-duration:3s;
 animation-iteration-count:infinite;
}

@-webkit-keyframes test4{
  0% {
    width:50%;
  }
  100% {
    width:100%;
  }
}

@keyframes test4{
  0% {
    width:50%;
  }
  100% {
    width:100%;
  }
}

animation-direction

animation-directionではアニメーションの進行方向について指定ができます。初期値はnormalです。

animation-direction

  • testanime7 → →
  • testanime8 ← ←
  • testanime9 → ←
  • testanime10 ← →
normal
0%から100%に向けて一直線
reverse
100%から0%に向けて一直線
alternate
0%から100%に向けていき、100%で折り返し
alternate-reverse
100%から0%に向けていき、0%で折り返し

[HTML]

<ul>
  <li class="testanime7">testanime7</li>
  <li class="testanime8">testanime8</li>
  <li class="testanime9">testanime9</li>
  <li class="testanime10">testanime10</li>
</ul>

[CSS]

.testanime7,
.testanime8,
.testanime9,
.testanime10{
  width:50%;
  animation:test5 3s linear infinite;
  color:#fff;
}
.testanime7{
  background:red;
  animation-direction:normal;
}
.testanime8{
  background:purple;
  animation-direction:reverse;
}
.testanime9{
  background:blue;
  animation-direction:alternate;
}
.testanime10{
  background:green;
  animation-direction:alternate-reverse;
}

@-webkit-keyframes test5{
  0% {
    width:50%;
  }
  100% {
    width:100%;
  }
}

@keyframes test5{
  0% {
    width:50%;
  }
  100% {
    width:100%;
  }
}

animation-fill-mode

animation-fill-modeはアニメーションの開始前、終了後のstyleについて指定ができます。

none
アニメーション開始前・終了後は元々指定していたstyleが適用
backwards
アニメーション前は0%の状態のstyleが適用
アニメーション後はデフォルトの状態のstyleが適用
forwards
アニメーション前はデフォルトの状態のstyleが適用
アニメーション後は100%の状態のstyleが適用
both
アニメーション前は0%の状態のstyleが適用
アニメーション後は100%の状態のstyleが適用

以下のサンプルでは3秒経過後にアニメーションが4回繰り返されたのち、アニメーションが終了します。分かりずらい場合はページをリロードしてみてください

animation-fill-mode

  • testanime11(none)
  • testanime12(backwards)
  • testanime13(forwards)
  • testanime14(both)

[HTML]

<ul>
  <li class="testanime11">testanime11</li>
  <li class="testanime12">testanime12</li>
  <li class="testanime13">testanime13</li>
  <li class="testanime14">testanime14</li>
</ul>

ちょっとわかりづらい部分もあるのでコメントアウト付けておきます。

[CSS]

.testanime11,
.testanime12,
.testanime13,
.testanime14{
  /*基本のwidthは80%で3秒後にアニメーション開始*/
  width:80%;
  animation:test6 3s 3s linear 2;
  color:#fff;
}
.testanime11{
  background:red;
  /*animation-fill-mode:none*/
  /*アニメーション前後はデフォルトの値*/
  animation-fill-mode:none;
}
.testanime12{
  background:purple;
  /*animation-fill-mode:backwards*/
  /*アニメーション前は0%の値*/
  /*アニメーション後はデフォルトの値*/
  animation-fill-mode:backwards;
}
.testanime13{
  background:blue;
  /*animation-fill-mode:forwards*/
  /*アニメーション前はデフォルトの値*/
  /*アニメーション後は100%の値*/
  animation-fill-mode:forwards;
}
.testanime14{
  background:green;
  /*animation-fill-mode:both*/
  /*アニメーション前は0%の値*/
  /*アニメーション後は100%の値*/
  animation-fill-mode:both;
}

@-webkit-keyframes test6{
  0% {
    width:50%;
  }
  100% {
    width:100%;
  }
}

@keyframes test6{
  0% {
    width:50%;
  }
  100% {
    width:100%;
  }
}

animation-play-state

animation-play-stateはアニメーションのについて指定ができます。値はrunning(初期値)とpausedの2種類です。

running
初期値
アニメーションを実行・再生中
paused
アニメーションを一時停止に状態にする
値をrunningに変えた場合は中断地点から再開

今回はホバーをした時にだけ値が変わるようにするという指定にしてみます。

animation-play-state

  • testanime15

[HTML]

<ul>
  <li class="testanime15">testanime15</li>
</ul>

[CSS]

.testanime15 {
 background:lightgreen;
 animation-name:test7;
 animation-duration:3s;
 animation-play-state:running;
}

.testanime15:hover {
  animation-play-state:paused;
}

@-webkit-keyframes test7{
  0% {
    width:50%;
  }
  100% {
    width:100%;
  }
}

@keyframes test7{
  0% {
    width:50%;
  }
  100% {
    width:100%;
  }
}

animation(一括指定プロパティ)

これまでanimation関連の様々なプロパティについて見てきましたが、animationという一括指定プロパティを使えば短く書くことができます。

[HTML]

<ul>
  <li class="testanime16">testanime16</li>
  <li class="testanime17">testanime17</li>
</ul>
.testanime16 {
 background:lightgreen;
 animation-name:test8;
 animation-duration:3s;
 animation-timing-function:linear;
 animation-delay:3s;
 animation-iteration-count:infinite;
 animation-direction:alternate;
 animation-fill-mode:both;
 animation-play-state:running;
}

.testanime17 {
 background:skyblue;
 animation:test8 3s linear infinite 3s alternate both running;
}

@-webkit-keyframes test8{
  0% {
    width:50%;
  }
  100% {
    width:100%;
  }
}

@keyframes test8{
  0% {
    width:50%;
  }
  100% {
    width:100%;
  }
}

animation(一括指定)

  • testanime16
  • testanime17

指定する順番には気を付けてください。以下の表の順番(これまで見てきた順)に指定すればOKです。

プロパティ名 プロパティの内容
animation-name アニメーションの名前を指定します
animation-duration アニメーションに掛ける時間の指定です
animation-timing-function アニメーションの進行ペースの指定です
animation-delay アニメーションの開始タイミングの指定です
animation-iteration-count アニメーションの繰り返し回数の指定です
animation-direction アニメーションの繰り返しの向きの指定です
animation-fill-mode アニメーションの開始前・終了後のstyle指定です
animation-play-state アニメーションの実行状況の指定です

keyframesとは?

keyframesとは、animation-duration(アニメーションに掛ける時間)内でどのように変化をしていくか内容を指定するものです。『@』が先頭についているのは@規則というものです。

アットルール - CSS: カスケーディングスタイルシート | MDN
アットルールは CSS の文のうち、CSS の動作を既定するものです。アットルールはアットマーク、'@' (U+0040 COMMERCIAL AT) で始まり、それに続く識別子から、次のセミコロン、 ';' (U+003B SEMICOLON) もしくは次の CSS ブロックのどちらかが現れるまでの部分からなります。

これまでの説明では@keyframesではwidthの値が50%から100%へ変化するように指定していました。

また、ベンダープレフィックスを必要とあらば付けていくようにしましょう。(iOS8以下やAndroid4.4.4以下対応時のみ)

『ベンダープレフィックス』の知識と『Can I Use』の使い方
今回はベンダープレフィックス(Vendor prefix)について見ていきます。 ベンダープレフィックスって? 対応ブラウザを調べる方法 どれぐらいの割合でOKかみてみる あえて語弊を...

%で指定

開始点を0%、終了点を100%として設定します。その上で中間ポイントとして0~100%の間で好きな地点で中間ポイントを設定することも可能です。

[HTML]

<ul>
  <li class="testanime18">testanime18</li>
  <li class="testanime19">testanime19</li>
</ul>
.testanime18 {
 background:lightgreen;
 animation:test9 6s linear infinite;
}

.testanime19 {
 background:skyblue;
 animation:test10 6s linear infinite;
}

/*6秒かけて0%から100%まで一直線に推移*/

@-webkit-keyframes test9{
  0% {
    width:50%;
  }
  100% {
    width:100%;
  }
}

@keyframes test9{
  0% {
    width:50%;
  }
  100% {
    width:100%;
  }
}

/*6秒の間に中間地点の値へ変化しつつ最終的に100%の値へ変化*/
@-webkit-keyframes test10{
  0% {
    width:50%;
  }
  25% {
    width:75%;
  }
  50% {
    width:50%;
  }
  75% {
    width:75%;
  }
  100% {
    width:100%;
  }
}

@keyframes test10{
  0% {
    width:50%;
  }
  25% {
    width:75%;
  }
  50% {
    width:50%;
  }
  75% {
    width:75%;
  }
  100% {
    width:100%;
  }
}

@keyframesで中間点作成

  • testanime18
  • testanime19

fromとtoで指定

from=0%、to=100%と置き換えれば同じ意味になります。使う機会があるかは別として…


まとめ

cssアニメーションをモリモリしすぎると目が疲れますが、それでもサイトのアクセントとしておしゃれなサイトでは要所で使われています。使いこなせると幅が増えるのでしっかり理解しておきましょう。