Menu
I use a CSS framework which applies transitions on moving the mouse over input elements. I have a class which I want to not have this transition. Is this possible?
746
Even better than setting transition-property to none is setting transition-duration to 0s. This is the cross-browser code: -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; Why is this better?
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.
To remove a transition, select Transitions > None.
Just put transition:none; in the css and make its priority higher than the others.
Example:
html:
<div class="a"></div>
<div class="a b"></div>
css:
div.a {
width: 200px;
height: 100px;
border: 1px solid black;
background-color: #EEE;
-webkit-transition: background-color 0.5s;
}
div.a:hover {
background-color: #069;
}
div.a.b {
-webkit-transition: none;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
