MENU
はにわまんの技術ブログ
お問い合わせ
  1. ホーム
  2. CSS
  3. CSSでアニメーション！「animation」と「keyframes」の使い方のおさらい

CSSでアニメーション！「animation」と「keyframes」の使い方のおさらい

CSS
はにわまん

animationプロパティは指定できる値を見てもらうと分かりますが、transitionととても似ています。

animationで指定できる値（プロパティ）は以下のとおり。

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

この内、duration、timing-function、delayについては、同様のプロパティがtransitionにも存在します。

animationでは、もっと細かい指定ができるというイメージでいいかと思います。キーフレームアニメーションで開始から終了までを細かく設定できます。

それでは、animationの使い方を見ていきましょう。

W3C公式のドキュメントはこちらから。
→ https://drafts.csswg.org/css-animations-1/

はにわまん

2つに分けるCSSの書き方に最初は面食らいました...

目次

animationの概要

アニメーションの指定の仕方について、概要から説明していきます。

animationは、@keyframeとセットで使うプロパティです。

  • animationは「設定」
  • @keyframeは「動き」

といった感じのイメージでしょうか。

実際のコードを見てみましょう。

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

animationプロパティで、アニメーションの名前や回数、時間などを指定します。

そして、@keyframesで、順番にどういった振る舞いをしていくかを指定しています。0%から100%まで刻みながら設定できるので、細かな動きを実現できるようになっています。

.animation {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	animation: animation-haniwaman 3s linear 0s infinite normal;
}
@keyframes animation-haniwaman {
	0% {width: 100px;}
	100% {width: 100%;}
}

animationが内包する6つのプロパティの役割

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

冒頭でも紹介しましたが、animationで指定できるプロパティは以下のとおりです。

  • animation-name -> アニメーションの名前
  • animation-duration -> アニメーションの開始から終わるまでの時間（1回分）
  • animation-timing-function -> アニメーションの進捗時の効果
  • animation-delay -> アニメーションが開始するまでの時間
  • animation-iteration-count -> アニメーションの繰り返し回数
  • animation-direction -> アニメーションを逆再生（順番）
  • animation-fill-mode -> アニメーションの開始前と終了後の状態
  • animation-play-state -> アニメーションの再生と停止

それでは1つずつ解説していきます。

animation-name

アニメーションの名前を指定します。他のアニメーションと被らないように注意しましょう。

animation-name: animation-haniwaman;

といった具合です。

この名前はキーフレームを指定する際に使用します。

先にどんな感じで使うかだけ実例を紹介します。

.animation {
	animation-name: animation-haniwaman;
}
@keyframes animation-haniwaman {
	0% {width: 0%;}
	100% {width: 100%;}
}

@keyframesの後ろに続くのが、animation-nameで指定した値になります。

animation-duration

1回分のアニメーションが開始してから終了するまでの時間を指定します。

値説明
xsx秒
xmsxミリ秒（1000ミリ秒 = 1秒）

実際の動きを確認しましょう。

1sで指定した場合

0%から100%までのアニメーション時間が1秒になります。

<div class="animation-duration-1s"></div>
.animation-duration-1s {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	animation-name: animation-haniwaman;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
}
@keyframes animation-haniwaman {
	0% {width: 100px;}
	100% {width: 100%;}
}

5sで指定した場合

0%から100%までのアニメーション時間が5秒になります。

<div class="animation-duration-5s"></div>
.animation-duration-5s {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	animation-name: animation-haniwaman;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
}
@keyframes animation-haniwaman {
	0% {width: 100px;}
	100% {width: 100%;}
}

animation-timing-function

アニメーションの振る舞い方を指定します。「始め早く終わりゆっくり」とか、「一定のスピード」などが選択できます。

値説明
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) を指定したのと同じ）
cubic-bezier(数値, 数値, 数値, 数値)3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定

各値の違いを見てみよう

