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

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!

~TJ

Received on Tuesday, 1 November 2011 16:31:16 UTC