Сочетайте легкость входа и легкость выхода ⇐ CSS

[Anonymous]

У меня есть два элемента с анимацией. Анимация первых элементов длится 1 секунду и имеет кривую замедления кубического Безье(0,5, 0, 0,5, 1) (замедление и замедление). Анимация второго элемента начинается через 0,5 секунды после первого, длится 0,5 секунды и имеет кривую замедления кубического Безье(0, 0, 0,5, 1) (только замедление ). Я думал, что это позволит их анимации совпадать, поскольку обе кривые заканчиваются одинаковым замедлением, но первый элемент в середине движения движется немного быстрее, чем второй. Как сделать так, чтобы анимация совпадала? И если на то пошло, как мне совместить любую кривую замедления с кривой легкости входа/выхода в аналогичной ситуации?
Пример проблемы:

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

const first = document.getElementById("first");
const second = document.getElementById("second");

function animateit() {
first.classList.add("animated");
setTimeout(() => second.classList.add('animated'), 500)
}

function reset() {
first.classList.remove('animated');
second.classList.remove('animated');
}

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

* {
margin: 5px;
}

div {
width: 50px;
height: 50px;
background: black;
}

#first {
transition: 1s cubic-bezier(0.5, 0, 0.5, 1);
}

#second {
transition: 0.5s cubic-bezier(0, 0, 0.5, 1);
transform: translateX(100px);
}

.animated {
transform: translateX(200px) !important;
}

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

animate
reset

Я попробовал изменить замедление второго элемента и получил очень близко подошло к cubic-bezier(0.3, 0.6, 0.5, 1), но оно все равно не полностью совпадает.

Подробнее здесь: https://stackoverflow.com/questions/786 ... h-ease-out