What is the key to elegant animations?

I’ve been a developer for over 10 years, but I started as a back-end developer and taught myself front-end, which means I had no formal training, no senior to guide me, just the designer asking for small changes. I know HTML, CSS, JS all. I know CSS transition transformations, delays, durations and relaxation of how that all works. But despite knowing that, I don’t seem to have a talent for creating really beautiful, elegant animations.

What do I mean by this?

– I don’t mean that there are over-the-top page transitions that distract from the content.

– I don’t mean animations that require CSS filters or animation libraries (unless I’m mistaken with the example I give below)

– I don’t mean cheating with a longer transition duration (which I used to do as a junior and I now know that long transitions annoy people)

What I mean is a site like this. https://linear.app/

Nothing crazy, the site looks mostly static, but all the animations are subtle.

Now I don’t mean the SVG asset on the hero (I know these are specialized assets you have to create per site). I’m talking about transferable principles such as:

– The text about the hero who animates.

– Opening the card “Created for Modern Product Teams” – Transitions between the “Menu” and “Resources”

– The “Flexible project workflows” carousel on the “linear.app/customers/plan” page.

– Card Hover effect on the “linear.app/customers/customers” page.

Obviously I can just look at the code and copy it (which I’ve done in the past), but copying isn’t quite the same as understanding it, and I can’t recreate it from scratch, I can only steal and adapt.

So any help with this or perhaps referencing an article would be greatly appreciated.