Deaktivieren / Deaktivieren von geerbten CSS3-Übergängen

Ich habe also die folgenden CSS-Übergänge an das a-Element angehängt:

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; 
}

Gibt es eine Möglichkeit, diese geerbten Übergänge für bestimmte Elemente zu deaktivieren?

a.tags { transition: none; } 

Scheint den Job nicht zu machen.

Die Verwendung von transition: nonescheint angesichts des folgenden HTML-Codes unterstützt zu werden (mit einer speziellen Anpassung für Opera):

<a href="#" class="transition">Content</a>
<a href="#" class="transition">Content</a>
<a href="#" class="noTransition">Content</a>
<a href="#" class="transition">Content</a>

... und 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 .

Getestet mit Chromium 12, Opera 11.x und Firefox 5 unter Ubuntu 11.04.

Die spezifische Anpassung an Opera ist die Verwendung, -o-transition: color 0 ease-in;die auf dieselbe Eigenschaft wie in den anderen transitionRegeln abzielt, jedoch die Übergangszeit auf festlegt 0, wodurch effektiv verhindert wird, dass der Übergang wahrgenommen wird. Die Verwendung des a.noTransitionSelektors besteht einfach darin, einen spezifischen Selektor für die Elemente ohne Übergänge bereitzustellen.

Bearbeitet, um zu beachten, dass die Antwort von @ Frédéric Hamidi mit all(zumindest für Opera) weitaus prägnanter ist, als jeden einzelnen Eigenschaftsnamen aufzulisten, für den Sie keinen Übergang wünschen.

Aktualisierte JS Fiddle-Demo, die die Verwendung von allin Opera zeigt:-o-transition: all 0 none nach dem Selbstlöschen der Antwort von @ Frédéric .

Wenn Sie eine einzelne Übergangseigenschaft deaktivieren möchten, haben Sie folgende Möglichkeiten:

transition: color 0s;

(da ein Übergang von null Sekunden gleich keinem Übergang ist.)

Eine andere Möglichkeit, alle Übergänge zu entfernen, ist das unsetSchlüsselwort:

a.tags {
    transition: unset;
}

Im Fall von transition, unsetentspricht initial, da transitionnicht eine erbliche Eigenschaft ist:

a.tags {
    transition: initial;
}

Ein Leser, der weiß unsetund erkennen initialkann, dass diese Lösungen sofort korrekt sind, ohne über die spezifische Syntax von nachdenken zu müssen transition.

Sie können auch alle Übergänge innerhalb eines enthaltenen Elements enterben:

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>

Basierend auf W3schools ist der Standardübergangswert :. Dies all 0s ease 0ssollte die browserübergreifende Methode zum Deaktivieren des Übergangs sein.

Hier ist ein Link: https://www.w3schools.com/cssref/css3_pr_transition.asp