CSS「keyframes」を使ってアニメーション効果を実装

オンマウス時などにCSSのみで簡易的なアニメーション効果を実装する方法をメモ

@keyframes sampleanime{
	50% {
		opacity: 1;
		-webkit-transform: scale(1.5);
		-moz-transform: scale(1.5);
		transform: scale(1.5);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		transform: scale(1);
		-webkit-transform: rotateY(360deg);
		-moz-transform: rotateY(360deg);
		transform: rotateY(360deg);
	}
}
.sample{
	opacity: 0.1;
	-webkit-perspective: 9999px;
	-moz-perspective: 9999px;
	perspective: 9999px;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
.sample:hover {
	animation: sampleanime .5s ease forwards;
}

フォーマット

@keyframes 任意の名前 {
	0% {
		CSSプロパティ:値;
	}
	100% {
		CSSプロパティ:値;
	}
}

セレクタ名 {
	animation: animation-nameの値 animation-durationの値 animation-timing-functionの値 animation-delayの値 animation-iteration-countの値 animation-directionの値 animation-fill-modeの値 animation-play-stateの値;
}

「@keyframes」でアニメーションの流れを設定して、実行したいクラスに「animation」を設定して実行。
使用できる「animation」に設定できるプロパティは下記参照

プロパティ一覧

プロパティ	説明
animation-name	アニメーションの名前
animation-duration	アニメーションが始まって終わるまでの時間を指定 例）3s、750ms
animation-timing-function	アニメーションの進行の度合いを指定 ease：既定値。アニメーションの中央に向けて変化量が増加し、最後に向けて減少。 linear：等しい速度でアニメーションします。 ease-in：アニメーションの変化の速度はゆっくり始まり、終了まで加速。 ease-out：アニメーションは速く始まり、速度を落としながら続きます。 ease-in-out：アニメーションはゆっくり変化し、速度を上げ、また速度を落とします。 cubic-bezier(p1, p2, p3, p4)：ユーザー定義の二次元ベジェ曲線で、 p1 と p3 の値は 0 から 1 の間である必要があります。 steps(n, )：遷移に沿った n 個の停止点に沿ってアニメーションを表示し、それぞれの停止点を同じ時間の長さで表示します。
animation-delay	アニメーションが始まる時間を指定 例）1s、500ms
animation-iteration-count	アニメーションの繰り返し回数を指定 例）5、10、infinite
animation-direction	アニメーションの再生方向を指定 normal：アニメーションを毎回順方向に再生。 reverse：アニメーションを毎回逆方向に再生。 alternate：アニメーションを順方向、逆方向の順で再生。 alternate-reverse：アニメーションを逆方向、順方向の順で再生。
animation-fill-mode	アニメーションの開始前、終了後のスタイルを指定 none：スタイルを指定しない。再生後は、元のスタイルを適用。 backwards：再生後は、最初のキーフレーム（0%）を適用。animation-delayを指定している場合、再生までの時間は最初のキーフレーム（0%）を適用。 forwards：再生後は、最後のキーフレーム（100%）を適用 both：再生後は、最後のキーフレーム（100%）を適用。 animation-delayを指定している場合、再生までの時間は最初のキーフレーム（0%）を適用。
animation-play-state	アニメーションの再生・停止を指定
animation	上記、8つのプロパティを一括で指定できる、ショートハンドプロパティ。

サンプル

サンプルはオンマウス時に、Y軸方向に半回転しながら、一時拡大して表示。

• 衆

• 【CSS3】@keyframes と animation 関連のまとめ
• CSSアニメーション 入門