Почему анимация CSS работает не полностью?

Question

[flexpc]

<img class="hide_show_button" src="static\client\img\hide_arrow.svg" alt="hide">

.hide_show_button
{
    width: 16.1%;
    min-width: 30px;
    margin: 11px 8px;
    cursor: pointer;
}

.hide_show_button:hover
{
    animation: hide_show_button_anim 1s;
}

@keyframes hide_show_button_anim {
    0% {
        transform: scale(1);
        transform: rotate(0deg);
    }
    25% {
        transform: scale(1.1);
        transform: rotate(0deg);
    }
    50% {
        transform: scale(1.2);
        transform: rotate(0deg);
    }
    60% {
        transform: scale(1.2);
        transform: rotate(5deg);
    }
    70% {
        transform: scale(1.2);
        transform: rotate(-5deg);
    }
    80% {
        transform: scale(1.2);
        transform: rotate(-5deg);
    }
    100% {
        transform: scale(1.2);
        transform: rotate(5deg);
    }
}

Почему img крутится, но не увеличивается?

Answer 1

[modelair]

потому что второй transform переписывает первый
надо

0% {
    transform: scale(1) rotate(0deg);
}