【CSS3】要素をクルクル回転させる。

ローディング画像などに、以前は “アニメーションgif画像” を使っていましたが、今後は CSS3 の animation プロパティの導入するほうが、動きもスムーズで簡単に実装できるので利用する機会が増えることと思います。

ここでは仮に、回転させたい要素に class="load" プロパティを付加します。

.load {
width: 50px;
height: 50px;
background: #1aa;
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    -ms-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s 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);}
}

スタイルシートに上記コードを記述するだけでＯＫです。
「CSS3」から新たに追加されたプロパティ「animation」と「transform」を利用。
アニメーションの処理は、同じくCSS3から実装された「keyframes」という機能を使っています。

今後のスタンダードになるスタイルシートのテクニックです。
必ず覚えておきましょう！

→上記コードのデモ