How to get a smooth animation (css)?

Question

In this code I’m experimenting with, I have 2 different animations (keyframes..).
One rotates the body by 5 deg, then -5 deg. The other one has a filter: hue-rotate().

I want both the animations to go smooth, it doesn’t matter if they are in the same speed, as long as they’re both smooth.

https://code.sololearn.com/WTqg2ds04p4m/?ref=app
—

Answer 1

Calviղ ,
hue-rotate:
when it is about blue, it kind of suddenly turns to pink_ish red - instead of smoothly.

Answer 2

The roll over of value deg causes sudden change, add alternate to animation.

Answer 3

It's smooth.