I've been playing with CSS @keyframes animation lately and I've realized that creating fluid animations is such a pain!
My animations feel jittery and unrealistic. Making something like material design animations take me hours to time perfectly.
What is the best way to time CSS Animations properly?
Is it something that comes with enough practice and patience? or is there some trick to it?
Sharon Chaisky
Part time Frontend | Full time dreamer :)
You've actually answered yourself here. It is something that comes with enough practice and patience.
One thing tip I would share though is, Once you have formed basic the idea of how you'd execute the animation and created an outline on the basis of that idea, just try to view the animation from a third person's perspective.
It often happens that you keep the duration of the animation too long and it happens cause you love your animation so it's okay for you to keep it long, that however might not be the case for the end user. You'd find yourself cutting down the animation duration in 90% of the cases by just trying to view the whole thing from another person's perspective.