Как я могу добавить импульс/инерцию к перетаскиванию с помощью преобразования CSS?

Я пытаюсь добавить эффект импульса/инерции к перетаскиванию увеличенного изображения (, как в этом примере или точно так же, как это делает iOs ), и у меня с этим проблемы.

Я долго боролся с этим и нашел несколько полезных ресурсов (, таких как этот)но в большинстве решений используется jQuery, и я бы предпочел придерживаться простого javascript, без каких-либо фреймворков.

Я работаю над кодом изображения масштабирования HTML5/CSS3 со всеми стандартными функциями :двойным -масштабированием, масштабированием, перетаскиванием, панорамированием и т. д., и все делается с использованием преобразования преобразования CSS3 в сочетании с масштабированием.. Бывший.

transform: translate(100px, 100px);
transition: 100ms;

Я посмотрел, как это делают другие, и он включает в себя последовательную анимацию левого/правого свойств с уменьшением продолжительности/расстояния, чтобы создать своего рода легкость -.

Я попытался воссоздать его с помощью переводов, используя своего рода рекурсивную функцию (вы можете увидеть скрипку здесь(работает с браузерами webkit ), не обращайте внимания на стиль кодирования,это не было передовой практикой, просто демонстрацией ). При этом анимация не плавная, последовательные переводы не подключаются.

У меня есть некоторое базовое понимание принципа, и я взглянул на некоторые алгоритмы, доступные в Интернете, но я просто не могу понять, как я могу добиться этого с помощью CSS-переводов.

Первая часть перетаскивания, выполняемая по mousemove/touchmove, перемещает изображение курсором/пальцем, но продолжающийся перевод после окончания не... непрерывен, это как отдельная анимация после первой и не похожа на естественную Эффект импульса/инерции.