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

On Nov 1, 2011, at 9:24 AM, Tab Atkins Jr. wrote:

> On Mon, Oct 31, 2011 at 5:23 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
>> 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.
> 
> I've gone ahead and made an interactive version of your rules:
> <http://www.xanthir.com/etc/shadow-transitions.html>.
> 
> It looks pretty good!

Nice. Thanks for putting that together. Can you also whip together something to actually animate it, so we can see if we all like when the flip point occurs when played? I'm not sure that I can tell that by dragging the slider, because I might not be dragging it at an even rate.

Received on Tuesday, 1 November 2011 16:50:19 UTC