CSS -переходы работают только с переходом в Firefox ⇐ CSS

[Anonymous]

У меня есть простая статическая HTML -страница с javaScript и CSS встроено:
Рабочая демо: https://jsbin.com/seziben/edit?html,Output
>/* CSS for animated object */
.object {
width: 50px;
height: 50px;
background: orange;
border-radius: 8px;
cursor: pointer;
position: absolute;
user-select: none;
box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.15);
z-index: 2;
border: 3px solid transparent;
transition: left 4s ease-out, border 0.25s ease-out;
}
< /code>
Моя проблема заключается в следующем: Когда я выбираю объект (ящик оранжевого цвета), и нажимайте кнопку «Пересехать», элемент немедленно прыгает на внешнюю коробку-но только в Firefox. В браузерах на основе Blink он работает нормально, медленно двигаясь в 2-секундной анимации. Но большую часть времени они просто выпрыгивают на улицу.
Что вызывает это и как это исправить?>

Подробнее здесь: https://stackoverflow.com/questions/796 ... in-firefox