css3 - Make CSS transition-duration work both ways? -

i realise css transitions apply class that's been added, not removed. i'm wondering if there elegant solution problem. have set of boxes, when hovered, transition circle. when button pressed, grow/shrink.

i'd them grow , shrink slowly, turn circle/square quickly.

at moment, grow , shrink slowly, turn circle quickly, but turn square again. of course because css transition duration boxes set slow speed, , when circle class removed, revert original speed. have come working solution (not included here) uses settimeout add "quick speed" class moment , take away. solve issue feels ugly me.

have guys ever come across issue , thought of better way? or beyond scope of css transitions?

css:

.box {     background: red;     width: 100px;     height: 100px;     margin: 10px;     -webkit-transition: 2s; }  .big {   width: 300px;     }  .circle {     background: blue;     border-radius: 50px;     -webkit-transition-duration: .5s; } 

jquery:

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

html:

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

jsfiddle:

http://jsfiddle.net/vdypg/1/

it can done using css3 alone. need move transitions .box rule, this:

.box {      background-color: red;      width: 100px;      height: 100px;      margin: 10px;      -webkit-transition: width 2s, border-radius .5s, background-color .5s; }  .big {    width: 300px;     }  .circle {     background-color: blue;     border-radius: 50px; }