JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#box{
  width: 100px;
  height: 100px;
  background: tomato;
  position: relative;;
}

JavaScript

document.addEventListener("DOMContentLoaded", function(){
  "use strict";
  //タイマー識別子
  var timer;
  //アニメーション開始時刻
  var begin;
  //アニメーション持続ミリ秒
  var dur = 2000;
  //アニメーション開始値
  var from = 0;
  //アニメーション終了値
  var to = 200;
  //アニメーション対象
  var style = document.getElementById("box").style;
  //イージング関数
  function easing(progress){
    return Math.pow(progress, 0.5);
  }
  //アニメーションを行う関数
  function moveBox(){
    //アニメーションの進捗（0〜1）
    var progress = (Date.now() - begin) / dur;
    if(progress > 1){
        progress = 1;
    }
    style.left = (from + (to - from) * easing(progress)) + 'px';
    //進捗が1になったら処理を停止
    if(progress == 1){
      clearInterval(timer);
    }
  }
  //アニメーションの実行
  begin = Date.now();
  timer = setInterval(moveBox, 10);
});