анимация после hover

Question

) Нужна следующая анимация: при наведении на элемент нужно, чтобы он подпрыгнул на 10px (условно), отскочил от верха на 5px (тоже условно) и затем вернулся обратно на 10px, а после отведения курсора сделал тоже самое, только внизу. Упал вниз, отскочил на 5px вверх, затем снова вниз

.item {
    margin: 50px auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: solid 1px black;
    background-color: yellowgreen;
}
.item:hover {
    animation: swing 0.5s ease;
    animation-fill-mode: forwards;
}
@keyframes swing {
    33% {
        transform: translateY(-10px);
    }
    66% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(-10px);
    }
}

<div class="item"></div>

я сделал пока что только при наведении, но при отведении не нашёл способа на css

Answer 1

Это можно сделать без @keyframes, при помощи transition-timing-function

примерно такого вида

transition-timing-function: cubic-bezier(.6,1.48,.34,-0.77)

.item {
    margin: 50px auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: solid 1px black;
    background-color: yellowgreen;
    transition: 300ms;
    transition-timing-function: cubic-bezier(.6,1.48,.34,-0.77)
}
.item:hover {
    transform: translateY(-20px);
}

<div class="item"></div>

а вот на этом сайте можно себе построить кривую по вкусу, так же можно воспользоваться отладчиком в хроме для этого