Re: [css3-animations] What if different keyframes have different sets of properties?

On Dec 22, 2009, at 1:32 PM, "L. David Baron" <dbaron@dbaron.org> wrote:

>> Is that still useful to refer to the unanimated value in the middle
>> of the animation, or is it just unexpected and missing out on a way
>> to write shorter, cleaner code (where you only have to write the in-
>> between values of the proprties that you want different from what
>> would be automatically in-betweened)?
>
> I actually rather like the way Simon described it; it makes it much
> clearer to me how animations is an extension of transitions (which I
> didn't previously understand).  My understanding is now that
> animations simply applies the various rules inside the @keyframes
> rule at the relevant stages of the animation (overriding all other
> rules), and then transitions between them.

I like it too, and had a similar "aha!" moment w/ regard to how  
transions-like that made it. However once you have two values for a  
property on the two ends, any values for the same property that is in  
between those two no longer need to relate to the non-animation rule  
versions.

And in fact, it would be pretty handy to be able to insert a seperate  
property in the middle and have some automatic interpolation of the  
other property.

For instance, imagine the following for a bar in a silly animated bar  
chart:

   # @keyframes one {
#   from { bottom: 0; height: 0; }
#   25%  { bottom: 10%; }
#   to   { bottom: 0; height: 43.4%; animation-timing-function: ease- 
out; }
# }

So, this would mean that I want the element to do a little jump,  
reaching its apex a quarter of the way through, and I want the element  
to grow (steadily slower) to it's final height over the course of the  
whole thing. The 'bottom' change would be independant of the 'height'  
change. I'd hate to have to figure out on my own where the height  
should be at that 'bottom' keyframe, and I wouldn't want it to be  
based on a non-animation value.