Как убрать срыв transform анимации при срабатывании removeClass?

Question

[Степан]

Залил пример на jsfiddle: https://jsfiddle.net/hwp1k3y7/

Суть в чем: блок с надписью "картинка" принимает класс через addClass ".sink" (в css в самом низу!!) при наведении и, соответственно, теряет его при removeClass. Проблема в том, что анимация в момент убирания мыши обрывается - не возвращается плавно на место блок "картинка". Нижний блок с другой 3d анимацией все делает правильно.

Использовал jQuery, т.к. надо, чтобы .sink получал именно блок с картинкой при наведении на весь родитель-ссылку.

Подскажите, уважаемые. пожалуйста, что не так в .sink свойствах, что не дает блоку с ним плавно завершить анимацию, как это делает нижний блок...

Answer 1

[Donkarleons]

Добавь к классу .terr_img :
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;

должно получиться:

.terr_img {
    color: #ffffff;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

Comments

[Степан]

Спасибо большое!!! Как всегда решение на поверхности!)