Difference between animating background and backgroundColor?

[samselikoff]

Happy to post a reproduction but curious if I'm missing something simple.

I'm animating a box's background color from white to blue and I noticed a difference in the effect when using background vs. backgroundColor. Is this expected? If so, what's the correct way to think about these two properties?

Thanks!

[Amandasilvbr]

Hi, @samselikoff !

• The background-color refers to the background color

• The background is an abbreviation for various background properties

Example:

No shorthand:

With shorthand:

So, when your background has a lot of specifications, it might be interesting to use shorhand to improve the code.

I removed this example from this site, if you need more depth, I recommend reading. If you have more questions, let´s talk about!

[mattgperry]

I’d be interested to see what “difference in effect” entails but background-color should be more performant than background, as @Amandasilvbr rightly points out background sets many styles so updating it has wider-reaching implications. As a result background-color is one of the values many browsers can animate off-thread via CSS/WAAPI whereas background isn’t.

[samselikoff]

I do remember there being a difference but it's been too long now 😭

Will reopen if I run into it again but thanks for the extra info!