Disable/turn off inherited CSS3 transitions
If you want to disable a single transition property, you can do:
transition: color 0s;
(since a zero second transition is the same as no transition.)
The use of transition: none
seems to be supported (with a specific adjustment for Opera) given the following HTML:
<a href="#" class="transition">Content</a>
<a href="#" class="transition">Content</a>
<a href="#" class="noTransition">Content</a>
<a href="#" class="transition">Content</a>
...and CSS:
a {
color: #f90;
-webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;
-moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;
-o-transition:color 0.8s ease-in, background-color 0.1s ease-in;
transition:color 0.8s ease-in, background-color 0.1s ease-in;
}
a:hover {
color: #f00;
-webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;
-moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;
-o-transition:color 0.8s ease-in, background-color 0.1s ease-in;
transition:color 0.8s ease-in, background-color 0.1s ease-in;
}
a.noTransition {
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}
JS Fiddle demo.
Tested with Chromium 12, Opera 11.x and Firefox 5 on Ubuntu 11.04.
The specific adaptation to Opera is the use of -o-transition: color 0 ease-in;
which targets the same property as specified in the other transition
rules, but sets the transition time to 0
, which effectively prevents the transition from being noticeable. The use of the a.noTransition
selector is simply to provide a specific selector for the elements without transitions.
Edited to note that @Frédéric Hamidi's answer, using all
(for Opera, at least) is far more concise than listing out each individual property-name that you don't want to have transition.
Updated JS Fiddle demo, showing the use of all
in Opera: -o-transition: all 0 none
, following self-deletion of @Frédéric's answer.
Another way to remove all transitions is with the unset
keyword:
a.tags {
transition: unset;
}
When used with the transition
property, unset
is equivalent to initial
, since transition
is not an inherited property:
a.tags {
transition: initial;
}
A reader who knows about unset
and initial
can tell that these solutions are correct immediately, without having to think about the specific syntax of transition
.