Fav/star animation is jarring

[ariasuni]

Expected behaviour

Star animation when un/fav-ing a toot is smooth.

Here’s a five minutes hack, that as you can see is perfectly smooth (it should be thrice as fast but somehow my recorder messed up the time):

Done with this code:

@keyframes unfav {
    from { transform: rotate(0deg); }
    50%  { transform: rotate(-400deg); }
    to   { transform: rotate(-360deg); }
}

.fa-star {
    animation: unfav 2s ease 1s infinite;
}

Actual behaviour

The quality of the GIF may it looks slightly worse than it really is, but when using Mastodon I very often notice the shaking.

I guess it might work better by using CSS animation because then Firefox can plan all the frames instead of just reacting to the JavaScript increasing or decreasing the rotation’s angle.

Steps to reproduce the problem

Fav a toot in Firefox.

Specifications

Mastodon 3.0.1 but this bug is present since as far as I can remember so at least two years.

Arch Linux, Firefox Developer Edition 70b14.