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 div
s (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
CSS Transition When Class Removed
How to Control Size of List-Style-Type Disc in CSS
Why Does "Left: 50%, Transform: Translatex(-50%)" Horizontally Center an Element
D3.Js Map (<Svg>) Auto Fit into Parent Container and Resize with Window
A VS A:Link, What Is the Difference
How to Decode Base64-Encoded Font Information
How to Set the Size of an HTML Text Box
Bootstrap Tables Overflowing with Long Unspaced Text
How to Use Two-Column Layout with Reveal.Js
Control Underline Position on Text-Decoration: Underline
React Native: Different Styles Applied on Orientation Change
Multiple Background Images Positioning
Web Testing for Ie. How Accurate Is Ietester
Rails Asset Pipeline Solution for Ie 4096 Selector/Stylesheet Limit