Desativar / desativar transições CSS3 herdadas

Portanto, tenho as seguintes transições css anexadas ao 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; 
}

Existe uma maneira de desativar essas transições herdadas em elementos específicos?

a.tags { transition: none; } 

Não parece estar fazendo o trabalho.

O uso de transition: noneparece ser suportado (com um ajuste específico para Opera) dado o seguinte 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>

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

Demonstração JS Fiddle .

Testado com Chromium 12, Opera 11.xe Firefox 5 no Ubuntu 11.04.

A adaptação específica ao Opera é o uso de -o-transition: color 0 ease-in;que visa a mesma propriedade conforme especificado nas outras transitionregras, mas define o tempo de transição para 0, o que efetivamente impede que a transição seja perceptível. O uso do a.noTransitionseletor é simplesmente fornecer um seletor específico para os elementos sem transições.

Editado para observar que a resposta de @Frédéric Hamidi , usando all(para Opera, pelo menos) é muito mais conciso do que listar cada nome de propriedade individual que você não deseja que tenha transição.

Demo JS Fiddle atualizado, mostrando o uso de allno Opera:,-o-transition: all 0 none após a auto-exclusão da resposta de @Frédéric .

Se quiser desativar uma única propriedade de transição, você pode fazer:

transition: color 0s;

(já que uma transição de zero segundo é o mesmo que nenhuma transição.)

Outra maneira de remover todas as transições é com a unsetpalavra-chave:

a.tags {
    transition: unset;
}

No caso de transition, unseté equivalente a initial, visto que transitionnão é uma propriedade herdada:

a.tags {
    transition: initial;
}

Um leitor que conhece unsete initialpode dizer que essas soluções estão corretas imediatamente, sem ter que pensar sobre a sintaxe específica de transition.

Você também pode deserdar todas as transições dentro de um elemento contido:

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>

Com base no valor de transição padrão W3schools é:, all 0s ease 0sque deve ser a forma compatível com vários navegadores de desabilitar a transição.

Aqui está um link: https://www.w3schools.com/cssref/css3_pr_transition.asp