Disable turn off inherited CSS3 transitions

Question

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

User · Answer

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>

User · Answer

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

User · Answer

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

User · Answer

The use of transition  none seems to be supported  with a specific adjustment for Opera  given the following HTML    lt a href     class  transition  gt Content lt  a gt   lt a href     class  transition  gt Content lt  a gt   lt a href     class  noTransition  gt Content lt  a gt   lt a href     class  transition  gt Content lt  a gt       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

User · Answer

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

User · Answer

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

[css] Disable/turn off inherited CSS3 transitions

Examples related to css

Examples related to css-transitions