Set a CSS3 transition to none

Question

How would I make it so a CSS transition doesn't work inside a media-query, or in any other case? For example:

@media (min-width: 200px) {
    element {
        transition: width 1s;
    }   
}

@media (min-width: 600px) {
    element {
        transition: none; // SET TO NO TRANSITION
    }   
}

Answer 1

You can set the transition-property to none. This way, no transition effect will be applied.

Like this:

-webkit-transition-property: none;
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;

Answer 2

Even better than setting transition-property to none is setting transition-duration to 0s.

This is the cross-browser code:

-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;

Why is this better? Because, by default, standards-compliant browsers (such as Firefox) set transition-property to all for each element. They also set transition-duration to 0s. Thus, by setting transition-duration to 0s, you are most closely matching how the browser defines an element without a transition.

Setting the transition-duration to the default 0s renders the transition-property irrelevant.

Answer 3

transition: width 0s

Should do the trick - as it's basically saying there is a transition, but 0s is too quick to see it!