css3 - CSS transitions, different durations with the same property? -

i know can set different durations different properties css transitions. possible set different durations same property?

example: want box grow/shrink in width length quickly when hovered/mouse exits, grow/shrink in width length b slowly when button pressed, using different class.

here example:

http://jsfiddle.net/vdypg/7/

at moment, box grows when hovered, shrinks when mouse exits. of course expected, .box class has slow duration speed applied, there way around this? have worked out hacky way of doing settimeout , "fast" class, lovely if there more elegant way.

note: i'm aware can done jquery. i'm looking work css however, actual problem i'm facing outside of isolated example 3d transforms. kept simple example. :)

css:

.box {     background: red;     width: 100px;     height: 100px;     margin: 10px;     -webkit-transition: width 2s;  }  .lengtha {       width: 300px;     -webkit-transition-duration: 0.2s; /* can used when class removed? */ }  .lengthb {      width: 500px;     } 

jquery:

$('.box').on('mouseenter', function() {      $(this).addclass('lengtha');              })  $('.box').on('mouseleave', function() {      $(this).removeclass('lengtha');              })      $('.makebig').on('click', function() {      $('.box').toggleclass('lengthb');              }) 

​html:

<div class="box"></div> <div class="box"></div> <div class="box"></div> <button class="makebig">grow!</button> ​ 

i believe can using variant of technique: http://css-tricks.com/different-transitions-for-hover-on-hover-off/ . i'm on ipad right now, won't out example, gist of set different transition on hover pseudo selector.

if want use jquery, can bind transitioned event find out when previous transition finished, it's worth noting naming isn't consistent -

you'll want use like:

$("div").bind("webkittransitionend otransitionend mstransitionend transitionend transitionend", function(){   //code }); 

as seems firefox uses transitionend, rather correct transitionend.