How to remove the disruption of the transform animation when the removeClass fires?

Question

css

I uploaded an example on jsfiddle: https://jsfiddle.net/hwp1k3y7/

The bottom line is: the block labeled "image" takes a class via addClass ".sink" (in css at the very bottom !!) on hover and, accordingly, loses it with removeClass. The problem is that the animation breaks when the mouse is removed - the "picture" block does not smoothly return to its place. The bottom block with another 3d animation does everything right.

Used jQuery, because. it is necessary that .sink receives exactly the block with the picture when hovering over the entire parent link.

Tell me dear. please, what is wrong with the .sink properties that doesn't allow the block with it to finish the animation smoothly like the bottom block does...

Answer 1

Add to the .terr_img class:
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
should get:

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