Я пытался найти простую реализацию JavaScript на несколько часов, но не смог ее найти. Те, что приблизились, не имели никакого смысла. Все, что я мог найти, это куча функций ослабления без реализации.

Например, такие функции:

function linear(time, begin, change, duration) {
    return change * time / duration + begin;
}

function easeInQuad(t) {
    return t*t
},

function easeOutQuad(t) {
    return t*(2-t)
},

Одна из вещей, которая беспокоит меня, - это когда fps приходит играть? Это напрямую связано с продолжительностью. Я не видел упоминаний об этом.

Как бы я реализовал вышеуказанные функции замедления в следующей анимации?

JSFiddle

var box = document.getElementById("box");

var fps		= 60;
var duration	= 2; // seconds
var start	= 0; // pixel
var finish	= window.innerWidth - box.clientWidth;
var distance	= finish - start;
var increment	= distance / (duration * fps);

var position = start;

function move() {
  position += increment;
  if (position >= finish) {
    clearInterval(handler);
    box.style.left = finish + "px";
    return;
  }
  box.style.left = position + "px";
}

var handler = setInterval(move, 1000 / fps);

body {
  background: gainsboro;
}
#box {
  width: 100px;
  height: 100px;
  background: white;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  position: absolute;
  left: 0;
}

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