Как плавно завершить анимацию в CSS?

Question

[flexpc]

Здравствуйте. На видео видно, что при завершении анимации (когда с картинки пропадает курсор), она резко возвращается к исходному стилю. Как сделать, что бы она возвращалась к нему плавно?

<div class="header">
        <img src="\static\client\img\change_theme.svg" class="change_theme" alt="change_theme">
        <h1>LearnFS</h1>
    </div>

.change_theme
{
    width: 19.1%;
    min-width: 30px;
    margin: 11px 8px;
    cursor: pointer;
    float: left;
}

.change_theme:hover
{
    animation: change_theme_anim 0.25s forwards;
}
@keyframes change_theme_anim {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

Answer 1

[modelair]

анимацию или переходы нужно размещать не в :hover, а сразу в главном классе
например, так.

.change_theme {
    transition: transform 0.25s;
}
.change_theme:hover {
    transform: scale(1.1);
}