Vue.js+SVGで自由にCSSアニメーションしたい人のための完全解説（ソース付き） - Qiita

こんにちは。UX＆フロントエンジニアしながら絵描きして遊んでいるゆき(@yuneco)です。この記事ではVue.jsを使ってCSSアニメーションを使った表現を自在に行うための基本的な部分をステップバイステップで解説します。目標は↓以下のようなアニメーションをJavaScriptで自在に構築できるようになることです。 ソースコードはこちら： https://github.com/yuneco/css-anime-tutorial 目次 この記事では最初にSVGを単純に表示するところから始め、Vueのコンポーネントを利用してそのSVGを自由に配置・変形させる方法を説明します。その上でCSS transitionを用いたアニメーションを取り入れます。最後に、複雑なアニメーションを抽象化・構造化してより複雑なシーンを構成するための方法を解説します。 SVGを作る Vueプロジェクトを作る SVGを

[yarumato]

“アニメーション専用のライブラリを用いず自力でアニメーション構築でVue.jsやJavaScript、CSSアニメーション等に関する深い理解を得る狙い。SVGを単純に表示。Vueのコンポーネントを利用してSVGを配置・変形。CSS transition”

[mayumayu_nimolove]

サンクス