CSS on hover icon pulse animation

It took me some time to settle on the appropriate animation. However, the following day, I decided to discard it. I noticed that it gave my website a slightly childish appearance. To avoid losing the code in the depths of source control version history, I chose to showcase it here instead [video]. So, here it is...

The concept was to make the RSS icon pulse in the direction of the feed signal, specifically, the top right:

h5 > a > svg {

    vertical-align: text-bottom;

    margin-left:    0.5em;

    fill:           var(--accent);

    transition:     all 0.3s linear;

}

h5 > a > svg:hover {

    animation: hover-rss 0.2s alternate ease-in-out;

}

@keyframes hover-rss {

    from {

        transform: scale(1, 1);

        transform-origin: bottom left;

    }

    to {

        transform: scale(1.1, 1.1);

        transform-origin: bottom left;

    }

}

And, to have the light mode icon pulse from the center:

#mode-toggle-button:hover {

    animation: hover 0.2s alternate ease-in-out;

}

@keyframes hover {

    from {

        transform: scale(1, 1);

    }

    to {

        transform: scale(1.1, 1.1);

    }

}

There they are. Perhaps they'll come in handy for some other project.