Disable/Turn Off Inherited CSS3 Transitions

Disable/turn off inherited CSS3 transitions

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.

disable inherited transition (all) for only one css property

You just have to declare new property for transitions, and old inherited ones are gone.

So, i just used this>

a.notrans{
-webkit-transition:color .2s;
-moz-transition:color .2s;
-o-transition:color .2s;
-ms-transition:color .2s;
transition:color .2s;
}

After this, only color transition is working!

Maybe there is better solution ?

Can I temporarily turn off all CSS3 transitions/animations whilst an element is built?

I’d suggest applying your animations/transitions via a class that’s added by JavaScript after the menu is built.

There is the animation-play-state property which can pause animations, but that only appeared (prefixed) in Safari 5 and Chrome 4 (as opposed to Safari 4 and Chrome 2 for the other animation properties), and I’m not sure if it’d work for your purposes.

Disable CSS animation on pseudo element inherited from parent

As the pseudo-element is a child element of the parent it will continue to get rotated as long as parent has the animation. Even setting animation: none on the pseudo element will have no effect.

The only way to make it look as though the child has no animation is to reverse the effect like shown in below snippet. What is being done is that the very same animation is added to the pseudo element but the animation-direction is set as reverse. This means that the pseudo get the exact reverse transform effect and thus would retain it in the same position.

.spinner {  height: 50px;  width: 50px;  position: relative;  animation: rotation .6s infinite linear;  border-left: 6px solid #222;  border-right: 6px solid #222;  border-bottom: 6px solid #222;  border-top: 6px solid #ccc;  border-radius: 100%;}.spinner:after {  position: absolute;  content: 'Loading..';  top: 0px;  left: 0px;  height: 100%;  width: 100%;  animation: rotation .6s infinite linear reverse; /* added this line */}@keyframes rotation {  from {    transform: rotate(0deg);  }  to {    transform: rotate(359deg);  }}

<div class='spinner'></div>

CSS3 transitions: disable reverting animation

Solved by adding this style:

.information-bar-collapsed { -moz-transition: all 0s ease; -webkit-transition: all 0s ease; }

Now when information bar shows it shows with animation, and when it hides animation does not show.

How can I disable inherited css styles?

The simple answer is to change

div.rounded div div div {
    padding: 10px;
}

to

div.rounded div div div {
    background-image: none;
    padding: 10px;
}

The reason is because when you make a rule for div.rounded div div it means every div element nested inside a div inside a div with a class of rounded, regardless of nesting.

If you want to only target a div that's the direct descendent, you can use the syntax div.rounded div > div (though this is only supported by more recent browsers).

Incidentally, you can usually simplify this method to use only two divs (one each for either top and bottom or left and right), by using a technique called Sliding Doors.

Are CSS3 transitions disabled when element is hidden?

According to MDN:

Display

In addition to the many different display box types, the value none lets you turn off the display of an element; when you use none, all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.

So i think elements with display set to none will not be rendered at all across all browsers and therefore transition or any other visual effect won't be applied.

You can also test yourself by subscribing to transitionend event:

$(element).on("transitionend", function () {
     console.log("transition ended");
});

---

Update:

It is also per w3c specification:

And some values (such as display:none, display: contents, and box-suppress: discard) cause the element and/or its descendants to not generate any boxes at all.

Where boxes are visual representations of element. And transition is definitely a part of visual representation as it also can affect layout e.g. when you change relative position of element with transition applied.

---

Here is one more example of how different are animations of elements with display : none and visibility : hidden in other words of rendered element and not-rendered one.

JSFiddle DEMO

---

Related Topics