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

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

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

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

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

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

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

transformとanimationプロパティ

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

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

HTML

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

CSS

.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でアニメーションを定義

@keyframes 任意の名称 {
  0%{始点の状態}
  100%{終点の状態}
}

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

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

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

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

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

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

animation: [アニメーション名] [アニメーション時間] [動きのなめらかさ] [繰り返し回数];

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

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

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

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

ベンダープレフィックス対応ブラウザ
-moz-Firefox
-webkit-Google Chrome、Safari
-o-Opera
-ms-Internet Explorer

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

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

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

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















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