So I have the following CSS transitions attached to an element:
a {
-webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ;
-moz-transition:color 0.1s ease-in, background-color 0.1s ease-in;
-o-transition:color 0.1s ease-in, background-color 0.1s ease-in;
transition:color 0.1s ease-in, background-color 0.1s ease-in;
}
Is there a way to disable these inherited transitions on specific elements?
a.tags { transition: none; }
Doesn't seem to be doing the job.
This question is related to
css
css-transitions
Based on W3schools default transition value is: all 0s ease 0s
, which should be the cross-browser compatible way of disabling the transition.
Here is a link: https://www.w3schools.com/cssref/css3_pr_transition.asp
Additionally there is a possibility to set a list of properties that will get transitioned by setting the property transition-property: width, height;
, more details here
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.)
Another way to remove all transitions is with the unset
keyword:
a.tags {
transition: unset;
}
In the case of transition
, 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
.
You could also disinherit all transitions inside a containing element:
CSS:
.noTrans *{
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}
HTML:
<a href="#">Content</a>
<a href="#">Content</a>
<div class="noTrans">
<a href="#">Content</a>
</div>
<a href="#">Content</a>
Source: Stackoverflow.com