.container {
padding: 2em 0;
width: 50%;
height: 6em;
margin: 3em auto;
background: grey;
}
.item {
width: 4em;
height: 4em;
background: pink;
margin: 0 auto;
}
.item:hover {
animation: levitation 3s linear 0.1s infinite alternate;
}
@keyframes levitation {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-30%);
}
}
<div class="container">
<div class="item">
</div>
</div>
При hover на .item блок плавно левитирует, но при убирании hover-эффекта от блока, он резко падает. Что нужно дописать в css, чтобы при убирании hover-эффекта блок плавно опускался вниз?