Re: Proposal: background-image-opacity or background-opacity

On Jun 2, 2009, at 10:25 AM, Tab Atkins Jr. wrote:

> In your case, you have an abrupt transition like:
>
>    div {
>      background: url( foo.jpg );
>    }
>    div:hover {
>      background: url( bar.jpg );
>    }
>
> And you want to make it into a smooth transition by crossfading from
> one image to the other.  This is exactly what the Transitions module
> is designed for, and crossfading between images does seem to be the
> best idea in general for this sort of thing.  So we just need to
> extend the Transitions module so that it specifies how to transition
> the background-image property.

Transitions applied to backgrounds like this are a little different  
from the
transitions that the draft talks about:

<http://www.w3.org/TR/2009/WD-css3-transitions-20090320/>

In the draft, and the current WebKit implementation, transitions are
implemented by changing the value of an existing CSS property on
a timer, and re-rendering the content for each frame. While the
transition is running, getComputedStyle() will return the currently
displayed value of the property.

If we decide to do cross-fading of background images without any
additional new properties, we'll need to extend the spec to say what
getComputedStyle() returns for background-image while the transition
is running. The answer is not obvious to me.

In this sense, the earlier suggestion of adding a background-opacity
property makes sense; we then get back to the state where the engine
can animate this new property, and getComputedStyle returns something  
sensible.

To get a crossfade effect, the author would then have to do something
like this:

#foo {
   transition: background-image 2s;
  background-image: url(apple.jpg), url(orange.jpg);
  background-opacity: 1, 0;
}

#foo.after {
  background-opacity: 0, 1;
}

This is no longer automatic cross-fading, but it seems to fit better  
with the
current notion of transitions. There's less magic here.

Simon