webサイトを制作していて、企業ロゴやちょっとしたアクセントにアニメーションを付けたいと思うことがあると思います。
実装したいアニメーションによって方法を検討する必要はあるかと思いますが、こんな場合にこんな方法を使えます、のようにパターン別で3つまとめます。

svg+cssのみで実装

svgを使って出来ることは、塗りと線の変化、拡縮・回転・移動、パスの変形、パスに沿ったアニメーション等CSSプロパティ、SMILで実現できることは基本的に実現可能です。
例えば、ロゴマークの縁取りをなぞるアニメーションを実装したい場合、使えます。

See the Pen
LOGO by KOHIMOTO (@kohimoto)
on CodePen.

工程としては、①svgの用意、②cssでアニメーションを付けるが必要になります。
 
どちらの方法も載っていて、一番わかり易かった参考記事を載せさせていただきます。

svg+css+Vivus.jsで実装

文字のロゴマークを一文字ずつ手書き風になぞって書きたいという場合に効果的です。

See the Pen
LOGO vivus.js by KOHIMOTO (@kohimoto)
on CodePen.

工程としては、①svgの用意、②svgに合わせたマスクの準備、③Vivus.jsとcssの設定が必要になります。

それぞれの作り方や設定方法については、下記2つのサイトがとても参考になりました。

Lottie+cssで実装

svgだけではできない、少し複雑なアニメーションを取り入れたい時に便利です。

See the Pen
practice_Lottie by KOHIMOTO (@kohimoto)
on CodePen.

 
工程としては、①Adobe After Effectsでアニメーション作成、②アニメーションをjsonファイルで書き出し、③Lottie-Playerを利用しソース化、④css調整が必要になります。
 
それぞれの詳しい使い方は下記サイトが参考になりました。

Lottie使い方参考サイト

After Effects使い方参考サイト

 
 
どんなアニメーションを実装したいか、また、デザイナーなのかコーダーなのか等でも実装できる幅が変わってくると思いますので、用途にあった方法を見つけてみてください!

Miki Kohinata

大学時代、将来独立することを決めエンジニアの道へ。就職したIT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。