Désactiver / désactiver les transitions CSS3 héritées

J'ai donc les transitions css suivantes attachées à l'élément 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; 
}

Existe-t-il un moyen de désactiver ces transitions héritées sur des éléments spécifiques?

a.tags { transition: none; } 

Ne semble pas faire le travail.

L'utilisation de transition: nonesemble être prise en charge (avec un ajustement spécifique pour Opera) étant donné le HTML suivant:

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

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

Démo de JS Fiddle .

Testé avec Chromium 12, Opera 11.x et Firefox 5 sur Ubuntu 11.04.

L'adaptation spécifique à Opera est l'utilisation de -o-transition: color 0 ease-in;qui cible la même propriété que spécifiée dans les autres transitionrègles, mais définit le temps de transition sur 0, ce qui empêche effectivement la transition d'être perceptible. L'utilisation du a.noTransitionsélecteur consiste simplement à fournir un sélecteur spécifique pour les éléments sans transitions.

Édité pour noter que la réponse de @ Frédéric Hamidi , utiliser all(pour Opera, au moins) est beaucoup plus concis que de lister chaque nom de propriété individuel que vous ne voulez pas avoir de transition.

Mise à jour de la démo de JS Fiddle, montrant l'utilisation de alldans Opera:,-o-transition: all 0 none suite à la suppression automatique de la réponse de @ Frédéric .

Si vous souhaitez désactiver une seule propriété de transition, vous pouvez faire:

transition: color 0s;

(puisqu'une transition de zéro seconde équivaut à aucune transition.)

Une autre façon de supprimer toutes les transitions consiste à unsetutiliser le mot - clé:

a.tags {
    transition: unset;
}

Dans le cas de transition, unsetéquivaut à initial, puisque transitionn'est pas une propriété héritée:

a.tags {
    transition: initial;
}

Un lecteur qui sait unsetet initialpeut dire que ces solutions sont correctes immédiatement, sans avoir à penser à la syntaxe spécifique de transition.

Vous pouvez également déshériter toutes les transitions à l'intérieur d'un élément conteneur:

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>

Basé sur la valeur de transition par défaut de W3schools est:, all 0s ease 0squi devrait être le moyen compatible avec tous les navigateurs de désactiver la transition.

Voici un lien: https://www.w3schools.com/cssref/css3_pr_transition.asp