0

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.

jsfiddle for reference

Nathan
  • 6,772
  • 11
  • 38
  • 55

1 Answers1

6

Duratons can be comma-separated, corresponding to the transitioned properties, ie:

-webkit-transition-duration: 50ms, 200ms;
-webkit-transition-property: margin, background;

http://jsfiddle.net/bQ8d7/1/

stephenhay
  • 2,824
  • 24
  • 25