CSS アニメーションでの motion-path_html/css_WEB-ITnose の使用

モーション パスを使用すると、作成者は指定されたパスに従って画像オブジェクトを移動させることができます。 Google Chrome はこの CSS 機能を積極的に実装しようとしていますが、メインのモーション パスは SVG アニメーションのユニークなハイライトであると考えており、Google Chrome は SVG SMIL を放棄することを決定しました。そのため、CSS でモーション パスを実装することで簡単に実装できます。 SVG アニメーションが好きなユーザーを納得させるのに最適です。

CSS でのモーション パスの防止は次のとおりです。

motion-path: path('M100,250 C 100,50 400,50 400,250');

次に、CSS でモーション パスを使用する 3 つの例を示します。

注: 現在この機能を実装しているのは Google Chrome のみです。視聴するには最新バージョンの Google Chrome を使用してください。