CODEWITHSUNDEEP
htmlcssanimationwebkitwebkit-transition
Nathan
Nathan

Reputation: 7032

Different durations for different properties using WebKit transitions/animation

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

Upvotes: 0

Views: 485

Answers (1)

stephenhay
stephenhay

Reputation: 2874

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/

Upvotes: 6

Related Questions