Title

@keyframesとは

ここで説明する@keyframes とは次の語句からなるCSSの@規則です。

@keyframes

読み: アットマーク、キーフレームス
意味: アニメーションの動きを指定する@規則

目次に戻る

@keyframesの概要

これは要素に対して、時間とともに変化するプロパティの値を使ったアニメーション効果を定義するための@規則です。

@keyframesはアニメーション開始時点から時間とともにCSSプロパティの値を可変する規則を定義することができます。

定義された、@keyframesは任意で命名した固有の名前で管理されることとなり、そのキーフレームスの名を animation-name プロパティで対象要素に関連付けすることでアニメーションが実装されます。 また、時間とともにプロパティ値の変化をすることが前提なので、 animation-duration プロパティで1回のアニメーションを実行する所要時間を指定する必要があります。

目次に戻る

構文

キーフレームスには、任意のキーフレームス名を付けます。 この名前を、 animation-name プロパティと関連付けることで、要素にアニメーション効果を付けることができます。

アニメーションの開始時点をfromまたは0%と表し、完了時点をtoまたは100%と表します。 この開始時点と完了時点の部分は必ず記述しなければいけません。 また、アニメーションの通過点を任意のパーセンテージ値で作成することにより、より細かなアニメーション変化を設定することができます。 例えば10秒間のアニメーションの場合には、30%が開始から3秒経過した時点、50%が5秒経過した時点、80%が8秒経過した時点となります。

@keyframes 任意のキーフレーム名{
	from {プロパティ名: 設定値;}
	to {プロパティ名: 設定値;}
}
@keyframes 任意のキーフレーム名{
	0% {プロパティ名: 設定値;}
	50% {プロパティ名: 設定値;}
	100% {プロパティ名: 設定値;}
}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にキーフレームスを適用させて結果を見ていきたいと思います。

要素にアニメーション効果を実装するためには、 @keyframesでアニメーション効果を定義しておき、要素に対して animation-nameプロパティでキーフレームスを関連付けする必要があります。 ここでは実際にanimation-nameプロパティを指定して関連付ける方法を説明していきたいと思います。

目次に戻る

基本: @keyframesとanimation-nameプロパティ

ここではサンプルとして二つのキーフレームスを作成しています。 myColorPinkはフォントのカラーをピンク系色から黒色に変化させます。 また、myColorGreenはフォントのカラーを緑系色から黒に変化させます。 通常はキーフレームスにmyColorPinkが指定されていますが、ユーザーが要素にマウスオーバーした時にmyColorGreenが適用されます。

@keyframes myColorPink {
	0%{
		color: deeppink;
	}
	100%{
		color: black;
	}
}
@keyframes myColorGreen {
	0%{
		color: greenyellow;
	}
	100%{
		color: black;
	}
}
div{
	animation-duration: 0.8s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-name: myColorPink;
}
div:hover{
	animation-name: myColorGreen;
}

目次に戻る

備考: !importantの宣言

!importantをコード記述の終りに宣言することにより、そのコード部分はアニメーションとして実装されません。 つまり、importantがコードの中にある場合には、そのコード部分は無視されるということです。

ここではマウスオーバした時にmyColorGreenの50%の部分でオレンジを指定していますが、 !important宣言をしている為にコードは無視される結果となります。

@keyframes myColorPink {
	0%{
		color: deeppink;
	}
	100%{
		color: black;
	}
}
@keyframes myColorGreen {
	0%{
		color: greenyellow;
	}
	50%{
		color: orange !important;
	}
	100%{
		color: black;
	}
}
div{
	animation-duration: 0.8s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-name: myColorPink;
}
div:hover{
	animation-name: myColorGreen;
}

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

以下にこの「まとめ」のセクションに使用している他のCSSのコードを掲載しておきます。

@keyframes myBorder-width{
	from{
		border-width: 0;
	}
	to{
		border-width: 10px;
	}
}
@keyframes myBackground-color{
	from{
		background-color: red;
	}
	to{
		background-color: yellow;
	}
}
要素名{
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

animation-name: none;

animation-name: myBorder-width;

animation-name: myBackground-color;

目次に戻る