search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.5k stars 661 forks source link

[css-backgrounds] background-image should be animatable #578

Open alancutter opened 8 years ago

alancutter commented 8 years ago

https://drafts.csswg.org/css-backgrounds-3/#the-background-image defines background-image to be not animatable (though browsers animate some values of it anyway).

cross-fade() is defined in https://drafts.csswg.org/css-images-3/#cross-fade-function which can be used to interpolate between different image values. It would make sense to define animation of background-image in terms of this function.

HT-7 commented 4 years ago

Also, make sure that the smooth transition of linear gradients is supported.

SebastianZ commented 4 years ago

Also, make sure that the smooth transition of linear gradients is supported.

That is already possible by using custom properties. See https://css-houdini.rocks/animating-gradient/. Additionally to that, there is a discussion in #3783 covering the animation of gradients (without having to define custom properties).

cross-fade() is defined in https://drafts.csswg.org/css-images-3/#cross-fade-function which can be used to interpolate between different image values. It would make sense to define animation of background-image in terms of this function.

For the note, cross-fade() was postponed to CSS Images 4.

Though I think the definition in CSS Backgrounds 3 of background-image being animatable should refer to the definition of interpolations in CSS Images 3 (which basically says the same, images are only discretely animatable). In CSS Backgrounds 4 the definition should then refer to the definition of image transitions in CSS Images 4, which specifies smooth transitions between them.

Sebastian