- From: Simon Fraser <smfr@me.com>
- Date: Tue, 01 Nov 2011 09:53:09 -0700
- To: Brad Kemper <brad.kemper@gmail.com>
- Cc: www-style list <www-style@w3.org>, Sylvain Galineau <sylvaing@microsoft.com>
On Oct 31, 2011, at 5:23 PM, Brad Kemper wrote: > Here is my idea for how to animate from an outer shadow to an inner shadow, after the topic came up in the f2f today. The idea is that the item begins floating above the paper, then sinks into the paper. So the outer shadow animates into nothingness until all values of x offset, y offset, blur, and spread reach zero, then animate out of zero into the inner shadow values. > > My idea for how to handle this is illustrated in the following diagram: > > http://www.bradclicks.com/cssplay/animating_shadows.png > > In this example, the transition/animation is between these two values: > > box-shadow: 2px 6px 4px 10px red; > > box-shadow: 20px 20px 10px 0px red inset; > > The strategy I am proposing it that you: > > 1. find the largest absolute value of the distance measurements of x offset, y offset, blur, and spread of the outer shadow, and > 2. normalize the other outer shadow values to animate from their starting values to zero in the same amount of time as the largest distance of the outer shadow, > 3. find the largest absolute value of the distance measurements of x offset, y offset, blur, and spread of the inner shadow, > 4. normalize the other inner shadow values to animate from zero to their ending values in the same amount of time as the largest distance of the inner shadow, > 5. normalize the inner shadow and outer shadow so that 1px movements in each of the largest values of each take the same amount of time. > > I'm not sure I explained that very clearly, but please take a look at the link to see if it is any more clear. Before we go off into the weeds here, do you really think we should even attempt to animated between inset and outset shadows? This behavior would have to described carefully in a spec somewhere (Backgrounds and Borders, I guess). It seems overlay magic and special to me, for a very marginal use case. Simon
Received on Tuesday, 1 November 2011 16:53:49 UTC