How to change gradient color slowly on hover?

I want to change the linear-gradient() color when hovered over, smoothly, like a solid color, but with a gradient color. I have went onto w3schools, and went to the Mozilla network on how I could do it. didn't find anything on it. I id try doing it the way you would do it for solid colors, transition: background 1s linear, but that didnt seem to work. any ideas? I have posted the HTML and CSS code below:

<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;
}

Solution

You can't transition a background gradient to completely change to another color set. What you can do though is to set up your linear gradient to all the colors you need and make it's size 200% width. Then you can set the background position on hover to 100%, which can be transitioned.

Here's a rough mockup I put together on Codepen to help demonstrate.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gradient Text Hover Effect</title>
  <style>
    body {
      background: #444;
    }   

    .navbar-brand-text {
      text-align: center;
        font-size: 40px;
      background: linear-gradient(to right, crimson,pink,springgreen);
      background-clip: text;
      -webkit-text-fill-color: transparent;
        background-size: 200% 100%;
        background-position: left center;
      transition: background 1s linear;
    }

    .navbar-brand-text:hover {
      background-position: 100% center;
    }
  </style>
</head>
<body>
  <div class="navbar-brand-text">Hover Me</div>
</body>
</html>