Дочерние элементы отказываются наследовать фоновую анимацию в Firefox

Question

Я сделал на своем веб-сайте полосу шестиугольников, которые медленно оживляют цвет фона, чтобы получить эффект «мерцания». Вы можете увидеть это в действии по адресу https://taketwicedailey.com/. Я сделал элементы в форме шестиугольника, используя учебник, который нашел в Интернете. Он включает создание прямоугольного элемента, а затем размещение параметров :: before и :: after в виде ромба вверху и внизу прямоугольного элемента (если есть лучший способ, дайте мне знать, я новичок в веб-строительстве).

То, что я тогда хотел сделать, - это создать бесконечную зацикленную анимацию группы шестиугольников, которая меняет цвет фона. Затем я хотел настроить запуск этой анимации для разных элементов в разное время на основе селектора nth-of-type. Я разработал все это с помощью Google Chrome, на котором он прекрасно работает без проблем, в чем вы можете убедиться сами.

Проблема возникает, когда вы используете Firefox. Кажется, что анимация не хочет наследоваться параметрами :: before и :: after, что дает эффект лука-t ie. Похоже, это произошло в недавнем обновлении Firefox, потому что это не было проблемой какое-то время go. Я пробовал все, от определения анимации внутри определения :: 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);
  }
}