細かいアニメーションの制御

このサンプルの動作確認済み環境。

マシン	環境
iPhone	iPhone OS 3.1.2に付属のSafari
Mac	Safari 4.0.4

基本的には前回紹介した「自動的に3D回転(3D Transforms)をさせ続ける」サンプルと同様の事を行っています。

自動的に3D回転(3D Transforms)をさせ続ける - 強火で進め
http://d.hatena.ne.jp/nakamura001/20100129/1264791358

前回使用した from 、 to での指定ではアニメーションの開始と終了の状態についてしか設定できません。

@-webkit-keyframes ani_rotX{
  from {
    -webkit-transform: rotateX(0deg);
  }
  to {
    -webkit-transform: rotateX(360deg);
  }
}

この様な設定の他にパーセントで指定してすることができます。

例えば50%の時点の設定を行うとアニメーションのちょうど半分の時点での状態を設定できます。

今回のサンプルでは以下の様に記述しています。

@-webkit-keyframes ani_move{
  0% {
    top: 0px;
    left: 0px;
  }
  33% {
    top: 100px;
    left: 100px;
  }
  66% {
    top: 100px;
    left: 0px;
  }
  100% {
    top: 0px;
    left: 0px;
  }
}

0%のときに「左上」、33%のときに「右下」、66%のときに「下」、そして100%で元の「左上」に戻る様に位置を指定しています。

サンプルはこちらで確認できます。

まとめ

http://www32.atwiki.jp/nakamura001/pages/78.html