过渡延迟在 Chrome 和 Safari 中不起作用

Question

编辑

我现在已经让它工作了，但我仍然不确定我是如何修复它的。如果有人知道发生了什么，我很想听听。

---

我正在制作一个动画菜单图标，效果很好……除了中间栏的过渡。它应该使用transition-delay 在第一个动画期间顶部和底部条合在一起后消失，并在顶部和底部条再次相遇后出现第二个动画（在两种情况下都是三分之一）。中间条上没有动画，只有background-color 属性上的过渡。我已经尝试过使用简写 transition 和显式 transition-delay 属性。两者都给出完全相同的结果。整个过程在 IE 和 Firefox 中运行良好，但在 Chrome 和 Safari 中失败，这让我认为这可能是 webkit 的问题。

我只在这里发布相关代码（因为整个事情有将近两百行）。其余的可在此codepen 获得。如果您认为我应该添加更多代码，请告诉我，我会添加更多。

CSS：

#menu label span.icon,
#menu.lightbox label span.icon {
  height: 5em;
  width: 5em;
  display: block;
  background-color: rgba(255, 255, 255, 1);
  background-clip: content-box;
  padding: 2em 0;
  transition: background-color 0s 1.66s;
}

#menu input[type=checkbox]:checked ~ label span.icon {
  background: rgba(255, 255, 255, 0);
  background-clip: content-box;
}

HTML：

<form id="menu" name="dateChooser">
  <input id="toggle" type="checkbox">
  <label for="toggle" onclick="addLightBox(this)"><span class="icon"></span></label>
  <fieldset>
  </fieldset>
</form>

真正让我感到困惑的是，我在其他地方使用transition-delay，它工作得很好。我在<fieldset> 上使用它来创建灯箱效果。以防万一这也是代码：

fieldset {
  background: rgba(0, 0, 0, 0);
  transition: background 5s, width 0s 5s, height 0s 5s;
}

#menu.lightbox input[type=checkbox]:checked ~ fieldset {
  background-color: rgba(0, 0, 0, .6);
  transition: background 5s;
}

任何想法我做错了什么？

---

更多信息。我正在使用复选框 hack 来启动动画/过渡、顶部和底部栏的伪元素，以及一些 javascript 来防止动画在加载时运行。但所有这些似乎都工作得很好。我也在 codepen 中使用 autoprefixer，所以我很确定这不是前缀问题。

---

这里有一些显示正确动画和错误动画的 gif。

正常工作：

中间条无延迟：

Answer 1

在将每一组css规则一一删除后，终于找到了罪魁祸首。事实证明，导致问题的代码从未进入 stackoverflow，而是在 codepen 中。这是有问题的代码：

CSS：

#menu input[type=checkbox]:checked ~ label {
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: block;
  background: rgba(0, 0, 0, 0);
  position: relative;
  z-index: 99;
  top: 0;
  left: 0;
  cursor: default;
}

HTML：

<form id="menu" name="dateChooser">
  <input id="toggle" type="checkbox">
  <label for="toggle" onclick="addLightBox(this)"><span class="icon"></span></label>
  <fieldset>
  </fieldset>
</form>

问题不在于span.icon，而是因为它的父级在复选框被切换时发生变化。 Label 的更改是立竿见影的，所以我假设他们也迫使 span.icon 快速更改。我真的不确定为什么 Chrome 和 Safari 会出现这个问题，而 Firefox 和 IE11 却没有（我很好奇并下载了 Opera。它和 Chrome 一样失败了）。

修复相当简单。只需确保将标签设置为不会破坏过渡的内容（这意味着我会摆弄直到我让它工作）。我希望有人能帮助我了解正在发生的事情以及为什么它现在已修复，但我很高兴它正在工作。

这是修复它的添加的 CSS 规则：

#menu label {
  margin: 0;
  display: block;
}

这么小的修复。

这是工作代码的demo（加快速度，因此不会那么慢）。