animation-timing-function に linear や cubic-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 件のコメント:
コメントを投稿