Возврат на исходную позицию css:transition

1. Проблематика

При использовании css свойства transition с относительно долгим duration и последующей относительно быстрой сменой состояний mouseover / mouseout (навели / убрали мышь) свойство перестает корректно отрабатывать (например, начинается с середины).

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

Обычный CSS код в таких ситуациях выглядит следующим образом:

div {
    margin-top: 0;
    transition: margin-top 2s;
}
div:hover {
    margin-top: 50px;
}

Пример: https://jsfiddle.net/thewind/kn4f7nne/ - если водить мышкой между блоками довольно быстро, то видно, что анимация не успевает вернуться на исходную позицию.

2. Задача

Сделать так, чтобы какой бы быстрой ни была смена состояний mouseover / mouseout, свойство отрабатывало корректно - с исходной позиции в конечную.

3. Решение

Для исходного состояния прописывать css transition со свойством duration = 0, а для состояния hover прописывать нужный duration. В этом случае анимация будет корректно отрабатывать в момент события mouseover, а для события mouseout свойство transition-duration будет равно 0, поэтому сразу же вернет состояние стилей в начальное состояние.

div {
    margin-top: 0;
    transition: margin-top 0;
}
div:hover {
    margin-top: 50px;
    transition: margin-top 2s;
}

Пример: https://jsfiddle.net/thewind/kn4f7nne/1/

4. Замечания

Решение работает только в том случае, если возврат стилей в исходное состояние производится без анимации. В случае с требованием применять анимацию в обоих направлениях, необходимо использовать код JS или сторонние плагины для воспроизведения анимированных переходов.