css - 属性的交错动画

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

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

我在这里做错了什么？

这是一个 fiddle :http://jsfiddle.net/K3e4U/4/

Answer 1

改变

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

到

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

如果您查看检查器 View ，transition: left 0 linear 1.5s; 正在被取消，因为您声明了另一个 transition。