CSS-текст градиента не отображается при анимации в Firefox

Question

У меня есть градиентный текст, который я пытаюсь анимировать с помощью animate.css.Анимация происходит, но текст не отображается, он прозрачный.Если я удаляю классы анимации, это выглядит так, как должно выглядеть.Как я могу это исправить?

Примечание: он отлично работает на Chrome и Edge.Только в Firefox я сталкивался с этой проблемой.

Работает, когда цвет не прозрачный ( fiddle ):

$(".text").css("animation-delay", "1s").addClass("animated lightSpeedIn");

@import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css);

div {
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 6rem;
  font-family: Sans-serif;
  color: #000;
  background: linear-gradient(90deg, red, green);
  -webkit-background-clip: text;
  background-clip: text;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><span class="text">Hello World</span></div>

Не работает при прозрачном цвете ( скрипка ):

$(".text").css("animation-delay", "1s").addClass("animated lightSpeedIn");

@import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css);

div {
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 6rem;
  font-family: Sans-serif;
  color: transparent;
  background: linear-gradient(90deg, red, green);
  -webkit-background-clip: text;
  background-clip: text;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><span class="text">Hello World</span></div>

Answer 1

Похоже на глюк в Firefox.Он не может выполнять анимацию и вырезку на одном и том же элементе.Переместите анимацию в контейнер (div):

$(".container").css("animation-delay", "1s").addClass("animated lightSpeedIn");

div {
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 6rem;
  font-family: Sans-serif;
  color: transparent;
  background: linear-gradient(90deg, red, green);
  -webkit-background-clip: text;
  background-clip: text;
}

body {
  margin: 0;
  overflow: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"><span class="text">Hello World</span></div>

Answer 2

используйте этот код в CSS

background: #2F7336;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #AA3A38, #2F7336);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #AA3A38, #2F7336); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

эта работа во всех браузерах