CSS3过渡：* IN *和* OUT *的不同过渡（或从过渡状态返回）

Question

原始问题...更新下面的工作代码：

我有一个加载图像，在ajax加载事件期间出现。 通过向body元素添加或删除“loading”类来显示/隐藏图像。 目前，加载图像将背景大小设置为0到100％，并且不透明度渐变（反之亦然，“返回”转换）。

但是，我想要实现的是在淡出时立即进行背景大小转换（而不是转换），因此：

• 淡入：不透明度从0到1 in .2s，背景大小从0到100％in .2s

• 淡出：在.2s内从1到0的不透明度，从100％到0的背景大小应立即发生

   #loader { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -1; opacity: 0; -moz-opacity: 0; transition: all .2s ease-in-out } #loader .image { width: 400px; height: 138px; display: block; position: absolute; z-index: 2000; top: 50%; left: 50%; margin: 0; background: url(assets/images/loading.png) no-repeat; background-size: 0 0; transition: all .2s ease-in-out; -webkit-animation: pulse 400ms ease-out infinite alternate; -moz-animation: pulse 400ms ease-out infinite alternate; -o-animation: pulse 400ms ease-out infinite alternate; animation: pulse 400ms ease-out infinite alternate } .loading #loader {z-index: 1000; background-color: rgba(255,255,255,.7)} .loading #loader .image { background-size: 100% 100%; margin: -69px 0 0 -200px; transition: opacity .2s ease-in-out } 

我已经为这个选择器更改了转换属性。将.loading #loader .image到“不透明度”而不是“全部”，但它仍然执行背景大小转换。

有谁知道如何使用css3实现上述不同的淡入和淡出过渡？ 谢谢！

---

更新的工作准则

问题是将各个属性（边距，背景）分成逗号分隔列表。 我相信使用转换：所有将阻止您能够执行不同的IN和OUT转换。

#loader {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    -moz-opacity: 0;
    .transition(opacity,.4s);
}

#loader .image {
    width: 400px;
    height: 138px;
    display: block;
    position: absolute;
    z-index: 2000; 
    top: 50%; 
    left: 50%; 
    margin: 0;
    background: url(assets/images/loading.png) no-repeat;
    background-size: 0 0;

    -webkit-transition: margin .4s ease-in-out;
    -moz-transition: margin .4s ease-in-out;
    -o-transition: margin .4s ease-in-out;
    -ms-transition: margin .4s ease-in-out;
    transition: margin .4s ease-in-out;

    -webkit-animation: pulse 400ms ease-out infinite alternate;
    -moz-animation: pulse 400ms ease-out infinite alternate;
    -o-animation: pulse 400ms ease-out infinite alternate;
    animation: pulse 400ms ease-out infinite alternate
}

.loading #loader {z-index: 1000; background-color: rgba(255,255,255,.7)}

.loading #loader .image {
    background-size: 100% 100%; 
    margin: -69px 0 0 -200px;

    -webkit-transition: background .4s ease-in-out, margin .4s ease-in-out;
    -moz-transition: background .4s ease-in-out, margin .4s ease-in-out;
    -o-transition: background .4s ease-in-out, margin .4s ease-in-out;
    -ms-transition: background .4s ease-in-out, margin .4s ease-in-out;
    transition: background .4s ease-in-out, margin .4s ease-in-out;
}

Answer 1

这是一个简化的测试用例：

div {
    background: blue;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

div.loading {
    opacity: 1;
    background: red;
    transition: opacity 2s ease-in-out, background 1s ease-in;
}

注意opacity如何逐渐淡入和淡出，但background只会消失，并在淡出时立即变为蓝色。

我用过:hover作为一个例子，但在使用JavaScript添加和删除类时它应该是一样的。

演示

如果您想要一个更具体的例子，请在dabblet或Jsfiddle上提供简化的测试用例 。