禁用/closuresinheritance的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; } 

有没有办法禁用这些inheritance的特定元素的转换?

 a.tags { transition: none; } 

似乎没有做这项工作。

transition: none的使用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小提琴演示 。

在Ubuntu 11.04上使用Chromium 12,Opera 11.x和Firefox 5进行testing。

对Opera的具体适应是使用-o-transition: color 0 ease-in; 它针对与其他transition规则中指定的属性相同的属性,但将转换时间设置为0 ,这有效地防止了转换的显着性。 使用a.noTransitionselect器只是为没有转换的元素提供一个特定的select器。


编辑注意到, @FrédéricHamidi的答案 , all使用(至less对Opera来说)比列出你不想过渡的每个单独的属性名称要简洁得多。

更新了JS Fiddle演示,展示了Opera中all的使用: -o-transition: all 0 none ,在自己删除@Frédéric的答案之后。

如果你想禁用一个转换属性,你可以这样做:

 transition: color 0s; 

(因为零秒转换与没有转换相同)。

你也可以取消一个包含元素中的所有转换:

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>