Отключить / отключить унаследованные переходы CSS3

Итак, у меня есть следующие переходы css, прикрепленные к элементу 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; 
}

Есть ли способ отключить эти унаследованные переходы для определенных элементов a?

a.tags { transition: none; } 

Похоже, не выполняет свою работу.

Использование, transition: noneпохоже, поддерживается (с определенной настройкой для Opera), учитывая следующий 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>

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

Протестировано с Chromium 12, Opera 11.x и Firefox 5 в Ubuntu 11.04.

Конкретной адаптацией к Opera является использование того -o-transition: color 0 ease-in;же свойства, которое указано в других transitionправилах, но при этом устанавливается время перехода 0, которое эффективно предотвращает заметность перехода. Использование a.noTransitionселектора заключается в том, чтобы просто предоставить определенный селектор для элементов без переходов.

Отредактировано, чтобы отметить, что ответ @Frédéric Hamidi с использованием all(по крайней мере, для Opera) гораздо более краток, чем перечисление каждого отдельного имени свойства, для которого вы не хотите иметь переход.

Обновленная демонстрация JS Fiddle, показывающая использование allв Opera:-o-transition: all 0 none после самоудаления ответа @Frédéric .

Если вы хотите отключить отдельное свойство перехода, вы можете сделать:

transition: color 0s;

(поскольку переход через ноль секунды означает отсутствие перехода.)

Другой способ удалить все переходы - использовать unsetключевое слово:

a.tags {
    transition: unset;
}

В случае transition, unsetэквивалентно initial, поскольку transitionне является унаследованным свойством:

a.tags {
    transition: initial;
}

Читатель, который знает unsetи initialможет сказать, что эти решения верны, сразу же, не задумываясь о конкретном синтаксисе transition.

Вы также можете лишить наследства все переходы внутри содержащего элемента:

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>

На основе W3schools значение перехода по умолчанию:, all 0s ease 0sчто должно быть кроссбраузерным способом отключения перехода.

Вот ссылка: https://www.w3schools.com/cssref/css3_pr_transition.asp