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 件のコメント:
コメントを投稿