Deshabilitar / desactivar transiciones CSS3 heredadas

Así que tengo las siguientes transiciones css adjuntas al 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; 
}

¿Hay alguna forma de deshabilitar estas transiciones heredadas en elementos a específicos?

a.tags { transition: none; }

No parece estar haciendo el trabajo.

Author: Scotty, 2011-07-09
Source

4 answers

El uso de transition: none parece estar soportado (con un ajuste específico para Opera) dado el siguiente 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>

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

Probado con Cromo 12, Opera 11.x y Firefox 5 en Ubuntu 11.04.

La adaptación específica a Opera es el uso de -o-transition: color 0 ease-in; que se dirige a la misma propiedad que se especifica en las otras reglas transition, pero establece el tiempo de transición a 0, lo que impide efectivamente la transición de siendo perceptible. El uso del selector a.noTransition es simplemente proporcionar un selector específico para los elementos sin transiciones.

Editado para tener en cuenta que la respuesta de@Frédéric Hamidi, usando all (para Opera, al menos) es mucho más concisa que enumerar cada nombre de propiedad individual que no desea tener transición.

Actualizado JS Fiddle demo, mostrando el uso de all en Opera: -o-transition: all 0 none, tras la auto-supresión de @Frédéric la respuesta.

 154
Author: David Thomas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:34:39

Si desea deshabilitar una sola propiedad de transición, puede hacer: 

transition: color 0s;

(puesto que una transición de segundo cero es lo mismo que ninguna transición.)

 20
Author: Will Madden,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-25 13:55:02

Otra forma de eliminar todas las transiciones es con el unset palabra clave: 

a.tags {
    transition: unset;
}

En el caso de transition, unset es equivalente a initial, desde transition no es una propiedad heredada:

a.tags {
    transition: initial;
}

Un lector que conoce unset y initial puede decir que estas soluciones son correctas inmediatamente, sin tener que pensar en la sintaxis específica de transition.

 2
Author: Rory O'Kane,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-08 00:32:55

También puede desheredar todas las transiciones dentro de un elemento contenedor:

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>
 0
Author: freeworlder,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-30 12:19:21