JavaScriptでクリックした箇所にアニメーションで要素を移動させる

Question

###前提・実現したいこと
jQueryやcssのアニメーションを使わずにクリックした箇所に要素(赤いボックス)を移動させるプログラムを考えています。clientX、clientYを使いクリックした箇所の値を取得し、その値を要素のcssを書き換える所まではできました。
そのため要素の移動はできたのですが、パッパッと移動している状態です。
https://jsfiddle.net/ululami/ou3nqeog/1/

要素の移動をパッパッと移動させずに、下のイメージ図の通りに要素の移動間をアニメーションで表現させたいです。

###試したこと
setIntervalを使って、アニメーションを表現しようと思ったのですがうまくいかず、例えばA地点をクリックし、B地点をクリック、さらにC地点をクリックすると、この三箇所をループして移動してしまいます。
最終的にはイージングをかけてアニメーションさせたいのですが、まずは等速でアニメーションさせようと思っています。

ご回答よろしくお願いします。

ソースコードをjsfiddleにアップしていますのでご活用ください。
https://jsfiddle.net/ululami/c92arynz/

###該当のソースコード

var x = 0;
var y = 0;

function moveBox(event){
	x = event.clientX;
	y = event.clientY;
  document.getElementById('box').style.left = x + 'px';
  document.getElementById('box').style.top = y + 'px';
}

document.addEventListener('click', function(event){
  setInterval(function(){ moveBox(event); }, 1000);
});

<div id="box"></div>

*{
  margin: 0;
  padding: 0;
}

#box{
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
}

Answer 1

CSSのtransitionプロパティを使用すればイージングの処理も行ってくれて楽だと思うのですが、

jQueryやcssのアニメーションを使わずに

CSSにtransitionを設定するのも不可ということでしょうか？

#box {
  transition: all 1s;
}

---

【追記】
JavaScriptでアニメーションを書く初歩の初歩
http://nmi.jp/archives/510

Comments

[owl]

はい、javascriptの勉強のためにcssのtransitionを使わずにsetIntervalなどを使って表現したいと思っています。

[退会済みユーザー]

でしたら、関数の中でsetIntervalを用いてアニメーションを表現し、条件を満たしたら（クリック位置に達したら）clearIntervalする、というのが一般的ではないでしょうか。参考リンクを追記しておきます。

[owl]

ご回答ありがとうございます。
リンク先や頂いたコメントを参考にし、なんとか動かすことができました。
しかし別の問題が発生し、もしよろしければご回答のほどよろしくお願いします。

https://teratail.com/questions/95641?modal=q-comp

Answer 2

#box{
  transition: all 2s ease-in-out 1s; /* ADD */
}

document.addEventListener('click', moveBox);

---

追記：

【JavaScriptで落下するボールのアニメーションを表現する方法 | 株式会社LIG】
https://liginc.co.jp/web/js/67816

Comments

[owl]

ご回答ありがとうございます。
なんとかリンク先を参考にして動かすことに成功しました。
しかし一つだけ問題が発生しまして、もしお時間が空いているようでしたらご回答よろしくお願いします。

https://teratail.com/questions/95641?modal=q-comp