ease、linear、ease-in、ease-out、ease-in-outの各値を並べてみました。

開始から終了までのアニメーション時間は同じですが、動きがそれぞれ異なることが分かります。

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

animation-delay

アニメーションが開始されるまでの時間を指定します。

値説明
xsx秒
xmsxミリ秒（1000ミリ秒 = 1秒）

実際の動きを確認しましょう。

1sで指定した場合

アニメーションが開始するまでに1秒かかります。

※ マウスホバー or タップ

<div class="animation-delay-1s"></div>
.animation-delay-1s {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	animation-name: animation-haniwaman;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-direction: normal;
}
@keyframes animation-haniwaman {
	0% {width: 100px;}
	100% {width: 100%;}
}

3sで指定した場合

アニメーションが開始するまでに3秒かかります。

※ マウスホバー or タップ

<div class="animation-delay-3s"></div>
.animation-delay-3s {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	animation-name: animation-haniwaman;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-delay: 3s;
	animation-iteration-count: 1;
	animation-direction: normal;
}
@keyframes animation-haniwaman {
	0% {width: 100px;}
	100% {width: 100%;}
}

animation-iteration-count

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

値説明
infinite無限に再生を繰り返す
数値数値で再生回数を指定する（初期値は1）

実際の動きを確認しましょう。

3で指定した場合

アニメーションが3回繰り返されます。

※ マウスホバー or タップ

<div class="animation-iteration-count-3"></div>
.animation-iteration-count-3 {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	animation-name: animation-haniwaman;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: 3;
	animation-direction: normal;
}
@keyframes animation-haniwaman {
	0% {width: 100px;}
	100% {width: 100%;}
}

infiniteで指定した場合

アニメーションが無限に繰り返されます。

※ マウスホバー or タップ

<div class="animation-iteration-count-infinite"></div>
.animation-iteration-count-infinite {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	animation-name: animation-haniwaman;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
}
@keyframes animation-haniwaman {
	0% {width: 100px;}
	100% {width: 100%;}
}

animation-direction

繰り返すたびにアニメーションの向きが変わります。keyframesで表現すると、0% → 100%と、100% → 0%を繰り返すといったイメージです。

値説明
normal普通方向の再生でアニメーションサイクルを繰り返す（初期値）
alternate奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す

実際の動きを確認しましょう。

normalで指定した場合

同じ方向に何度も繰り返されます。

<div class="animation-direction-normal"></div>
.animation-direction-normal {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	animation-name: animation-haniwaman;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
}
@keyframes animation-haniwaman {
	0% {width: 100px;}
	100% {width: 100%;}
}

alternateで指定した場合

アニメーションの方向が偶数回と奇数回で変わります。

<div class="animation-direction-alternate"></div>
.animation-direction-alternate {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	animation-name: animation-haniwaman;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
}
@keyframes animation-haniwaman {
	0% {width: 100px;}
	100% {width: 100%;}
}

animation-fill-mode

アニメーションの開始前と開始後のスタイルを指定します。

値説明
none適応なし（初期値）
forwardsアニメーションの終了時に、もとの状態に戻らない（100%の状態）
backwardsアニメーションの終了時に、もとの状態に戻る（0%の状態）
bothforwardsとbackwardsが両方適応される

実際の動きを確認しましょう。

forwardsで指定した場合

アニメーションの終了時に、もとに戻りません。（100%の状態になる）

※ マウスホバー or タップ

