このサンプルの動作確認済み環境。
| マシン | 環境 |
|---|---|
| iPhone | iPhone OS 3.1.2に付属のSafari |
| Mac | Safari 4.0.4 |
以前、3D回転の解説を行いました。このときのサンプルはマウスでのクリックをトリガーに回転を行うというものでした。
3D回転(3D Transforms) - 強火で進め
http://d.hatena.ne.jp/nakamura001/20100125/1264444424
この様な回転のさせ方の他に常に回転させ続けるという指定も可能です。今回はこちらの方法を解説します。
設定(1)
-webkit-animation-iteration-count: infinite; /* 繰り返しの回数は無限 */ -webkit-animation-direction: normal; /* アニメの再生方向 */ -webkit-animation-duration: 3.0s; /* アニメの再生時間 */
この様に記述します。個別に解説します。
「-webkit-animation-iteration-count」はアニメーションの繰り返し回数を指定します。今回はずっと回転させ続けたかったので無限(infinite)を指定しています。
「-webkit-animation-direction」はアニメーションの回転方向です。今回指定した通常の再生(normal)の他に通常再生をした後に逆再生をして元の状態に戻る動作となる alternate を指定する事もできます。
「-webkit-animation-duration」はアニメーションの再生時間を指定します。今回は3秒に指定しています。
設定(2)
先程のCSSではアニメーションの基本設定を行っています。この設定に加えて別途、実際のアニメーション情報を設定する必要があります。
例えばX軸回転をするものについてはクラスに以下の様に設定しています。
@-webkit-keyframes ani_rotX{ from { -webkit-transform: rotateX(0deg); } to { -webkit-transform: rotateX(360deg); } }
「@-webkit-keyframes」でアニメーションを設定しています。 from が最初の状態 to がアニメーションの最後の状態の指定となります。今回はアニメーションの時間を3秒に指定したので from の状態でアニメーション始まり、3秒後に to の状態になります。
そしてこのアニメーションの設定を実際に使用する場合は以下の様に記述します。
.rotX { -webkit-animation-name: ani_rotX; }
「-webkit-animation-name」に使用したいアニメーションの名称(今回の場合は ani_rotX )を指定します。他のY軸やZ軸回転しているものについても同様の設定を行っています。
サンプルはこちらで確認できます。
