CSS、canvas、SVGで円周上をアニメーションさせる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作こんにちは、おじいちゃんです。 今回はCSS、canvas、SVGで円周上をアニメーションさせる方法をいくつかご紹介したいと思います。 CSSでアニメーション CSSで円に沿ったアニメーションを実装したい場合、transformのrotationを使用することでアニメーションさせることができます。 transformのrotationを使った回転方法 transformのrotationは、要素を回転させることができるプロパティです。 入れ子の構造を持った親のDOMに使用することで、円周に沿ったアニメーションを作ることができます。 HTML <html> <div class="box"> <div class="circle"></div> </div> </html> .box{ width: 320px; height: 100px; margin: 230px auto 0; ba
