I'm using WebKit transition to animate certain CSS changes.
For example, say I've got a red box that I want to change to green when someone hovers. I use this:
-webkit-transition-duration: 200ms;
-webkit-transition-property: background;
-webkit-transition-timing-function: ease;
That works great. But now, say I want it to also slide downwards a bit. I use this:
-webkit-transition-property: background, margin;
That also works okay, but I want the box to slide down quickly (say 50ms). I can't change -duration because that would make the color animate fast.
How can I assign different durations to different properties in CSS animations?
I'm fine with using keyframe animations if necessary, but I haven't seen a way that they can help me.
Duratons can be comma-separated, corresponding to the transitioned properties, ie:
-webkit-transition-duration: 50ms, 200ms;
-webkit-transition-property: margin, background;