【徹底解説】animationとkeyframesの使い方をマスターしよう！【CSS】

animationとkeyframesの使い方がわからない

そんな疑問にお答えします。

CSSでアニメーションさせたいとなった時、真っ先に思い浮かぶのは「transition」だと思います。

僕も最初アニメーションなら「transition」と覚えていました。

でもある時「animation」、「keyframes」というものがあることを知りました。

そして２つに分かれたCSSの記述方法に戸惑ったのを覚えています。

今回は備忘録としてanimationとkeyframesの使い方の記事をアップします。

以前のtransitionの記事と合わせてしっかり身につけておきたいですね。

【徹底解説】transitionプロパティの使い方をマスターしよう！【CSS】

transitionとの違い

CSSアニメーションには「transition」と「animation」の２つがあります。

どちらも指定した要素をアニメーションさせることができます。

だったらどちらを使っても良さそうなものですが、両者にははっきりとした違いがあります。

animationはアニメーションの段階を細かく指定することができ、かつアニメーション開始のきっかけも不要なところが主が特徴です。

animationとkeyframes

では次にアニメーションの指定の仕方について解説します。

「animation」は「@keyframes」とセットで使用します。

「@keyframes」でアニメーションの動きを指定し、「animation」でその@keyframesで指定した動きを要素に設定します。

文章だけではイメージしにくいので実際のアニメーションを見てみましょう。

こちらのコードは以下のとおりです。

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

.animation {
  width: 100px;
  height: 100px;
  background: #00CC99;
  animation: animation-gorigori 3s ease 0s infinite normal;
}

@keyframes animation-gorigori {
  0% {width: 100px;}
  100% {width: 100%;}
}

animation関連のプロパティ

次にanimationのプロパティを見ていきます。

animationはショートハンドプロパティといってbackgroundのように複数のプロパティを一括で指定できるプロパティです。

先ほどの例ですと

animation: animation-gorigori 3s ease 0s infinite normal;

animation-name: animation-gorigori;
animation-duration: 3s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;

animationのプロパティの種類

animationで指定できるプロパティの種類は以下のとおりです。

それでは1つずつそれぞれのプロパティを解説していきます。

animation-name（キーフレームの名前）

どの@keyframesを使用するか指定するためのプロパティです。

記述の仕方はこのようになります。

.animation {
	animation-name: animation-gorigori; /* ここに記述 */
}
@keyframes animation-gorigori {
	0% {width: 100px;}
	100% {width: 100%;}
}

@keyframesの後ろに記述しているのがanimation-nameで指定した値です。

animation-duration（かかる時間）

何秒間アニメーションさせるかを指定するためのプロパティです。

1sで指定の場合

<div class="animation1"></div>

.animation1 {
  width: 100px;
  height: 100px;
  background: #00CC99;
  animation-name: animation-gorigori1;
  animation-duration: 1s; /* 開始から終了まで1秒 */
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

@keyframes animation-gorigori1 {
  0% {width: 100px;}
  100% {width: 100%;}
}

3sで指定の場合

<div class="animation2"></div>

.animation2 {
  width: 100px;
  height: 100px;
  background: #00CC99;
  animation-name: animation-gorigori2;
  animation-duration: 3s; /* 開始から終了まで3秒 */
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

@keyframes animation-gorigori2 {
  0% {width: 100px;}
  100% {width: 100%;}
}

animation-timing-function（速度）

アニメーションの速度を指定するためのプロパティです。

上図はグレーのエリアをマウスオーバーすることで動きます。

アニメーション開始から終了までの時間を3秒で指定しています。

それぞれの動きの違いがわかると思います。

animation-delay（何秒後に開始するか）

アニメーションを何秒後に開始するかを指定するためのプロパティです。

初期値は「0s」です。

animation-iteration-count（繰り返し回数）

アニメーションを何回再生するかを指定するためのプロパティです。

animation-direction（再生する方向）

アニメーションを再生する方向を指定するためのプロパティです。

２回以上再生する場合のみ適用されます。

animation-fill-mode（アニメーション前後のプロパティの状態）

アニメーションの再生前後のスタイルを指定するためのプロパティです。

animation-play-state（アニメーションの再生と停止）

アニメーションを再生中か、一時停止かを指定するためのプロパティです。

animationプロパティで一括指定する

以上のプロパティをanimationプロパティで一括指定できます。

記述の仕方はこのようになります。

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

初期値で当てはめると

animation: none 0s ease 0s 1 normal none running;

となります。

keyframesの指定方法

keyframesの指定の仕方について見ていきます。

書き方はいくつかあります。

通常の書き方

@keyframes name{ 
　　0%{ 
   } 
　　100%{
   } 
}

最後だけ指定

@keyframes name{ 
  100%{ 
  } 
}

最初と最後だけ指定

@keyframes name{
   from{
   } 
   to{ 
   } 
}

%で区切って細かく指定

@keyframes name{
   0%{
   } 
   25%{ 
   }
   50%{ 
   } 
   75%{
   } 
   100%{ 
   }
 }

0%から100%まで好きなタイミングで区切ってアニメーションを設定することができます。

0%と100%は必須ではありません。

任意の箇所で指定できますので、複数な動きが可能になります。

細かい微調整ができるのが大きなメリットですね。

たとえば以下のような動きをつけることができます。

<div class="animation3"></div>

.animation3 {
  width: 100px;
  height: 100px;
  background: #00CC99;
  animation: animation-gorigori3 5s linear 0s infinite normal;
}

@keyframes animation-gorigori3{
   0%{
     width: 0%;
   }
   25%{
     width: 50%;
   }
   50%{
     width: 30%;
   }
   75%{
     width: 80%;
   }
   100%{
     width: 100%;
   }
}

最初はとっつきにくいかもしれませんが、使い慣れるとアニメーションの幅が広がります。

しっかりマスターしておきましょう。

• Twitter
• Facebook

投稿者 トシ

関連記事

【まるっと解説！】YouTubeをレスポンシブで埋め込む方法

カード型レイアウトでよく使う定番のマウスホバーパターン４選

【before・after】疑似要素を使って見出しに線を引く方法

CSSのみのドロップダウンメニューの作り方【多階層メニュー】

画像だけインナー幅からはみ出して画面いっぱいに広げる方法

【CSS】hoverしたときに別要素の値を変更する方法