Nonaktifkan / matikan transisi CSS3 yang diwariskan

Jadi saya memiliki transisi css berikut yang dilampirkan ke elemen 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; 
}

Apakah ada cara untuk menonaktifkan transisi yang diwariskan ini pada elemen tertentu?

a.tags { transition: none; } 

Sepertinya tidak melakukan pekerjaan itu.

Penggunaan transition: nonetampaknya didukung (dengan penyesuaian khusus untuk Opera) dengan HTML berikut:

<a href="#" class="transition">Content</a>
<a href="#" class="transition">Content</a>
<a href="#" class="noTransition">Content</a>
<a href="#" class="transition">Content</a>

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

Demo JS Fiddle .

Diuji dengan Chromium 12, Opera 11.x, dan Firefox 5 di Ubuntu 11.04.

Adaptasi khusus untuk Opera adalah penggunaan -o-transition: color 0 ease-in;yang menargetkan properti yang sama seperti yang ditentukan dalam transitionaturan lain , tetapi menetapkan waktu transisi ke 0, yang secara efektif mencegah transisi agar tidak terlihat. Penggunaan a.noTransitionselektor hanya untuk menyediakan selektor tertentu untuk elemen tanpa transisi.

Diedit untuk mencatat bahwa jawaban @ Frédéric Hamidi , menggunakan all(untuk Opera, setidaknya) jauh lebih ringkas daripada mencantumkan setiap nama properti yang tidak ingin Anda transisi.

Demo JS Fiddle yang diperbarui, menunjukkan penggunaan alldi Opera -o-transition: all 0 none:, setelah jawaban @ Frédéric dihapus sendiri .

Jika Anda ingin menonaktifkan satu properti transisi, Anda dapat melakukan:

transition: color 0s;

(karena transisi nol detik sama dengan tanpa transisi.)

Cara lain untuk menghapus semua transisi adalah dengan unsetkata kunci:

a.tags {
    transition: unset;
}

Dalam kasus transition, unsetsama dengan initial, karena transitionbukan merupakan properti yang diwariskan:

a.tags {
    transition: initial;
}

Seorang pembaca yang mengetahui unsetdan initialdapat mengetahui bahwa solusi ini langsung benar, tanpa harus memikirkan sintaks spesifik transition.

Anda juga dapat membatalkan semua transisi di dalam elemen penampung:

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>

Berdasarkan nilai transisi default W3schools adalah:, all 0s ease 0syang harus menjadi cara yang kompatibel lintas-browser untuk menonaktifkan transisi.

Ini tautannya: https://www.w3schools.com/cssref/css3_pr_transition.asp