CSS3で要素を回転させるアニメーションの作り方

CSS3では、JavaScriptやjQueryなどを使用しなくても、アニメーション効果を演出できるプロパティが用意されています。

おしゃれなサイトではかわいいアニメーションを使っていることがあります。

今回少しだけかじった内容を備忘録として記録しておきます。

今回はAwesomeのアイコンを使って試します。

ロード中によく見かける「」を回転させてみます。

transformとanimationプロパティ

どちらもCSS3から追加されたプロパティだそうです。

まずはコードを先に書いてみます。

/*kaitenクラスを作成してアイコンを装飾*/
<i class="fa fa-spinner kaiten" aria-hidden="true"></i>

.kaiten{
color:#00698C; //アイコン色
font-size:3em; //アイコンサイズ
//↓アニメーション内容の呼び出し（各種ブラウザ対応）
-webkit-animation: r_spin 1.0s linear infinite;
-moz-animation: r_spin 1.0s linear infinite;
-ms-animation: r_spin 1.0s linear infinite;
-o-animation: r_spin 1.0s linear infinite;
animation: r_spin 1.0s linear infinite;
}

//↓各種ブラウザ向けアニメーション内容
@-webkit-keyframes r_spin {
0% {-webkit-transform: rotate(0deg);} //始点の状態
100% {-webkit-transform: rotate(360deg);} //終点の状態
}
@-moz-keyframes r_spin {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes r_spin {
0% {-ms-transform: rotate(0deg);}
100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes r_spin {
0% {-o-transform: rotate(0deg);}
100% {-o-transform: rotate(360deg);}
}
@keyframes r_spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}

@keyframesでアニメーションを定義

今回の例では、「r_spin」というアニメーション名称を定義しています。

transformプロパティで始点と終点の状態を記述

transformプロパティのrotate()で回転の方法を指定することができます。

• transform:rotate( 回転角度 )　：　2D回転
• transform:rotateX( 回転角度 )　：　X軸回転
• transform:rotateY( 回転角度 )　：　Y軸回転
• transform:rotateZ( 回転角度 )　：　Z軸回転

今回の例では、始点に0度回転、終点に360度回転をするよう記述しています。

animationプロパティを使ってアニメーションを呼び出す

他にもプロパティはありますが、今回はこれだけで動作しています。

今回の例では、「r_spin」というアニメーションを「1秒間」で実行して、「一定の速度」で「無限」に動作し続けるということになります。

@keyframesで各種ブラウザに対応

今回のアニメーションに限らず、各ブラウザの拡張機能によって表示が変わってしまうことがあります。
それに対応するために、ベンダープレフィックスを記述することで、拡張機能であることを明示することができるものです。
（わかったような、わからないような認識ですので、webデザイナーになるつもりはないので、これくらいで堪忍しといてやります(^_^;)）

@keyframesでのアニメーションの定義も、animationによるアニメーションの呼び出しもベンダープレフィックスごとに記述する必要があるようです。

CSS3で要素を回転させる練習

今回、CSS3で要素を回転させるアニメーションの作り方を少しかじってみましたので、その応用をしてみようと下のようなアニメーションを作成してみました。

アニメーションと前に勉強したpositionプロパティを組み合わせてみました。

CSS3を使ったアニメーションでAwesomeアイコンを動かすというのは、アイデア次第ではとても面白そうなものが作れそうですね。