JSFiddle - React, Tailwind, and code Playground
HTML
<div class="stage">
<span class="obj" id="obj"></span>
</div>
CSS
.stage { width: 200px; background: #eee; height: 10px; position: relative; }
.obj { width: 2px; display: block; height: 10px; background: #000; left: 0; position: relative; }
JavaScript
let obj = document.getElementById("obj")
let fps = 1000/30 //calを実行するインターバル1秒間に30回
let tmp = 0 //現在値
let goal = 200 //目標値
let sa = goal
let speed = 0.3
function cal()
{
if(sa >= 0.1 )
{
sa = (goal - tmp) * speed
tmp += sa
obj.style.left = tmp + 'px'
}
else
{
clearInterval(int)
obj.style.left = goal
}
}
let int = setInterval(cal,fps)