缺少js动画效果css渐变答案

【问题标题】：Absense of js animation affects css gradient缺少js动画效果css渐变
【发布时间】：2020-05-03 02:39:22
【问题描述】：

我正在尝试使用 CSS 渐变来熟悉它们。听起来可能很傻，但我尝试在 javascript 中使用 .animate() 应用“不透明度”（只是尝试一下！），并使用 CSS 对文本进行一些线性渐变。

但一旦我决定删除脚本，线性渐变就不再起作用了。

为什么会这样？我该如何解决？

document.querySelector(".title").animate([
    { opacity: 0 },
    { opacity: 1 }
], { opacity: 0, duration: 500, easing: "ease-in", fill: "forwards" } )

body {
  margin: 0;
  text-align: center;
}

/************************** TITLE SECTION ****************************/
.container {
  padding: 0;
  position: relative;
  margin-top: 0;
}

.title {
  display: inline-block;
  margin: 5% auto auto;
  font-family: 'Ubuntu', sans-serif;
  font-size: 90px;
  background: linear-gradient(100deg, #fdbcac 25%, #3167fa 60%, #fdbcac 100%);
  background-clip: text;
  color: transparent;
}

/*************************** BACKGROUNDS & IMAGES ********************************/
.top-background {
  width: 100%;
  height: 650px;
  position: absolute;
  top: -10%;
  left: 0;
  opacity: 0.7;
}

.top-background1 {
  width: 100%;
  height: 650px;
  position: absolute;
  top: -10%;
  left: 0;
  z-index: -1;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <!-- Styles -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <!-- FONTS -->
  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap" rel="stylesheet">
</head>

<body>
  <!-- TITLE SECTION -->
  <section class="container-fluid container">
    <img class="top-background" src="images\background.png" />
    <img class="top-background1" src="images\geordanna-cordero-2.jpg" />
    <h1 class="title">
      Sapinder Pal
    </h1>


  </section>



  <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
  <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>
</body>

</html>

【问题讨论】：

我无法重现此问题。你能在可运行的 sn-p 中显示问题吗？试试reading this on how to create a reproducible example
@Richard 我添加了代码 sn-p。请帮我解决问题。
我仍然无法产生问题。当我删除 JS 时，渐变效果相同。
我很困惑，因为当我现在检查时它在 codepen 上工作，但在我的浏览器中仍然没有。我已经在 Firefox 和新的 Edge Chromium 中尝试过
是的，很遗憾我看不到问题；-(

标签： javascript css gradient background-color

【解决方案1】：

您可能需要考虑浏览器引用和前缀，例如 -webkit- 或 -moz-。

Browser support reference

这通常可能是某些事情无法正常工作的原因。

也可以试试这个text gradient guide。它可能会帮助您实现您想要实现的目标。

希望这会有所帮助。你可能不需要担心 JS。

【讨论】：

"-moz-" 工作。但我想我在某处读到过这样的供应商前缀现在已被弃用？
@Sapinder 不完全确定它们是否存在。但是，您可以查看随附的列表，了解哪些 CSS 属性适用于每个浏览器版本，并且使用该供应商前缀（目前）是一种修复，如果您开始遇到任何问题，您可以使用。