Вимкнути / вимкнути успадковані переходи CSS3

Отже, у мене є наступні переходи css, приєднані до елемента:

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