Как сделать плавное завершение анимации при отводе курсора?

Question

[litash]

Ребят, в общем в голову не проходит как на чистом css сделать что бы при отводе курсора блок плавно на своё место становился. На данный момент он рывком возвращается на своё место. Вот пример.

https://codepen.io/litash/pen/MELPOB

Answer 1

[zoozag]

Делать анимацию не через animation, а просто через изменение свойств
https://codepen.io/anon/pen/jGdQpo

Comments

[litash]

мне нужно что бы блок при ховере двигался вверх и в низ. а при отводе курсора плавно на место встал.
в твоем примере он движется только вниз. :(

[alzhason]

.block {
width: 100px;
height: 100px;
background-color: purple;
margin: 100px auto;
transition: all 1s;
transform: translateY(0%);
}
.block:hover {
transform: translateY(20%);
}