CSSのoffsetプロパティで、楽しいパスアニメーションを作ろう - ICS MEDIA

offsetプロパティは、パス上に要素を配置・移動させるCSSのプロパティです。animationプロパティやtransitionプロパティと組み合わせることで、手軽に一見複雑そうなアニメーションが作れます。 SVGやJavaScriptは詳しくないけど、複雑そうな動きのアニメーションを作ってみたい方、animationプロパティなどのおさらいをしておきたい方にオススメの記事です。 サンプルを別ウインドウで開く ソースコードを確認する offsetプロパティと対応ブラウザについて offsetプロパティは、任意のパス上に要素を配置・移動させる一括指定プロパティです。以下の5つのプロパティが指定可能です。プロパティの詳細については、MDNのドキュメントをご参照ください。 offset-path：要素を配置・移動させるためのパス。（MDN） offset-distance：offset-pat

[ics-media]

offset-pathでパスを指定でき曲線上に要素を配置できます。offsetプロパティは今はSafari・Firefox・Chrome・Edgeの各種ブラウザが対応しています。

[abababababababa]

なるほどなぁ。FLASHと比較したら面白そうですね。

[AzuLitchi]

Flashでやれてたことが少しずつcssで復活して復活して行く感じ。

[lli]

これCSSだけでできるの地味に凄いな

[aTn]

“8); } 85% {”

[tsz]

楽しそう