activar/desactivar heredados transiciones CSS3

Question

así que tengo las siguientes transiciones CSS unidos al elemento:

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

a.tags { transition: none; } 

Parece que no hace el trabajo.

Answer 1

El uso de transition: none parece estar apoyada (con un ajuste específico para Opera) dado el código HTML siguiente:

<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 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 transition reglas, pero establece el tiempo de transición a 0, lo que impide eficazmente la transición de ser notable. El uso del selector a.noTransition es simplemente para proporcionar un selector específico para los elementos sin transiciones.

---

Editado a @Frédéric Hamidi's answer en cuenta que, utilizando all (para Opera, por lo menos) es mucho más concisa que enumerar a cabo cada propiedad-nombre de la persona que no quiere tener transición.

Updated JS Fiddle demo, showing the use of all in Opera: -o-transition: all 0 none, siguiendo la auto-eliminación de la respuesta de .

Answer 2

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

transition: color 0s; 

(desde un segundo paso por cero es igual que ninguna transición.)

Answer 3

También puede desheredar a todas las transiciones en el interior un elemento que contiene:

CSS:

.noTrans *{ 
-moz-transition: none; 
-webkit-transition: none; 
-o-transition: color 0 ease-in; 
transition: none; 
} 

HT ML:

<a href="#">Content</a> 
<a href="#">Content</a> 
<div class="noTrans"> 
<a href="#">Content</a> 
</div> 
<a href="#">Content</a>