Lottie

Lottieを使用してアニメーションを実装しました。
Adobe After Effect 等のソフトでアニメーションを作成
したのを、jsonデータで書き出し→サイト埋込という方法
なので、デザイナーが動きを決められる利点があります。

実装

参考サイト

• 最新版！ Lottieアニメーションの作り方 - After Effects編
• WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】
• 【AfterEffects入門編】流れる線のシェイプアニメーション

実装の問題

• IE11でsvgのレンダリングがおかしくなる（height:100%;width:100%;指定でheightを優先している）ので、スタイルでの調整が必要。

検証環境