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


108

我想将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
嗨,我实际上是在寻找这个问题。你得到任何可接受的答案了吗?
米歇尔·帕特恩

Answers:


143

这是在Firefox上也可以使用的解决方案:

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

我做了一个小演示:http : //jsfiddle.net/aWzwh/


3
由于某种原因,1ms它对我不起作用,但对我却有0用。
Flimm

@Flimm,您使用的是什么浏览器?您对“没有工作”的意思是什么,没有动画吗?
Felix Edelmann

1
对我来说1ms没有用,但是 1ms none有用!@ericsoco 0ms0s也可以。
BCoder

3
时间单位必须有一个单位。所以0不能像4一样不起作用,但是4就像0一样可以工作。
ESR

2
我已经搜索了很久了,谢谢@FelixEdelmann!
tatsu

17

希望不要迟到。仅需一行即可完成!

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


6
我正在Chrome上尝试此操作,但似乎不适合我。该all过渡性质似乎覆盖所有其他不管。
animuson

2
有趣。我想我还没有测试过其他属性。当我尝试使用color 0它时,但肯定不能使用background-position 0。甚至background 0对我也没有任何结果。这是我从Gaming.SE菜单安装的jsFiddle。老实说,我什至只进行了background-position最初的测试,因为这是具体提到的问题,也是我试图改变自己的问题。
animuson

2
它曾经在我身上使用Chrome。它仍然可以在IE11中使用,但是从本周开始,all属性现在将覆盖该行中的所有内容。
卷云

1
正如@cirrus所说,Chrome不再保留0秒的持续时间,但是您可以让它的工作时间非常短,例如.1ms
GetFree

1
如果提供了非零的持续时间,则此方法在Chrome和Firefox上均适用。
Naisheel Verdhan

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

仅尝试使用“代码”答案不是最好的。更好的是对您正在做的事情进行一些解释。
random_user_name


2

对于任何寻求速记方法的人,要为除一个特定属性外的所有属性添加过渡(带有延迟),请注意,即使是现代浏览器之间也存在差异

下面的一个简单演示演示了区别。查看完整代码

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

Chrome会“合并”这两个动画(就像我期望的那样),如下所示:

在此处输入图片说明

Safari“分离”时(可能不会发生):

在此处输入图片说明

一种更兼容的方法是,如果其中之一有延迟,则可以为特定属性分配特定过渡。


确实。这是至关重要的见解。la脚的是,必须单独指定每个属性,而不是all,所以知道这是在浏览器之间获得所需行为的唯一方法非常有用。
random_user_name

1

尝试:

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

这对我来说类似。


将background-position固定为0并不意味着要删除background-position的过渡。是不是
米歇尔·帕特恩

1
这永远行不通。之后,通过重新定义过渡属性,可以完全覆盖以前的过渡属性,就好像它根本不存在一样。它们不会合并。
animuson
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.