Disattiva / disattiva le transizioni CSS3 ereditate

Quindi ho le seguenti transizioni CSS allegate all'elemento a:

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

C'è un modo per disabilitare queste transizioni ereditate su elementi a specifici?

a.tags { transition: none; } 

Non sembra stia facendo il lavoro.

L'uso di transition: nonesembra essere supportato (con una regolazione specifica per Opera) dato il seguente 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>

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

Demo di JS Fiddle .

Testato con Chromium 12, Opera 11.xe Firefox 5 su Ubuntu 11.04.

L'adattamento specifico a Opera è il cui utilizzo -o-transition: color 0 ease-in;mira alla stessa proprietà specificata nelle altre transitionregole, ma imposta il tempo di transizione a 0, il che impedisce di fatto che la transizione sia evidente. L'uso del a.noTransitionselettore è semplicemente quello di fornire un selettore specifico per gli elementi senza transizioni.

Modificato per notare che la risposta di @ Frédéric Hamidi , usando all(per Opera, almeno) è molto più conciso che elencare ogni singolo nome di proprietà che non vuoi che abbia la transizione.

Demo aggiornata di JS Fiddle, che mostra l'uso di allin Opera:,-o-transition: all 0 none dopo l'autoeliminazione della risposta di @ Frédéric .

Se vuoi disabilitare una singola proprietà di transizione, puoi fare:

transition: color 0s;

(poiché una transizione di zero secondi equivale a nessuna transizione.)

Un altro modo per rimuovere tutte le transizioni è con la unsetparola chiave:

a.tags {
    transition: unset;
}

Nel caso di transition, unsetè equivalente a initial, poiché transitionnon è una proprietà ereditata:

a.tags {
    transition: initial;
}

Un lettore che conosce unsete initialpuò dire che queste soluzioni sono corrette immediatamente, senza dover pensare alla sintassi specifica di transition.

Puoi anche diseredare tutte le transizioni all'interno di un elemento contenitore:

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>

In base al valore di transizione predefinito di W3schools è:, all 0s ease 0sche dovrebbe essere il modo compatibile con tutti i browser per disabilitare la transizione.

Ecco un collegamento: https://www.w3schools.com/cssref/css3_pr_transition.asp