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

超初心者なのですが、ハムスターを愛でるためのWEBアプリケーションを作ろうとしています。お遊びアプリには動きがないとね！！！ということで、WEBページでのアニメーションに触れてみました。ネット上で仕入れたサンプルをベースにとりえあずハムスターを動かすにはどうするのか？これを確認しつつ、アプリケーションで必要となる「現在地」から目標地点までの距離を測る機能を実装します。


##出来上がったWEBアプリケーション
netlify上にアップしましたのでご覧ください

https://quizzical-payne-4fb217.netlify.app/

画面イメージショット　（実際はグレーのハムスターが右から左に横切ります）
<img width = "300" src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365273/c386a4cc-5ea8-ef0d-197a-71c117bdba86.png">
参考）開発予定のプロダクト（note記事に飛びます）

https://note.com/grayhamchan/n/ne9e12909f60d


##確認したかった機能
* ハムスターの画像をアニメーションさせる
    * @keyframes　でアニメーションできることがわかった
    * 以下のサイト様の解説を参考にさせていただきました

https://webdesignday.jp/inspiration/technique/css/5167/

* 現在地から目標地点までの距離を計測する
    * 2点間の距離を計測するライブラリ「Geolib」で簡単に計測できることがわかった
    * 以下のサイト様の解説を参考にさせていただきました

https://www.mmpp.org/archives/1663

##ユーザーレビュー
家族ども（嫁・子供）にみてもらいました。コメントは以下の通り

* ハムスターがかわいい
* 背景のタッチもかわいい
* ハムスターがもうちょっと細かく動くといいかも
* いままで何をやりたいのかわからなかったがモノを見て分かった

ハムちゃんの動きがすこし雑だよな、、と**おもっていたところをやっぱり指摘された**のでここは要改善点。いろいろ調べて、もっとかわいらしく動くようにしたいと思う。
４点目は、やはりそうか、、という感じだが、人はモノを見せてもらうまでは、なかなか理解できないものだなと思った。引きつづき**「動くもの」を素早く作り**、フィードバックが得られるようになりたいと思う。

##ソースコード
<details><summary>HTML</summary><div>

```HTML:index.html
<!DOCTYPE html>
<html lang="ja-jp">

<head>
    <meta charset="UTF-8">
    <title>ハム旅</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="app.js" defer></script>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/geolib@3.3.1/lib/index.min.js"></script>
    <div class="board">
        <H1>はむ旅</H1>
            
            <div class = "dist"><P><img width = "50" src = "grayham.png">グレハムちゃんちまで</P></div>
            <H3><div id = "kyori"></div></H3>
        
    </div>
    
</body>

</html>
```
</div></details>

<details><summary>CSS</summary><div>

```css:style.css
body {
    margin: 0;
}

.hamu {
    position: absolute;
    left: 110%;
    bottom: 100px;
    width: 200px;
    height: 158px;
    background-image: url(../hammask.png);
    animation: hamuwalk 0.6s 0s infinite steps(9), hamuMove 15s 0s linear;
    transform-origin: 50% 100%;


}

@keyframes hamuwalk {
    100% {
        background-position: -1800px 0;

    }
}


@keyframes hamuMove {
    0 {
        left: 100px;
        bottom: 100px;

    }

    100% {
        left: -300px;
        bottom: 100px;
    }
}

.board {
    height: 1000px;

    position: relative;
    overflow: hidden;
    background: rgb(0, 0, 0);
    background-image: url(../bg.jpg);
    background-size: cover;
    background-position: center bottom;



}

H1 {
    text-align: center;
    font-size: 80px;
    color: rgb(1, 26, 250);
}



H3 {
    text-align: center;
    font-size: 50px;
    color: rgb(0, 0, 0);    


}

.dist {
    text-align: center;
    font-size: 40px;
}
```
</div></details>

<details><summary>Javascript</summary><div>


```javascript:app.js
var board = document.querySelector(".board")

function start() {

        var div = document.createElement("div");
        div.classList.add("hamu");
        div.style.transform = "scale(1.2)";
        div.style.animationDuration = "5s";


        board.appendChild(div);

        
        div.addEventListener("animationend", function () {
            this.parentElement.removeChild(this);
        });
        
    
}

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

function successCallback(position) {
    //geolibで距離を計測
      let distance =  geolib.getDistance(
        {latitude: position.coords.latitude, longitude: position.coords.longitude}, //自分
        {latitude: 35.6895014, longitude: 139.6917337}   //都庁               
      );
    console.log(distance);
      document.getElementById( 'kyori' ).innerHTML = '約' + distance / 1000 + 'キロメートル';


}

function errorCallback(error) {
    //エラー時
    
    }


start();

```

</div></details>