【CSS入門】@keyframesとanimationで複雑なアニメーションを作ろう

この記事ではtransitionよりも複雑なアニメーションを指定できるCSSのanimationに関連するプロパティについて解説します。

animationとは？

アニメーションについて一括指定できるショートハンドです。

プロパティの値は順不同で半角スペース区切りで指定でき、省略した値はそのプロパティのデフォルト値が適用されます。

CSS

animation: アニメーション名　一回分の長さ　アニメーションの仕方　アニメーションまでの時間　繰り返す回数　折り返すか　一時停止するか　スタイル;
 
animation: test 2s linear 0.5s infinite alternate running forwards;

@keyframes

@keyframesを使うと、transitionよりも細かくアニメーションを指定することができます。

アニメーションの開始と終了のフレームのみを定義する場合は、「from」（または0%）、「to」（または100%）で指定し、どちらか片方でも存在しない場合アニメーションは動きません。

実際に使用するときは以下のように記述します。この場合、「2秒かけてwidthが0pxから300pxになる。アニメーションが半分進んだ時点でwidthは150px」と指定したことになります。

HTML

<div class="BOX"></div>

CSS

.BOX{
  width: 300px;
  height: 50px;
  animation: test 2s infinite;
}

@keyframes test {
    0% {
    width: 0px; 
    }
     
    50% {
    width: 150px; 
    }
      
    100% {
    width: 300px; 
    }
}

animationプロパティ詳細

animationで使用するプロパティは以下の通りです。

プロパティ	説明
animation-name	アニメーション名を指定
animation-duration	アニメーション1回分の時間の長さを指定
animation-timing-function	アニメーションの仕方を指定
animation-delay	アニメーションが開始するまでの待ち時間を指定
animation-iteration-count	アニメーションを繰り返す回数を指定
animation-direction	アニメーションを交互に反転再生させるかどうかを指定
animation-play-state	アニメーションを再生させたり一時停止させる
animation-fill-mode	適用するスタイルを指定

animation-name

要素にアニメーションを適用するために、@keyframesで利用するアニメーション名を指定します。

animation-nameに指定できる値は以下の通りです。

値	説明
none	デフォルト。アニメーションは実行されない
アニメーション名	適用したいアニメーション名を指定

以下の場合、testというアニメーション名を指定した要素にアニメーションが実行されます。

HTML

<div class="BOX"></div>

CSS

.BOX{
  width: 300px;
  height: 50px;
  animation: test 2s infinite}

@keyframes test {
    from {
    width: 0px; 
    }
     
    50% {
    width: 150px; 
    }
      
    to {
    width: 300px; 
    }
}

animation-duration

durationとは日本語で「時間の期間」という意味で、アニメーション1回分の時間の長さを指定します。

animation-durationに指定できる値は以下の通りです。

値	説明
0s	デフォルト。瞬時に変化する
○s	かかる時間を秒数で指定。1秒＝1s

実際に使用するときは以下のように記述します。

この場合、「2秒かけてwidthが0pxから300pxになる」と指定したことになります。

HTML

<div class="BOX"></div>

CSS

.BOX{
  width: 300px;
  height: 50px;
  animation: test 2s infinite;}

@keyframes test {
    0% {
    width: 0px; 
    }
     
    50% {
    width: 150px; 
    }
      
    100% {
    width: 300px; 
    }
}

animation-timing-function

変化の仕方を指定します。

animation-timing-functionに指定できる値は以下の通りです。

値	説明
ease	デフォルト。開始と完了が滑らか
linear	一定の速度で変化
ease-in	変化がゆっくり始まる
ease-out	変化がゆっくり終わる
ease-in-out	変化がゆっくり始まってゆっくり終わる
cubic-bezier(数値, 数値, 数値, 数値)	変化の仕方を微調整する

実際に使用するときは以下のように記述します。

HTML

<div class="BOX-A">デフォルト</div>
  <div class="BOX-B">ease-in</div>

CSS

/* デフォルト */
.BOX-A{
  width: 300px;
  height: 50px;
  animation: test 2s infinite;
}

/* ease-in（ゆっくり始まる） */
.BOX-B{
  width: 300px;
  height: 50px;
  animation: test 2s ease-in infinite;
}

/* キーフレーム */
@keyframes test {
   from {
    width: 0px; 
    }
     
    50% {
    width: 150px; 
    }
      
     {
    width: 300px; 
    }
}

animation-delay

delayとは日本語で「遅らせる」という意味で、animation効果が開始されるまでの待ち時間を指定します。マイナスの値を指定すると、変化が完了した時点から開始します。

animation-delayに指定できる値は以下の通りです。

値	説明
0s	デフォルト。瞬時に変化する
○s	かかる時間を秒数で指定。1秒＝1s

実際に使用するときは以下のように記述します。

この場合、「アニメーションまで3秒待機してから2秒かけてwidthが0pxから300pxになる」と指定したことになります。

HTML

<div class="BOX-A">デフォルト</div>
  <div class="BOX-B">3秒待機</div>

CSS

/* デフォルト */
.BOX-A{
  width: 300px;
  height: 50px;
  animation: test 2s infinite;
}

/* 3秒待機してからアニメーション */
.BOX-B{
  width: 300px;
  height: 50px;
  animation: test 2s 3s;
}

