【CSS】animationプロパティの一括指定！まとめ

シュウ

今回はanimationプロパティの一括指定！の解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
animationプロパティについて学びたい方へ
今回はanimationでアニメーションの一括指定についての解説になります。

今回は、animationに関する記事になります。
animationの一括指定（まとめ）についてに解説になります。
前回の復習とかねて解説していきます。

[記事の内容]

animationの一括指定について

animationプロパティとは、アニメーションを使う際に指定します。
例) アニメーションの「1回分の時間」、「変化のタイミング」など、項目が多いほどコードが長くなります。
一括指定を覚えることでコードをより短く簡単に指定できるようになります。
※①〜⑧の順序は任意になります。
書き方は以下のようになります

/*--@keyframes--*/
@keyframes アニメーション名 {
	/*--省略--*/
}

/*--animationの一括指定--*/
要素 {
	animation: ①-name ②-duration ③-timing ④-delay ⑤-iteration ⑥-direction ⑦-fill ⑧-play;

	/*--内訳
	①animation-name: アニメーション名;
	②animation-duration: 時間(値);
	③animation-timing-function: 値;
	④animation-delay: 時間(値);
	⑤animation-iteration-count: 値;
	⑥animation-direction: 値;
	⑦animation-fill-mode: 値;
	⑧animation-play-state: 値;
	--*/
}

指定できる値

@keyframes　
解説の記事ありますよ
アニメーションの動きとタイミングを指定する際に使います。
①animation-name　
解説の記事ありますよ
要素にアニメーション名を指定します。
②animation-duration　
解説の記事ありますよ
アニメーションの1回分の時間を指定します。
③animation-timing-function　
解説の記事ありますよ
アニメーションの変化(速度)のスタイルを指定します。
④animation-delay　
解説の記事ありますよ
アニメーションが開始するまでの時間を指定します。
⑤animation-iteration-count　
解説の記事ありますよ
アニメーションの実行回数を指定します。
⑥animation-direction　
解説の記事ありますよ
アニメーションの再生方向を指定します。
⑦animation-fill-mode　
解説の記事ありますよ
アニメーションの実行前後のスタイルを指定します。
⑧animation-play-state　
解説の記事ありますよ
アニメーションが再生中か一時停止状態かを指定します。

animation 指定方法について

animationプロパティとは、アニメーションを使う際に指定します。
上記で解説した①〜⑧を一括で指定が可能になります。
指定する際には、それぞれの値を半角スペースで区切って指定します。

注意するポイント！
上記で解説した①〜⑧の順序は任意になりますが、注意するポイントがあります。
②animation-durationと④animation-delayを指定する場合は、
1つ目が②animation-duration、2つ目が④animation-delayになります。


/*--animation　良い例--*/
要素 {
	animation: ①-name ②-duration ③-timing ④-delay ...;

	/*--内訳
	①animation-name: アニメーション名;
	②animation-duration: 時間(値);
	③animation-timing-function: 値;
	④animation-delay: 時間(値);
	--*/
}


/*--animation　悪い例--*/
要素 {
	animation: ①-name ④-delay ②-duration ③-timing ...;

	/*--内訳
	①animation-name: アニメーション名;
	④animation-delay: 時間(値);
	②animation-duration: 時間(値);
	③animation-timing-function: 値;
	--*/
}

実際にどのように指定するのか、記述してみます。

animation

一括指定

<div class="animation animation-main">一括指定</div>

/*--共通 CSS--*/
.animation-main {
	width: 120px;
	height: 100px;
	color: #333;
	text-align: center;
	line-height: 100px;
	background-color: #fd6158;
}

/*--アニメーション指定--*/

.animation {
	animation: animation-sample 3s ease-in 3s infinite alternate forwards running;
}

@keyframes animation-sample {
	0% {
		background-color: #fd6158;
		width: 0;
	}
	100% {
		background-color: #f99393;
		width: 100%;
	}
}

内訳は以下になります

①-name
「アニメーション名 animation-sample」
②-duration
「1回分の時間 3秒」
③-timing
「変化のタイミングゆっくり開始する」
④-delay
「3秒後にアニメーションがスタート」
⑤-iteration
「実行回数無限に繰り返し」
⑥-direction
「再生方向偶数回で逆再生」
⑦-fill
「実行前後 @keyframesの100%の状態」
⑧-play
「状態アニメーションを再生中にする」

【STEP01 CSS】@keyframesの使い方アニメーションの動きを指定する
@keyframesとは、アニメーションの動きとタイミングを指定する際に使います。
【STEP02 CSS】animation-delayの使い方アニメーションの開始を指定する
animation-delayとは、アニメーションが開始するまでの時間を指定します。
【STEP03 CSS】animation-play-stateの使い方・再生状態を指定する
animation-play-stateとは、アニメーションが再生中か一時停止状態かを指定します。
【STEP04 CSS】animation-fill-modeの使い方・実行前後を指定する
animation-fill-modeとは、アニメーションの実行前後のスタイルを指定します。
【STEP05 CSS】animation-timing-functionの使い方・変化を指定する
animation-timing-functionとは、アニメーションの変化(速度)のスタイルを指定します。
【STEP06 CSS】animation-iteration-count・アニメーションの回数を指定する
animation-iteration-countとは、アニメーションの実行回数を指定します。
【STEP07 CSS】animation-directionの使い方・再生方向を指定する
animation-directionとは、アニメーションの再生方向を指定します。

まとめ

今回はこれで以上です。
今回でアニメーションに関する記事は終わりになります。
1つ1つのプロパティを理解しておきましょう。

POINT

animationプロパティとは、アニメーションを使う際に指定します。
上記で解説した①〜⑧を一括で指定が可能になります。
上記で解説した①〜⑧の順序は任意になります。
注意するポイント
②animation-durationと④animation-delayを指定する場合は、
1つ目が②animation-duration、2つ目が④animation-delayになります。