備忘録的プログラミングリファレンス

@keyframes

　@keyframes ルールは、CSS アニメーションを定義するための CSS のアットルールのひとつです。at-ruleは、@-規則や@ルール、アットルールと言われます。

　例えば以下のよう場合、from で定義された状態から to に定義された状態に CSS アニメーションとして表示されます。

@keyframes
@keyframes example_anime {
	from {
		font-size: 12px;
	}

	to {
		font-size: 24px;
	}
}

詳しくは Example を参照してください

　定義した CSS アニメーションは animation や animation-name で @keyframes ルールで定義した名称を指定します。
　動きの調整は animation に関するプロパティで設定します。CSS アニメーションの動きに関しては以下の関連プロパティを参照してください。

　from や to は進捗を表す 0% ~ 100% で定義することもできます。

@keyframes
@keyframes example_anime {
	0% {
	  font-size: 12px;
	}

	50% {
	  font-size: 24px;
	}

	100%{
		color: yellow;
	}
}

　from や to、% はキーフレームセレクター（ keyframe selecter ）と呼ばれます。

　簡易な CSS アニメーションには transition プロパティ を使用することもできます。

ページ内 Index

構文( Syntax )

　@keyframes ルールの構文です。
　以下の <keyframes-name> は定義した CSS アニメーションの名称になります。名称は任意です。

@keyframes <keyframes-name> {
  ..
}

　上記の例の { .. } で、進捗状況ごとに CSS プロパティを設定します。

　例えば、最初の状態が font-size: 12px; で最後の状態が font-size: 24px; になるようにするには、以下のように from と to で定義します。

@keyframes example_anime {
	from {
		font-size: 12px;
	}

	to {
		font-size: 24px;
	}
}

　上記の例を % で定義することもできます。

@keyframes example_anime {
	0% {
		font-size: 12px;
	}

	100% {
		font-size: 24px;
	}
}

　from や to、% はキーフレームセレクター（ keyframe selecter ）と呼ばれます。

　from や to、% は組み合わせることもできます。

@keyframes example_anime {
	from {
		font-size: 12px;
	}

	50% {
		font-size: 24px;
	}

	to {
		font-size: 12px;
	}
}

Example

　@keyframes ルールの例です。

　以下の例では、段落にポインターをもっていくと0.5秒後にCSSアニメーションを開始します。ここでは、疑似クラス:hoverに CSS アニメーションを設定しています。

関連プロパティ

プロパティ概要
animationCSSアニメーションのプロパティを一括指定
animation-delay実行までの待ち時間
animation-direction再生/逆再生の設定。
animation-durationCSS animationの実行時間。
animation-fill-mode実行時間外の動作。
animation-iteration-count再生回数。
animation-name@keyframesルールで定義したCSS animation名。
animation-play-state実行/停止かの設定。
animation-timing-functionCSS animationの実行速度曲線。

関連（Related）