transicion - transition css hover

Deshabilitar/desactivar las transiciones CSS3 heredadas

Question

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 desactivar estas transiciones heredadas en elementos específicos?

a.tags { transition: none; } 

No parece estar haciendo el trabajo.

Answer 1

El uso de transition: none parece ser compatible (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;
}

Demostración de JS Fiddle .

Probado con Chromium 12, Opera 11.xy 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 de transition , pero establece el tiempo de transición en 0 , lo que impide efectivamente que la transición se note. El uso del selector a.noTransition es simplemente para proporcionar un selector específico para los elementos sin transiciones.

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

Se ha actualizado la demo de JS Fiddle, que muestra el uso de all en Opera: -o-transition: all 0 none , después de la auto-eliminación de la respuesta de @Frédéric .

Answer 2

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

a.tags {
    transition: unset;
}

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

a.tags {
    transition: initial;
}

Un lector que sabe acerca de unset e initial puede decir que estas soluciones son correctas de inmediato, sin tener que pensar en la sintaxis específica de la transition .

Answer 3

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

transition: color 0s;

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

Answer 4

También puede deslegitrar 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>