初心者がCSSでアニメーションさせる - Qiita

超初心者なのですが、ハムスターを愛でるためのWEBアプリケーションを作ろうとしています。お遊びアプリには動きがないとね！！！ということで、WEBページでのアニメーションに触れてみました。ネット上で仕入れたサンプルをベースにとりえあずハムスターを動かすにはどうするのか？これを確認しつつ、アプリケーションで必要となる「現在地」から目標地点までの距離を測る機能を実装します。 出来上がったWEBアプリケーション netlify上にアップしましたのでご覧ください 画面イメージショット （実際はグレーのハムスターが右から左に横切ります） 参考）開発予定のプロダクト（note記事に飛びます） 確認したかった機能 ハムスターの画像をアニメーションさせる @keyframes でアニメーションできることがわかった 以下のサイト様の解説を参考にさせていただきました 現在地から目標地点までの距離を計測する 2点