SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.10.08
  • CATEGORY
TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • animationプロパティについて学びたい方へ
  • 今回は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になります。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top