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	アニメーションが始まって終わるまでの時間を指定
animation-timing-function	アニメーションの進行の度合いを指定
animation-delay	アニメーションが始まる時間を指定
animation-iteration-count	アニメーションの繰り返し回数を指定
animation-direction	アニメーションの再生方向を指定
animation-fill-mode	アニメーションの開始前、終了後のスタイルを指定
animation-play-state	アニメーションの再生・停止を指定
animation	上記、8つのプロパティを一括で指定できる、ショートハンドプロパティ。

サンプル

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

• 衆

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