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

On 11/01/2011 09: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!

It looks weird if I punch in
   Outset: -10 -50 2 4
   Inset: 40 40 10 10

Maybe taking the longest route for inset and outset independently
would be better? (So your pacing attribute can change from outset
to inset.)

Also I'm wondering if blur and spread should be added together to
find the distance that they contribute. Or indeed whether spread
and the offsets should be added together to find that distance.

~fantasai

Received on Monday, 19 December 2011 18:04:05 UTC