Question

我想将CSS转换应用于除background-position之外的所有属性。我试着这样做：

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

首先我将所有属性设置为转换，然后我尝试仅覆盖background-position属性的转换。

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

有没有办法在不列出所有属性的情况下执行此操作？

Answer 1

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

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

我制作了一个小型演示：http://jsfiddle.net/aWzwh/

Answer 2

希望不要迟到。它仅使用一条线完成！

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

Answer 3

试试这个......

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

Answer 4

尝试：

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

这对我来说类似的东西......

Answer 5

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

#include<iostream>
#include<conio.h>
using namespace std;
int main(){

    int salary;
    float deduction,netpayable;
    switch(salary/10000){
        cout<<"enter salary amount :";
        cin>>salary;
        case 0:     
        deduction=0;
        netpayable = salary;
        cout<<"netpayable salary is salary-deduction ="<<netpayable;
        break;

        case 1:     
        deduction=1000;
        netpayable = salary-deduction;
        cout<<"netpayable salary is salary-deduction ="<<netpayable;
        break;

        default:    
        deduction=salary*(7/100);
        netpayable = salary-deduction;
        cout<<"netpayable salary is salary-deduction ="<<netpayable;
        break;
    }
    system("pause");
}

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

Answer 6

对于任何寻求速记方式的人来说，要为所有属性添加过渡（一个延迟的特定属性除外），请注意，即使是现代浏览器也存在差异。

下面的一个简单演示演示了区别。检出full code

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

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

虽然Safari将其“分离”（可能不会出现）：

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

如何将CSS3过渡应用于除background-position之外的所有属性？

6 个答案: