RE: [css3-animations][css3-transitions][css3-background] Animating box-shadow

Brad Kemper:
>> Some thoughts after rereading Brad's description a 3rd time...
>> 
>> a. The transition should be fluid, not integral stepped.  Brad's description doesn't say otherwise but it's easy to read too much into the "1px" reference in step 5.
>I did not mean to imply stepping.

Right-o.  We're in agreement here.

>> b. It vastly simplifies the problem space to think of inner spreads as equivalent to negative outer spreads.  Similarly for offsets.
>> c. Incorporating 'b', the algorithm gets much simpler to describe mathematically as each property transitions along a single axis linearly without backtracking.
>I have a harder time thinking of it that way. Do spreads still get to zero at the same time as everything else?

Yes.

>> d. Normalizing across fields (offsets, spreads) so that they transition at the same rate is definitely important.
>> e. WG must decide whether they want "cross-inset" transitions to be evenly split between inset and outset renderings or not.  I suggest "not".  The math is simpler and the rendering is more flexible.  If people want a half-inset, half-outset rendering it's easy to do that with an animation that has an additional middle state of "0 0 0 0 transparent".
> IMO, if the distance measurements shadows do not go through zero at the same time, then it is not a smooth, believable effect, as there will end up being a jump when a bunch of shadow sticking out of the border box is suddenly found inside the padding box, facing the other way. 

I must not have phrased this clearly enough.  What I was trying to say was sometimes the transition should spend more time outset than inset (or vice-versa), and that's a good thing.  I was *not* trying to suggest that the fields would transition from inset to outset at different times.

Let me know if that's not clearer, Brad.  Or if you still are concerned that we mean expect different renderings here.


> Also, I had intended that color would just be one transition, independent of when the distance measurements hit zero.

An example might help:
from { box-shadow: red 10px 10px; }
to { box-shadow: blue 40px 40px inset; }

I think the preferred rendering is 20% outset and 80% inset (relative to time).  Further, I think #ff00ff should be used just before and just after the transition from outset to inset -- rather than at the 25px 25px inset location.


>> f. Color transitions with rgba.  Premultiplied?  Non-premultiplied?  One or the other depending on another property?
> Is this question specific to "cross-inset" transitions, or just in general for box-shadow? I don't see any reason for it to be different from other color transitions, do you?

Fair point.  But I think there may be additional concerns in light of the "non-symmetric inset/outset durations" scenarios.

Received on Thursday, 3 November 2011 21:09:27 UTC