SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.09.17
  • CATEGORY
TITLE

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

SHU[シュウ]

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

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

こんな方に読んでほしい

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

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

@keyframesの使い方について

@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の指定方法について

@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に変形させる時の中心点(位置)を指定

animation 関連記事

【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とは、アニメーションの変化(速度)のスタイルを指定します。

まとめ

今回はこれで以上です。
今回紹介したのは、一部になります。引き続きアニメーションの解説をした記事を書いていきます。
最後に紹介した、@keyframesはtransformとの組み合わせが多いです。
関連記事を読んでいただき理解しておくとよいでしょう。

次回は「アニメーションが開始するまでの時間」かについて解説します。

POINT
  • @keyframesプロパティとは、アニメーションの動きとタイミングを指定する際に使います。
  • @keyframesを指定する際に、「animation-name」、「animation-duration」プロパティが必須
    になります。
  • animation-nameとは、要素にアニメーション名を指定します。
  • animation-durationとは、アニメーションの1回分の時間を指定します。
  • animation-iteration-countとは、アニメーションの実行回数を指定します。
スポンサーリンク

SHU

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

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top