Плавный переход между анимацией CSS при обновлении параметров анимации. ⇐ CSS

[Anonymous]

У меня есть анимированный HTML-элемент (

Код: Выделить всё

box

) следующим образом:

Код: Выделить всё

Изначально поле анимируется на 200 пикселей вправо и длится 4 секунды.

Код: Выделить всё

.anim {
animation-name: anim;
animation-duration: 4s;
animation-timing-function: linear; /* cubic-bezier(0.1, -0.6, 0.2, 0); */
}

@keyframes anim {
0% { left: var(--xs); }
100% { left: var(--xe); }
}

Вот код JavaScript, запускающий анимацию:

Код: Выделить всё

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

box.style.setProperty('--xs', '0px');
box.style.setProperty('--xe', '200px');
box.classList.add('anim');

Через одну секунду конечная позиция обновляется до 400 пикселей:

Код: Выделить всё

setTimeout(() => {
box.style.setProperty('--xe', '400px');
},1000)

Конечно, когда конечная позиция обновляется, поле переходит из одной позиции в другую. Есть ли способ добиться плавного перехода, чтобы избежать эффекта «телетранспортации»?
Вот JSFiddle: https://jsfiddle.net/Imabot/53hLe2zq/

Подробнее здесь: https://stackoverflow.com/questions/758 ... parameters