https://trinhvanminh.github.io/anchor-positioning-hover-cards/more-about-background.html

index.css

:root {
    --text-gradient-stop-1: #4285f4;
    --text-gradient-stop-2: #9b72cb;
    --text-gradient-stop-3: #d96570;
    --color-surface: #fff;
}
div {
       background: linear-gradient(
        74deg,
        /* end here (2) */ var(--text-gradient-stop-1) 0,
        var(--text-gradient-stop-2) 9%,
        var(--text-gradient-stop-3) 20%,
        var(--text-gradient-stop-3) 24%,
        var(--text-gradient-stop-2) 35%,
        var(--text-gradient-stop-1) 44%,
        var(--text-gradient-stop-2) 50%,
        var(--text-gradient-stop-3) 56%,
        var(--color-surface) 75%,
        /* start here (1) */ var(--color-surface) 100%
      );

      /* 400% is 4 times wider than the div width */
      background-size: 400% 100%;
      color: transparent;

      background-position-x: 100%; /* start from the 100% (1) and then moving backwards to the 0% (2) */
      transition: background-position-x 3s;

}

demo