属性的交错动画

Question

我试图动画一个滑动菜单与一个底层覆盖淡入和淡出作为菜单滑动。对于滑动，这是没有问题的，覆盖只是弹出，我只是动画的background变化的速度与菜单滑动相同。

然而，对于滑动出的动画，我必须保持背景覆盖可见，直到渐变完成。所以我假设我可以在background变化的时候延迟left属性的变化。但这不起作用，背景会立即消失。

使用的CSS:

div#main-menu {
  position: fixed;
  z-index: 20;
  background-color: #ccc;
  color: #fff;
  -webkit-transition: all 1.5s;
  transition: all 1.5s;
  top: 0;
  width: 25%;
  height: 100%;
  left: -25%;
}
div#menu-overlay {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  border: 2px solid green;
}
body.menu-open div#main-menu {
  left: 0;
}
body.menu-open div#menu-overlay {
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: background 1.5s;
}
body:not(.menu-open) div#menu-overlay {
  left: -100%;
  background: rgba(0, 0, 0, 0);
  transition: left 0 linear 1.5s;
  transition: background 1.5s linear 0;
}

(覆盖层周围的绿色边框只是为了在它是透明的时候跟踪它。)

我在这里做错了什么?

这里是小提琴:http://jsfiddle.net/K3e4U/4/

Answer 1

change

transition: left 0 linear 1.5s;
transition: background 1.5s linear 0;

transition: left 0 linear 1.5s, background 1.5s linear 0;

如果你看检查器视图，transition: left 0 linear 1.5s;被取消了，因为你声明了另一个transition。