Хочу сделать анимацию, как в рулетке (или как вращающий барабан, или как в казино), то есть анимация должна быстро начинаться и постепенно-постепенно завершаться. Пробовал через cubic-bezier
, результат не удовлетворил, - анимация получалась дерганной... попробовал через чистый js, рекурсией, но нифига не соответствует моим представлениям:
var timer = null;
var sec = 1000 / 80;
var target = document.getElementById('box');
var dis = target.offsetLeft;
document.onclick = function(){
function anim(t){
timer = setInterval(function(){
dis += 1;
target.style.left = dis + 'px';
if(target.offsetLeft >= 100) {
clearInterval(timer);
anim(sec+=10)
}
}, t);
}
anim(sec);
}
#box {
background: red;
color: #fff;
width: 200px;
padding: 10px 0;
position: absolute;
}
<div id="box">OK</div>
Скажите, как правильно реализовать такую анимацию?