> <i>Why not use box-shadow or border? Those properties are</i> super <i>expensive to animate. If we want a buttery-smooth transition on the button, we'll have way more success with this strategy.</i><p>Border I can understand, because it affects layout (though if you make balanced changes to top/bottom widths, admittedly a bit harder than it may seem at first if you use an easing curve, it would be <i>possible</i> for the engine to recognise it and skip layout, though I have no idea if they do).<p>But box-shadow? Huh? Why would that be expensive to animate (let alone <i>super</i> expensive)? It doesn’t affect layout, it’s just painting.<p>Now admittedly my perspective on this sort of thing has been skewed by using Firefox, where WebRender completely throws out the old performance guidelines (and box-shadow is certainly not expensive to animate, and the multiple-element version will certainly be a negligible smidgeon less efficient), but I thought and would expect that even in the old inferior rendering world that all the other browsers inhabit box-shadow is not expensive to animate provided you’ve used the standard hacks to GPU-accelerate the element’s rendering.<p>Certainly I’ve never observed any smoothness issues on animations of box-shadow.<p>I’m interested in whether I’ve forgotten something here, or whether Josh really is overstepping in his description.