An interactive guide to CSS transitions

One crucial thing that this article misses out is a key way in which Firefox is currently better than all other production browsers: its WebRender renderer (incubated in Servo), where <i>everything</i> is rendered on the GPU. This is enabled for most users, but not all yet because GPUs and GPU drivers are amazingly bad.<p>Properties like background-color are not expensive to animate, the same cost as properties like transform and opacity.<p>The “curious little imperfection” of text rendering changing slightly simply doesn’t occur.<p>will-change is obsolete, effectively becoming a noop.<p>Properties like margin-top and top can animate just as smoothly as a transleY transformation. (And it will be calculated subpixelly, though Firefox deliberately still snaps both to pixels, yet a little differently for nuanced layout reasons; so there can still be a very subtle difference between the two, and it’s definitely browser-dependent. But most of the rendering difference between the two in non-Firefox browsers is categorically a <i>bug</i>, not a feature.)<p>It would be good to get all of this mentioned. There are a couple of other related simple factual errors, such as “One is done using margin-top, so it can&#x27;t be hardware accelerated.”—margin-top <i>can</i> be as hardware accelerated as everything else.<p>But this is my only quibble with the article at this time. The rest is excellent. I was even getting near the end, worried that hover infinite loops wouldn’t be mentioned, but the doom flicker is there. Good stuff.

Thanks so much for this amazing guide!<p>I had a side project that I was desperate to get across a finish line, and I rarely do any CSS at a day job, so I hired a freelancer just to help me get a few CSS issues fixed. One of the things he did was add a few CSS transitions, and the smallest transitions can turn a boring, static site into feeling slick and modern. Simple things like just having elements fade in a little when they appear make a huge visual difference.<p>As someone who&#x27;s very far from a talented designer, I realized, transitions are such great value. You can learn a few CSS transition tricks and elevate the perceived design skill of your project greatly relative to the effort spent on learning them.<p>I&#x27;ll be using this!

IMO animations are a hurdle more than an aid. macOS has so many long animations that it takes everything longer. 300ms might not be long, but it adds up. For first few times, animations are cool. But the novelty wears off when you need to do the same action 80th time.<p>Animations regardless of the domain should be used extremely sparingly. It’s appalling that JS frameworks such as Svelte has this built in. It’s only going to encourage more animations.<p>I can only imaging how much faster macOS would feel if for example exposè had no animation. Forget about better processors and GPU, the easiest way to make the entire OS faster by 500% would be to turn off all animations. Unfortunately, Apple doesn’t allow us. Even accessibility settings for “reduce motion” just uses fade-in&#x2F;out animation instead. I really don’t buy the arguments for animation “it gives context to where things come from and where they pop out”. I find that disputable, sure good for initial familiarity but painful the second time.

I don’t think you could get a better written article and demos here. Excellent job, a true piece of art.<p>I think a second part or another thing to talk about that is often missed is weirdness with nested element transitions and inherited transitions on elements. Can be a bit to wrangle for beginners and get to feel smooth.<p>Besides that, thanks for the resource. I will point this to many!

&quot;Properties like margin-top can&#x27;t sub-pixel-render, which means they need to round to the nearest pixel, creating a stepped, janky effect. transform, meanwhile, can smoothly shift between pixels, thanks to the GPU&#x27;s anti-aliasing trickery.&quot;<p>This is a Chrome-case, Firefox (on Windows) aligns both cases to the pixel grid.

Josh, been really appreciating the quality of your posts.<p>Enjoy how you break down what&#x27;s happening and also throw in some &quot;fun facts&quot; of the reasons why something came to be.<p>Like the will-transform property, have always used it but didn&#x27;t realize it came out of people hacking the transform3D property to get GPU acceleration

I wish had both the skill and energy to put the sort of care and attention to detail into my work that Josh does. Really, really great stuff.

Nice graphics and all, but he has some weird bug. If you are at a scroll position somewhere in the middle and click the cheeseburger menu (2 lines instead of 3 I will call it cheeseburger) and close the menu again the content in the background will scroll up and then down to the previous scroll position for no good reason.<p>Ps....The subscribe cta button has one of the nicest designs I have ever seen, wow.

Funny thing, just yesterday happened to use these for React, for the first time.<p>Initially I tried react-spring, but couldn&#x27;t get it work its transition without triggering rendering of the enclosing component way too many times, and what baffled me nondeterministically. I tried to minimize the problem but it just seemed to be part of it. (native attribute didn&#x27;t work even with animated.div wrapper). Otherwise seemed like a nice animation package.<p>Ended up using (previously?) official react-transition-group and voila it worked very nicely with a list of tens of items.<p>Animation can make the UI much more easy to grok for the user.

If you like interactive guides like this, I just found this game to better learn flexbox. Surprisingly fun—<p><a href="https:&#x2F;&#x2F;flexboxfroggy.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;flexboxfroggy.com&#x2F;</a>

Delightful article. I only wish I found it the day <i>before</i> I needed to figure CSS animations on my own, not they day <i>after</i> :) This is by far the best piece I found on the subject.

In my opinion this was a great guide. I’m someone who sucks at writing transitions in css so this definitely helped

I had fun clicking random things to hear the noises, noticed them after pressing &#x27;enable tab key&#x27; :)

I love css transitions, but ending a transition with &quot;display: none&quot; is somehow still a pain.

Finally!<p>.btn { will-change: transform; }<p>thanks, man that was annoying.

Super helpful, thanks!