属性的交错动画答案

【问题标题】：Staggered animation of properties属性的交错动画
【发布时间】：2014-06-04 14:42:15
【问题描述】：

我正在尝试为滑入式菜单设置动画，其底层叠加层会随着菜单滑动而淡入淡出。对于滑入，这没问题，叠加层会弹出，我只是以与菜单幻灯片相同的速率为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/

【问题讨论】：

标签： css animation css-transitions

【解决方案1】：

改变

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。

【讨论】：