CSS3转换:*IN*和*OUT*的不同转换(或从转换状态返回)

Question

原始问题。。。更新的工作代码如下：

我有一个在ajax加载事件中出现的加载图像。该图像通过向body元素添加或删除"loading"类来显示/隐藏。目前，加载的图像将背景大小设置为0到100%的动画，并在不透明度中淡入（"返回"过渡反之亦然）。

不过，我想完成的是让背景大小的转换在淡出时立即发生（而不是转换），所以：

• 淡入：不透明度从0到1英寸2s，背景大小从0到100%英寸2s

• 淡出：不透明度从1到0英寸2s，背景大小从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的转换属性更改为"opacity"而不是"all"，但它仍然执行背景大小转换。

有人知道如何使用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添加和删除类时，它的工作原理应该是一样的。

演示

如果你想要一个更具体的例子，请提供一个关于dappet或Jsfidle的简化测试用例。