How do you define a CSS animation with different timing functions for each property?

I am working with keyframe animat开发者_Python百科ions in CSS, and I want to be able to specify different timing functions for each property I'm animating. For instance, during a given keyframe, I'd like to animate opacity from 0 to 1 with an ease-in timing function, and top from 0 to 100 with a linear timing function.

This is possible with CSS transitions, by doing something like the below. (Unfortunately I need keyframed animations for other reasons.)

-webkit-transition-property: opacity, top;
-webkit-timing-function: ease-in, linear;

Also, I noticed (at this link) that the specification for the animation-timing-function property accepts a comma delimited list. However, I don't see any way to specify a corresponding list of properties or any documentation on what the purpose of a list of timing functions is. Does anyone know if what I'm trying to do is possible?

I find it easier to just use comma separated shorthands:

img {
   -webkit-animation:
      updown 2s ease-in infinite,
      rotate 1s ease-out infinite;
}

http://jsfiddle.net/desz9/