子元素拒绝继承 Firefox 中的背景动画

Question

我在我的网站上制作了一条六边形形状的带子，它可以缓慢地为背景颜色设置动画以产生“闪烁”效果。您可以在 https://taketwicedailey.com/ 看到它的实际应用。我使用网上找到的教程制作了六边形元素。它涉及制作一个矩形元素，然后将 ::before 和 ::after 选项定位为矩形元素的顶部和底部的菱形（如果有更好的方法，请告诉我，我是 web 构建的新手）。

然后我想做的是让一组六边形形状的永久循环动画改变背景颜色。然后我想根据第 n 个类型的选择器设置这个动画在不同的时间为不同的元素开始。我使用谷歌浏览器开发了所有这些，它运行良好，没有任何问题，您可以验证自己。

问题出现在您使用 Firefox 时。似乎动画不想被 ::before 和 ::after 选项继承，这会产生蝴蝶结的效果。这似乎发生在 Firefox 的最近更新中，因为这在不久前还不是问题。从在 ::before、::after 定义中定义动画到使用 !important 标志，我已经尝试了所有方法，但是这个明显错误背后的机制远远超出了我的理解。

我在下面包含了我的 CSS，提前感谢您的帮助。

.hex-group {
  position: absolute;
  top: 470px;
  left: 60%;
  width: 250px;
  margin: 0px;
  font-size: 0;
  text-align: center;
  z-index: -5;
  overflow: visible;
}

.hex {
  display: inline-block;
  position: relative;
  width: 76px;
  height: 43.87862px;
  margin: 21.93931px 2px 3.4641px;
  z-index: -6;
  background-color: var(--main-bg-color);

  animation-name: pulse;
  animation-duration: 15s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

.hex:before, .hex:after {
  content: '';
  display: block;
  position: absolute;
  z-index: -7;
  width: 53.74012px;
  height: 53.74012px;
  transform-origin: 0 0;
  transform: scaleY(0.57735) rotate(-45deg);

  background-color: inherit !important;

}

.hex:before {
  top: 0;
}

.hex:after {
  top: 43.87862px;
}

.hex:nth-of-type(4n) {
  animation-delay: 0s;
}

.hex:nth-of-type(4n+1){
  animation-delay: -5s;
}

.hex:nth-of-type(4n+2){
  animation-delay: -10s;
}

@keyframes pulse {
  0% {
    background-color: var(--main-bg-color);
  }
  25% {
    background-color: #55636e;
  }
  50% {
    background-color: #444;
  }
  75%{
    background-color: var(--main-bg-color);
  }
}

Answer 1

我认为这是一个合法的 Firefox 错误，但现在我找到了以下解决方法。您可以像这样将动画“过度指定”到 ::before 和 ::after 元素

.hex {
  display: inline-block;
  position: relative;
  width: 76px;
  height: 43.87862px;
  margin: 21.93931px 2px 3.4641px;
  z-index: -6;
  background-color: var(--main-bg-color);

          animation-name: pulse;
          animation-duration: 15s;
          animation-timing-function: linear;
          animation-delay: 0s;
          animation-iteration-count: infinite;
          animation-direction: normal;
          animation-fill-mode: forwards;
}

.hex:before, .hex:after {
  content: '';
  display: block;
  position: absolute;
  z-index: -5;
  width: 53.74012px;
  height: 53.74012px;
          transform-origin: 0 0;
          transform: scaleY(0.57735) rotate(-45deg);

  background-color: var(--main-bg-color);

          animation-name: pulse;
          animation-duration: 15s;
          animation-timing-function: linear;
          animation-delay: 0s;
          animation-iteration-count: infinite;
          animation-direction: normal;
          animation-fill-mode: forwards;
}

.hex:before {
  top: 0;
}

.hex:after {
  top: 43.87862px;
}


.hex:nth-of-type(4n),
.hex:nth-of-type(4n):before,
.hex:nth-of-type(4n):after {
          animation-delay: 0s;
}

.hex:nth-of-type(4n+1),
.hex:nth-of-type(4n+1):before,
.hex:nth-of-type(4n+1):after {
          animation-delay: -5s;
}

.hex:nth-of-type(4n+2),
.hex:nth-of-type(4n+2):before,
.hex:nth-of-type(4n+2):after {
          animation-delay: -10s;
}

@keyframes pulse {
  0% {
    background-color: var(--main-bg-color);
  }
  25% {
    background-color: #55636e;
  }
  50% {
    background-color: #444;
  }
  75%{
    background-color: var(--main-bg-color);
  }
}