> Why not use box-shadow or border? Those properties are super expensive to animate. If we want a buttery-smooth transition on the button, we'll have way more s

> Why not use box-shadow or border? Those properties are super expensive to animate. If we want a buttery-smooth transition on the button, we'll have way more success with this strategy. 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 possible for the engine to recognise it and skip layout, though I have no idea if they do). But box-shadow? Huh? Why would that be expensive to animate (let alone super expensive)? It doesn’t affect layout, it’s just painting. 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. Certainly I’ve never observed any smoothness issues on animations of box-shadow. I’m interested in whether I’ve forgotten something here, or whether Josh really is overstepping in his description.