CSS transition duration does not update the transition?

I am currently writing a jQuery plugin for creating / managing CSS transitions, and I have found this weird behavior with transition durations.

Apparently, while the transition is in progress, any changes to the duration property are ignored, unless the properties that are transitioning receive a different value. The duration itself does not change the transition.

Below is some code that shows an example of this, and below are some links to jsFiddle to better understand the transition behavior I'm trying to achieve.

    /* starting transition */
    .t1 {
        -webkit-transition-duration: 5s;
        -webkit-transition-property: width;
        width: 500px;
    }

    /* during the above, this will do nothing */
    .t2 {
        -webkit-transition-duration: 200ms;
        -webkit-transition-property: width;
        width: 500px;
    }

    /* but this will override the transition as expected */
    .t3 {
        -webkit-transition-duration: 200ms;
        -webkit-transition-property: width;
        width: 501px; /* 1 pixel added */
    }

, ?

UPDATE

, , , - .

( www.w3.org/TR/css3-transitions/#starting)

, , , "--", " " " " .

+3
2

Chrome Safari, , jQuery:)

+1

, , . , , - , .. opacity: 0 opacity: 0.0001.

+1

All Articles