转换延迟无法在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，但是在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，而是因为只要切换复选框，它的父级就会发生变化。标签的更改是立竿见影的，所以我假设他们也强迫span.icon快速更改。我真的不确定为什么Chrome和Safari有这个问题，当Firefox和IE11没有（我很好奇并下载了Opera。它就像Chrome一样失败了。）

修复非常简单。只要确保标签设置为不会破坏过渡的东西（这意味着我一直操作直到我开始工作）。我喜欢有人帮助我了解正在发生的事情以及为什么现在已经修好了，但我很高兴它能够工作。

这里添加了修复它的CSS规则：

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

这么微小的修复。

这里是demo工作代码（加速，因此它不会那么痛苦）。