如何将 CSS3 过渡应用于除背景位置之外的所有属性？

Posted 2023-03-06

【中文标题】如何将 CSS3 过渡应用于除背景位置之外的所有属性？

【英文标题】：How do I apply CSS3 transition to all properties except background-position?

【发布时间】：2012-05-23 04:19:52

【问题描述】：

我想对除背景位置之外的所有属性应用 CSS 过渡。 我试着这样做：

.csstransitions a 
    -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;


.csstransitions a 
    -webkit-transition: background-position 0s ease 0s;                 
    -moz-transition: background-position 0s ease 0s;                
    -o-transition: background-position 0s ease 0s;  
    -ms-transition: background-position 0s ease 0s;         
    transition: background-position 0s ease 0s;

首先我将所有属性设置为过渡，然后尝试仅覆盖背景位置属性的过渡。

然而，这似乎也重置了所有其他属性 - 所以基本上没有任何转换似乎发生了。

有没有办法在不列出所有属性的情况下做到这一点？

【问题讨论】：

嗨，我实际上正在寻找这个问题。你得到任何可以接受的答案了吗？

【参考方案1】：

如果任何人都在寻找一种速记方式，为所有属性添加过渡除了一个具有延迟的特定属性，请注意即使是现代浏览器之间也存在差异 .

下面的简单演示显示了差异。查看full code

div:hover 
  width: 500px;
  height: 500px;
  border-radius: 0;
  transition: all 2s, border-radius 2s 4s;

Chrome 将“组合”这两个动画（正如我所期望的那样），如下所示：

虽然 Safari “分离”了它（这可能不是预期的）：

一种更兼容的方式是，如果您对其中一个属性有延迟，您可以为特定属性分配特定的过渡。

【讨论】：

确实如此。这是批判性的洞察力。由于必须单独指定每个属性而不是 all，这很糟糕，知道这是在浏览器中获得所需行为的唯一方法是很有用的。

您的意思是使用all 关键字会导致问题吗？那么是否建议具体提及每个过渡？ 3年后这仍然是一个问题吗？

【参考方案2】：

您可以尝试使用标准的 W3C 方式：

.transition  transition: all 0.2s, top 0s, left 0s, width 0s, height 0s; 

http://jsfiddle.net/H2jet/60/

【参考方案3】：

这是一个同样适用于 Firefox 的解决方案：

transition: all 0.3s ease, background-position 1ms;

我做了一个小demo：http://jsfiddle.net/aWzwh/

【讨论】：

由于某种原因，1ms 对我不起作用，但 0 对我起作用。

@Flimm，你用的是什么浏览器？ “没有工作”是什么意思，没有动画任何东西？

对我来说1ms 没有用，但1ms none 有效！ @ericsoco 0ms 或 0s 也可以。

时间单位必须有一个单位。所以 0 不能像 4 一样起作用，但是 4s 会像 0s 一样起作用。

我已经搜索了很长时间，谢谢@FelixEdelmann！

【参考方案4】：

试试这个...

* 
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;

a 
    -webkit-transition: background-position 1ms linear;
    -moz-transition: background-position 1ms linear;
    -o-transition: background-position 1ms linear;
    transition: background-position 1ms linear;

【讨论】：

“试试这个”仅代码的答案不是最好的。最好是对你在做什么的一些解释。

【参考方案5】：

试试：

-webkit-transition: all .2s linear, background-position 0;

这在类似的事情上对我有用..

【讨论】：

将背景位置固定为 0 并不等于从背景位置移除过渡。不是吗？

这永远行不通。通过之后重新定义转换属性，您完全覆盖了之前的转换属性，就好像它从未存在过一样。他们没有得到巩固。

按原样复制时它对我不起作用。但是我通过添加0s 而不是0 来实现它。在0 之后提及s 使其工作

【参考方案6】：

希望不要迟到。只用一行就完成了！

-webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 

这适用于 Chrome。您必须用逗号分隔 CSS 属性。

这是一个工作示例：http://jsfiddle.net/H2jet/

【讨论】：

我正在 Chrome 上尝试这个，但它似乎不适合我。 all transition-property 似乎无论如何都会覆盖所有其他属性。

有趣。我想我没有用其他属性测试过它。当我尝试color 0 时，它起作用了，但它肯定不适用于background-position 0。即使background 0 对我没有任何结果...Here's a jsFiddle 我是从 Gaming.SE 菜单中安装的。老实说，我最初只测试了background-position，因为这是问题特别提到的，也是我试图改变自己的问题。

它曾经为我在 chrome 上工作。它仍在 IE11 中工作，但从本周开始，所有属性现在将覆盖该行后面的任何内容。

正如@cirrus 所说，Chrome 不再支持 0 秒的持续时间，但您可以让它在很短的持续时间内工作，例如 .1ms

如果提供非零秒持续时间，这适用于 Chrome 和 Firefox。