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

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.

Received on Tuesday, 1 November 2011 00:31:01 UTC