Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Different transition-duration for each transition-property

I want to use different duration for each transition property. For example for width I want to have a transition with 0.3s and for height 0.6s.

Is it possible in CSS3 ?

like image 688
Mohebifar Avatar asked Apr 08 '14 19:04

Mohebifar


2 Answers

Sure, you can list different transitions with a comma separated list: transition: color 0.25s ease, border 1s linear

like image 86
Josh Rutherford Avatar answered Oct 31 '22 18:10

Josh Rutherford


transition: width 0.3s, height 0.6s;

Just use the shorthand transition property instead. Don't forget vendor prefixes.

Fiddle: http://jsfiddle.net/2dwgg/

like image 27
Mooseman Avatar answered Oct 31 '22 18:10

Mooseman