[animation] Animation-timing-function impacting only enclosed keyframe block

Hi Tab-

This is what I wrote in CSS: The Definitive Guide chapter on animation with regards to animation-timing-function within a keyframe block only impacting that block, and not the other keyframe blocks at the same point in the progression of the animation. Thought this might help.

-----

If the `animation-timing-function` property is included in a keyframe, only the properties also included in that keyframe  block will have their timing function impacted. This is not currently specified in the CSS specification, but it is implemented as such, it makes sense and it is expected to be included in the final specification. It follows the idea that conceptually, when an animation is set on an element or pseudo-element, it is as if a set of keyframes is created for each property that is present in any of the keyframes, as if an animation is run independently for each property that is being animated. The animation-timing-function that is set on any of the keyframes is added to the progression of only the properties that are defined at that keyframe. 

    @keyframes change_timing_function {
      0% {
        width: 500px;
      }
      50% {
        animation-timing-function: ease-in; 
        width: 300px;
      }
      100% {
        width: 100px;
      }
    }

While you can have multiple occurrences of a keyframe value, such as 50%, as the current implementation stands, the animation timing function and property have to be in the same selector block for the animating timing function change to have an impact. The code above will change the animation-timing-function to ease-in for the width property. However, with the animation below, the animation-timing-function, in a keyframe block that has no property/value declarations, will have not effect.

  	@keyframes no_timing_change {
      0% {
        width: 500px;
      }
      50% {
        animation-timing-function: ease-in;
      }
      50% { 
        width: 300px;
      }
      100% {
        width: 100px;
      }
  	}

----
-Estelle 

Estelle Weyl
estelle@weyl.org
http://www.standardista.com