今回は、CSSのみで行うアニメーション効果（要素を回転）をご紹介いたします

sample

.spin_css {
	width: 100px;
	height: 100px;
	background: #2B958D;
	-webkit-animation: spin 2s linear infinite;
	-moz-animation: spin 2s linear infinite;
	-ms-animation: spin 2s linear infinite;
	-o-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

sample

背景・秒数などをを変更すれば、上記のようにも出来ます


以上、ホームページ制作の際は、試してみて下さい。



関連ニュース
・CSS3リファレンス.1
・CSS3リファレンス.2
・CSS3リファレンス.3
・CSSでアニメーション
・CSSで出来るブレンドモード