【CSS】@keyframesの使い方アニメーションの動きを指定する

シュウ

今回は【CSS】@keyframeの使い方アニメーションの動きを指定する!
の解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
@keyframesプロパティについて学びたい方へ
今回は@keyframesでアニメーションの動きとタイミングの適用についての解説になります。

今回は、@keyframesに関する記事になります。
@keyframesとは、アニメーションの動きとタイミングを指定する際に使います。
また、@keyframesを指定する際に、必須となってくる、「animation」プロパティも覚えていきましょう!

[記事の内容]

@keyframesの使い方について

@keyframesプロパティとは、アニメーションの動きとタイミングを指定する際に使います。
@keyframesを指定する際に、「animation-name」、「animation-duration」プロパティが必須
になってきます。
書き方は以下のようになります。

/*--@keyframes--*/
@keyframes アニメーション名 {
	0% {
		値;
	}
	100% {
		値;
	}
}
要素 {
	animation-name: アニメーション名;
	animation-duration: 時間(値);
}

指定できる値

%
％で変化させるタイミングを指定します。「0%」、「50%」、「100%」など
from
アニメーションの開始時点を指定します。0%と同じになります
to
アニメーションの終了時点を指定します。100%と同じになります

animation-nameについて

animation-nameとは、要素にアニメーション名を指定します。
animation-nameプロパティとは、アニメーションを適用する要素に名前を指定します。

「@keyframes アニメーション名」と同じアニメーション名を指定します。
カンマ(,)で区切って複数の指定も可能です。

指定できる値

none(初期値)
アニメーション名を指定しません。（アニメーションは実行されません）
アニメーション名
アニメーション名を指定します。
「@keyframes アニメーション名」と同じアニメーション名を指定します。
カンマ(,)で区切って複数の指定も可能です。

animation-durationについて

animation-durationとは、アニメーションの1回分の時間を指定します。
animation-durationプロパティとは、アニメーションが開始されてから終了するまでの1回分の時間を
指定します。

指定できる値

数値+単位(初期値は0)
「5s」のように数値と単位で指定します。指定できる単位は「s」（秒）、「ms」(ミリ秒)になります。
カンマ(,)で区切って複数の時間指定も可能です。

@keyframesの指定方法について

@keyframesでの指定できる値、「%」、「from、to」での指定を解説していきます。

@keyframes 数値+単位、キーワードについて

今回は、開始の指定を0%の場合は、「width:0」、終了の指定は100%の場合は「width:100%」になっております。また、アニメーションが分かりやすいように、「count 実行回数」の指定もしております。
共通部分である、アニメーションの1回分の時間は「duration: 3s」3秒になっております。

「赤色 name(animation-sample)」では、「0%から100%」までの「width」の指定をしております。
「黄色 name(animation-sample01)」では、「from(0%)からto(100%)」までの「width」の指定をしております。

@keyframesでの指定

%での指定

fromでの指定

<!--赤色 box-->
<div class="animation animation-box">%での指定</div>

<!--黄色 box-->
<div class="animation-01 animation-box">fromでの指定</div>

/*--共通 CSS--*/
.animation-box {
	width: 120px;
	height: 100px;
	line-height: 100px;
	color: #333;
	text-indent: 10px;
}

/*--赤色 box--*/
.animation {
	background-color: #fd6158;
	animation-name: animation-sample; /*--アニメーション名--*/
	animation-duration: 3s;　/*--時間--*/
	animation-iteration-count: infinite;　/*--実行回数--*/
}
@keyframes animation-sample {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

/*--黄色 box--*/
.animation-01 {
	background-color: #febe3e;
	animation-name: animation-sample01; /*--アニメーション名--*/
	animation-duration: 3s;　/*--時間--*/
	animation-iteration-count: infinite;　/*--実行回数--*/
}
@keyframes animation-sample01 {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

@keyframes 背景色の変更について

前回は0%から100%の間のアニメーションでしたが、
中間に50%を入れ、さらにCSSを適用させています。
「0%→25%→50%→75%→100%」と細かく指定も可能になります。

背景色の指定

<!--赤色 box-->
<div class="animation-02 animation-box">背景色の指定</div>

/*--共通 CSS--*/
.animation-box {
	/*--省略--*/
}

/*--赤色 box--*/
.animation-02 {
	background-color: #fd6158;
	animation-name: animation-sample02; /*--アニメーション名--*/
	animation-duration: 3s;　/*--時間--*/
	animation-iteration-count: infinite;　/*--実行回数--*/
}
@keyframes animation-sample02 {
	0% {
		background-color: #fd6158;
	}
	50% {
		background-color: #FD8F58;
	}
	100% {
		background-color: #F86015;
	}
}

@keyframes 回転について

transform(rotate 回転)との組み合わせになります。また、「transform-origin: 50% 50%」と指定し画像の中心から回転するように指定しています。
※transform、transform-originに関しては下記に関連記事を載せておきます。
rotate(0deg)からrotate(360deg)を指定する事で一回転を繰り返す(count、実行回数)指定をしています。

回転の指定

<!--画像-->
<div>
	<img src="画像パス" alt="" class="animation-03">
</div>

/*--画像 CSS--*/
.animation-03 {
	animation-name: animation-sample03;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	transform-origin: 50% 50%;
}
@keyframes animation-sample03 {
	0% {
		transform:rotate(0deg);
	}
	50% {
		transform:rotate(360deg)
	}
	100% {
		transform:rotate(360deg)
	}
}

transform 関連記事

【CSS】transformの使い方、要素を2Dに変形する！
transform(2D)では、「マトリクス変形」、「回転」、「拡大・縮小」、「傾斜」、「移動」についての指定
【CSS】transformの使い方、要素を3Dに変形する！
transform(3D)では、「マトリクス変形」、「回転」、「拡大・縮小」、「移動」、「遠近効果」についての指定
【CSS】transform-originの使い方、中心点(位置)を指定する！
transform-originとは、要素を2D、3Dに変形させる時の中心点(位置)を指定