W3C home > Mailing lists > Public > www-style@w3.org > November 2011

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 1 Nov 2011 09:24:19 -0700
Message-ID: <CAAWBYDAN971YGVaunxzugGTLcsNRWzU8cfCFb_=k0MHK=Q0KZw@mail.gmail.com>
To: Brad Kemper <brad.kemper@gmail.com>
Cc: www-style list <www-style@w3.org>, Sylvain Galineau <sylvaing@microsoft.com>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:46 GMT