blog/great-transitions

[utterances-bot]

Ten tips for better CSS transitions and animations - Josh Collinsworth blog

Creating high-quality, polished web animations is both a science and an art. This post covers the best things I've learned over the last decade of crafting web UIs.

https://joshcollinsworth.com/blog/great-transitions

[SCPCOEXR]

Your link to the VSCode Extension is incomplete. https://joshcollinsworth.com/blog/great-transitions#4-less-is-more

[josh-collinsworth]

Thanks! ✅

[mgailius]

Well explained, thanks 🙌

[vicocotea]

Very good article.

Can I suggest another tips that I use for animation, mostly for toggling visibility (or other not animated properties).

If you try to animate visibility, it will immediately switch to hidden or visible.

We generally want the hidden switch at the end of fadeout animation and immediately for the fadein visible switch. We can simply delay the visibility transition.

Simple example with an hidden .element, visible when .active :

.element {
opacity: 0;
visibility: hidden;
transition: opacity .3s, visibility 0s .3s;
}

.element.active {
opacity: 1;
visibility: visible;
transition: opacity .3s, visibility 0s 0s;
}

Note the difference in delay for visibility transition. Transition to visible is immediate (delay 0s), transition to default hidden is delayed for .3s. It leaves time to see the opacity transition.

[hasintha]

Well explained sir

[lymeYo]

Good article and your blog site very good too! Very pleasant to use this ui!)

[MarjaE2]

I have to block smooth animation, reduce frame rates, hide sidebars, etc. So I think it'd help to either avoid smooth animation, or avoid it if users prefer reduced motion.