正方形を一定の速度で回転させたいのですが、アニメーション中のある時点で速度を上げたいと考えています。
これは私の試みです:
http://codepen.io/JAStanton/pen/uzfji
これまでのところ、Safariではちらつきます。純粋な JavaScript を使用してアニメーション化するというアイデアもありますが、これにはモバイルでのパフォーマンス コストがいくらかかかります。
考え?
正方形を一定の速度で回転させたいのですが、アニメーション中のある時点で速度を上げたいと考えています。
これは私の試みです:
http://codepen.io/JAStanton/pen/uzfji
これまでのところ、Safariではちらつきます。純粋な JavaScript を使用してアニメーション化するというアイデアもありますが、これにはモバイルでのパフォーマンス コストがいくらかかかります。
考え?
これは、2 つのアニメーションを連鎖させることで実現できます。
-webkit-animation: mymove 4s linear 0s, mymove2 2s linear 4s;
2 つ目は 4 秒の遅延後に実行されるため、イベントをリッスンする必要はありません。さらに、カスタム ベジエを使用して、イージング関数を通じてこの効果を実現できます。
これはあなたが望むものですか: http://jsfiddle.net/jtYCW/