<div class="animation-fill-mode-forwards"></div>
.animation-fill-mode-forwards {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	animation-name: animation-haniwaman;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
@keyframes animation-haniwaman {
	0% {width: 100px;}
	100% {width: 100%;}
}

backwardsで指定した場合

アニメーションの終了時に、もとに戻ります。（0%の状態になる）

※ マウスホバー or タップ

<div class="animation-fill-mode-backwards"></div>
.animation-fill-mode-backwards {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	animation-name: animation-haniwaman;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: backwards;
}
@keyframes animation-haniwaman {
	0% {width: 100px;}
	100% {width: 100%;}
}

animation-play-state

アニメーションの再生と停止をコントールします。

値説明
runningアニメーションが再生されます（初期値）
pausedアニメーションが停止します

実際の動きを確認しましょう。

動いているアニメーションを停止させる

無限にアニメーションしている要素を止めてみます。

※ マウスホバー or タップ

<div class="animation-play-state-paused"></div>
.animation-play-state-paused {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	animation-name: animation-haniwaman;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: none;
	animation-play-state: running;
}
.animation-play-state-paused:hover {
	animation-play-state: paused;
}
@keyframes animation-haniwaman {
	0% {width: 100px;}
	100% {width: 100%;}
}

animationプロパティでまとめて指定する

以下の6つのプロパティをanimationで1つにまとめて指定できます。

  • animation-name -> アニメーションの名前
  • animation-duration -> アニメーションの開始から終わるまでの時間（1回分）
  • animation-timing-function -> アニメーションの進捗時の効果
  • animation-delay -> アニメーションが開始するまでの時間
  • animation-iteration-count -> アニメーションの繰り返し回数
  • animation-direction -> アニメーションを逆再生（順番）
  • animation-fill-mode -> アニメーションの開始前と終了後の状態
  • animation-play-state -> アニメーションの再生と停止

並び順は以下のとおり。

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;

複数のアニメーションを指定することも可能

カンマで区切ることで複数のアニメーションを指定することもできます。

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

@keyframesの指定方法

実際にどのように変化させていくかのスタイルを指定するのが@keyframesです。わたしはanimationeプロパティは「設定」、@keyframesは「振る舞い」という捉え方をしています。

@keyframesの指定の仕方について見ていきましょう。指定方法には2パターンあります。

最初と最後だけ指定

fromでアニメーション開始時のスタイルの指定。toでアニメーション終了時のスタイルを指定します。2種類だけなのでとてもシンプルなアニメーションとなります。

@keyframes animation-keyframes {
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}

実際の指定例として以下のとおりです。

.animation {
	width: 0;
	height: 100px;
	background: #00BCD4;
	animation: animation-keyframes 3s linear 0s infinite normal;
}
@keyframes animation-keyframes {
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}

最初と最後だけの指定であればtraisitionと役割はほぼ同じですね。

%で区切る

0%から100%まで好きなタイミングを区切ってアニメーションを設定することができます。この柔軟性がanimationプロパティの真骨頂ではないでしょうか。複雑な動きを作ることができます。

※ 0%と100%は必須ではありません。好きな数字で作ることが可能です。

@keyframes animation-keyframes-per {
	0% {
		width: 0%;
	}
	20% {
		width: 50%;
	}
	40% {
		width: 25%;
	}
	60% {
		width: 75%;
	}
	80% {
		width: 50%;
	}
	100% {
		width: 100%;
	}
}

実際の指定例として以下のとおりです。

.animation {
	width: 0;
	height: 100px;
	background: #00BCD4;
	animation: animation-keyframes-per 3s linear 0s infinite normal;
}
@keyframes animation-keyframes-per {
	0% {
		width: 0%;
	}
	20% {
		width: 50%;
	}
	40% {
		width: 25%;
	}
	60% {
		width: 75%;
	}
	80% {
		width: 50%;
	}
	100% {
		width: 100%;
	}
}

おわり

animationの使い方について、紹介しました。

「薄っすら消えていく」みたいなよく使うようアニメーションは事前に作っておくといいかもしれません。

CSS

この記事が気に入ったら
フォローしてね！

この記事を書いた人

はにわまんのアバター はにわまん

WordPressが得意なWeb屋。HPcode代表。

300件以上のWordPressカスタマイズを対応してきました。SE → 農家 → アフィリエイター → Web屋。生まれは三重県。

この著者の記事一覧へ

関連記事

目次