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

Question

编辑

我现在已经可以使用它了，但是我仍然不确定我如何解决它。 如果有人知道发生了什么，我很想听听。

---

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

我将只在此处发布相关代码（因为整件事几乎有200行）。 其余代码可在此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，而是在代码笔中。 这是令人讨厌的代码：

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也快速更改。 当Firefox和IE11没有时，我真的不确定Chrome和Safari为何有此问题（我很好奇并下载了Opera。它像Chrome一样失败了）。

解决方法非常简单。 只需确保将标签设置为不会干扰过渡的内容即可（这意味着我在弄弄它直到工作正常）。 我希望有人能帮助我了解正在发生的事情以及为什么现在要解决此问题，但是我只是很高兴它能正常工作。

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

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

如此微小的修复。

这是工作代码的演示 （加快速度，这样就不会那么痛苦）。