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

Question

J'ai donc les transitions CSS suivantes attachées à un élément :

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

Ça n'a pas l'air de faire l'affaire.

Answer 1

L'utilisation de transition: none semble être supporté (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émonstration de JS Fiddle .

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

L'adaptation spécifique à l'Opéra est l'utilisation de -o-transition: color 0 ease-in; qui cible la même propriété que celle spécifiée dans l'autre transition mais fixe le délai de transition à 0 ce qui empêche effectivement la transition d'être perceptible. L'utilisation de la a.noTransition est simplement de fournir un sélecteur spécifique pour les éléments sans transitions.

---

Modifié de noter que La réponse de @Frédéric Hamidi en utilisant all (pour Opera, au moins) est bien plus concis que d'énumérer 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 all à l'Opéra : -o-transition: all 0 none à la suite de l'autodestruction de @Frédéric La réponse de la Commission.

Answer 2

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

transition: color 0s;

(puisqu'une transition de zéro seconde est identique à une absence de transition).

Answer 3

Une autre façon de supprimer toutes les transitions est d'utiliser la fonction unset mot-clé :

a.tags {
    transition: unset;
}

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

a.tags {
    transition: initial;
}

Un lecteur qui connaît unset y initial peut dire que ces solutions sont correctes immédiatement, sans avoir à penser à la syntaxe spécifique de transition .

Answer 4

Selon la valeur de transition par défaut de W3schools : all 0s ease 0s qui devrait être le moyen compatible avec les navigateurs de désactiver la transition.

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

Answer 5

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

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>