Css 如何在悬停时缓慢更改渐变 colored颜色

我想改变linear-gradient() colored颜色 时，悬停，顺利，像一个纯色，但与梯度 colored颜色 .我go 了w3schools，go 了Mozilla网络，想知道我是如何做到的.没有找到任何东西.我想试着像你对纯色transition: background 1s linear那样做，但似乎不起作用.有什么 idea 吗？我在下面发布了HTML和CSS代码:

<header>
<nav class="navbar navbar-dark bg-dark" aria-label="navbar">
  <div class="container-fluid justify-content-between">
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#leftMainNav"
      aria-controls="leftMainNav" aria-label="Toggle left navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="index.php">
      <img src="assets/images/logo-l.png" class="img-fluid" alt="CBS Logo">
      <span class="navbar-brand-text">CherryBerry Studios</span>
    </a>
    <div class="d-flex" style="width:240px;">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" aria-expanded="false">Company</a>

        <ul class="dropdown-menu position-absolute" style="top:55px; width:110px;">
            <li><a class="dropdown-item text-center" href="#">About Us</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item text-center" href="#">Partners</a></li>
            <li>
              <hr class="dropdown-divider ">
            </li>
            <li><a class="dropdown-item text-center" href="#">Affiliates</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item text-center" href="#">Legal Info</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item text-center" href="#">Support</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item text-center" href="#">Our Team</a></li>
          </ul>
        </li>
      </ul>
        </li>
      </ul>
      <button type="button" class="btn btn-menu mt-1 ms-2 me-2" data-bs-toggle="modal"
        data-bs-target="#signupModal">Sign Up</button>
      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#rightMainNav"
        aria-controls="rightMainNav" aria-label="Toggle right navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <div class="offcanvas offcanvas-end bg-dark" tabindex="-1" id="rightMainNav" aria-labelledby="rightMainNav">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title p-0 m-0 justify-content-middle" id="rightMainNavLabel">Offcanvas</h5>
        <button type="button" class="btn-close btn-close-white justify-content-end" data-bs-dismiss="offcanvas"
          aria-label="Close"></button>
      </div>
      <div class="offcanvas-body justify-content-end">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="offcanvas offcanvas-start bg-dark" tabindex="-1" id="leftMainNav" aria-labelledby="leftMainNav">
      <div class="offcanvas-header">
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
          aria-label="Close"></button>
        <h5 class="offcanvas-title" id="leftMainNavLabel">Offcanvas</h5>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav d-flex">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>

        </ul>
      </div>
    </div>
  </div>
</nav>

    .navbar-brand-text {
  background: -webkit-linear-gradient(green, magenta, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background 1s;
}

.navbar-brand-text:hover {
  background: -webkit-linear-gradient(blue, red,);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}