/* キーフレーム */
@keyframes test {
   from {
    width: 0px; 
    }
     
    50% {
    width: 150px; 
    }
      
     {
    width: 300px; 
    }
}

animation-iteration-count

アニメーションを繰り返す回数を指定します。

animation-iteration-countに指定できる値は以下の通りです。

値	説明
1	デフォルト。繰り返さない
数値	記述した数値分だけ繰り返す
infinite	無限に繰り返す

実際に使用するときは以下のように記述します。

HTML

<div class="BOX-a">デフォルト</div>
<div class="BOX-b">3回繰り返し</div>
<div class="BOX-c">無限</div>

CSS

/* デフォルト */
.BOX-A{
  width: 300px;
  height: 50px;
  animation: test 2s;
}

/* アニメーションを3回繰り返す */
.BOX-B{
  width: 300px;
  height: 50px;
  animation: test 2s 3;
}

/* 無限に繰り返す */
.BOX-C{
  width: 300px;
  height: 50px;
  animation: test 2s infinite;
}

/* キーフレーム */
@keyframes test {
   from {
    width: 0px; 
    }
     
    50% {
    width: 150px; 
    }
      
     {
    width: 300px; 
    }
}

See the Pen YJdxoQ by LINKAGE (@LINKAGEBLOG) on CodePen.

animation-direction

animation-iteration-countで2回以上に指定した時、アニメーションを交互に反転再生させるかどうかを指定します。

animation-directionに指定できる値は以下の通りです。

値	説明
normal	デフォルト。普通方向の再生でアニメーションを繰り返す
alternate	奇数回では普通方向、偶数回では逆再生となってアニメーションを繰り返す
reverse	逆再生でアニメーションを繰り返す
alternate-reverse	偶数回では普通方向、奇数回では逆再生となってアニメーションを繰り返す

実際に使用するときは以下のように記述します。

HTML

<div class="BOX-A">デフォルト</div>
<div class="BOX-B">偶数回で逆再生</div>

CSS

/* デフォルト */
.BOX-A{
  width: 300px;
  height: 50px;
  animation: test 2s infinite;
}

/* 偶数回で逆再生 */
.BOX-B{
  width: 300px;
  height: 50px;
  animation: test 2s alternate infinite;
}


/* キーフレーム */
@keyframes test {
   from {
    width: 0px; 
    }
     
    50% {
    width: 150px; 
    }
      
     {
    width: 300px; 
    }
}

animation-play-state

アニメーションを再生させたり一時停止させたり出来ます。

animation-play-stateに指定できる値は以下の通りです。

値	説明
running	デフォルト。再生中
paused	一時停止中

実際に使用するときは以下のように記述します。

pausedを指定している要素の方をホバーすると、アニメーションが一時停止します。

HTML

<div class="BOX-A">デフォルト</div>
<div class="BOX-B">偶数回で逆再生</div>

CSS

/* デフォルト */
.BOX-A{
  width: 300px;
  height: 50px;
  animation: test 2s infinite;
}

/* ホバーしたら一時停止 */
.BOX-B{
  width: 300px;
  height: 50px;
  animation: test 2s infinite;
}

.BOX-B:hover{
  animation-play-state: paused;
}

/* キーフレーム */
@keyframes test {
   from {
    width: 0px; 
    }
     
    50% {
    width: 150px; 
    }
      
     {
    width: 300px; 
    }
}

animation-fill-mode

アニメーションの実行前や実行後に、適用するスタイルを指定します。

animation-fill-modeに指定できる値は以下の通りです。

値	説明
none	デフォルト。アニメーション開始前と完了後は、元のスタイルを適用。
forwards	アニメーション開始前は元のスタイルを適用。アニメーション完了後、@keyframesの「100%(to)」のスタイルを適用。
backwards	アニメーション開始前は@keyframesの「0%(from)」のスタイルを適用。アニメーション完了後、元のスタイルを適用。
both	アニメーション開始前は@keyframesの「0%(from)」のスタイルを適用。アニメーション完了後、@keyframesの「100%(to)」のスタイルを適用。

実際に使用するときは以下のように記述します。

BOX-Bはwidthが100pxと指定してありますが、アニメーションが完了すると@keyframesの100%のスタイルが適用され、widthは300pxになります。

BOX-Cにもwidthが100pxと指定してあり、アニメーションが完了すると、widthは100pxになります。

HTML

<div class="BOX-A">デフォルト</div>
<div class="BOX-B">forwards（100%のスタイル適用）</div>
<div class="BOX-C">backwards（元のスタイルに戻る）</div>

CSS

/* デフォルト */
.BOX-A{
  width: 100px;
  height: 50px;
  animation: test 1s 3s;
}

/* 完了時、100%のスタイル適用 */
.BOX-B{
  width: 100px;
  height: 50px;
  animation: test 1s 3s forwards;
}

/* 元のスタイルに戻る */
.BOX-C{
  width: 100px;
  height: 50px;
  animation: test 1s 3s backwards;
}


/* キーフレーム */
@keyframes test {
   from {
    width: 0px; 
    }
     
    50% {
    width: 150px; 
    }
      
     {
    width: 300px; 
    }
}

まとめ

サイトに動きをつけようとすると、transitionよりも細かくアニメーションを指定する事ができるanimationの方をよく使うことになるので、使いこなせるようにしておきましょう。

パッと見だと難しく感じるかもしれませんが、慣れると楽しいです。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。