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>

当颜色为透明（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: 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

在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+ */

在所有浏览器中均可使用

Answer 2

在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>

在Firefox中进行动画制作时未显示CSS渐变文本

2 个答案: