各パーツのデモを作ってみました。Part2

cssのみで作ることが出来るアニメーションを更新しています。

マウスオーバーで回転させる

デモページ

くるくると自動で回る要素と、マウスオーダーで回転する要素のデモです。
※デモページなので簡素ですが…

回転させる要素だけですが、コードは下記になります。
※参考：http://www.webopixel.net/lab/sample/13/1028css3-onepoint/

	
BUTTON

※めちゃシンプル！

	
.btn01 {
    color: #fff;
    text-decoration: none;
    background-color: #dda0dd;
    display: block;
    width: 150px;
    height: 150px;
    line-height: 150px;
    border-radius: 50%;
    /* ここで動く速度とか設定 */
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
}
.btn01:hover {
    transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
}

マウスオーダー時に一回点だけであれば、
「rotate」を360にすれば完成です！

transform: rotate(720deg);
-webkit-transform: rotate(720deg);

自動的に回転させる

回転させる要素だけですが、コードは下記になります。
※参考：http://on-ze.com/archives/510

	
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);}
}

スピードを変えたいときは、

1.5s

この数値を変更すれば実装できます！
デモページではゆっくり動くバージョンも入れていますが、

1.5s→５

に設定しています。