Animated Gradients

[00:00:00]
>> Sarah Drasner: If you need to animate gradients, don't just animate them. If you animate a gradient, it will actually like really cause a lot of performance issues because it's really expensive to do that. There's a lot of repaints when you animate a gradient. So I made this pen for you to check out and use, which is an animated transparent mask.

[00:00:21]
So what I do is I create two blocks of colors, create a mask of one of them, and move the color with transforms. So one of the things is moving with transforms, and then it's an animated gradient, but you're not causing any layout triggers. It's all really performing, transforms are a lot less expensive than some other types of things, like margin and lift.

[00:00:44]
And especially changing background colors, all cause repaints in your browser which makes them very expensive to run.