2013年6月7日金曜日

3ds で animation-timing-function:steps() が動かない

3ds のウェブブラウザは CSS の keyframe-animation に対応しています。
animation-timing-functionlinearcubic-bezier() を指定すると動作するのですが、
steps() を指定しても動作しませんでした。

steps(1) を指定すると PC ではフレームの切り替えを 1 ステップでやってくれるため、
パラパラ漫画になるのですが、
3ds では ease を指定した時と同じように切り替えがなめらかになってしまい、
パラパラ漫画になりません。余計な切り替えアニメーションが表示されてしまいます。

そのため、キーフレームアニメーションを使ってパラパラアニメが作れません。
cubic-bezier() を使ってフレームの遷移速度を速くすることはできるものの、
フレームが切り替わる余計な部分も表示されてしまいます。

@-webkit-keyframe 内で background-image を変更してみても
PC だけしか反応してくれませんでした。

3ds で -webkit-animation-timing-function: steps(1) が指定出来れば楽なんですが・・・。
パラパラアニメは JavaScript のタイマーを使って css をいじるしかないのでしょうか。
うーむ・・・。


#animation {
 position: absolute;
 left: 100px;
 top: 100px;
 width: 25px;
 height: 25px;
 
 background-image: url('img/piece.png');
 background-position: 0px;
 -webkit-animation-name: play;
 -webkit-animation-duration: 1s;
 -webkit-animation-timing-function: steps(1);  /* 3dsで無効 */
 -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes play {
 0% { background-position: 0px; }
 17% { background-position: 25px; }
 34% { background-position: 50px; }
 51% { background-position: 75px; }
 68% { background-position: 100px; }
 85% { background-position: 125px; }
 100% { background-position: 150px; }
}

0 件のコメント:

コメントを投稿