Great question! To achieve smooth color position shifts for your linear gradient background, we have two solid approaches—one that creates seamless looping animations using background-position, and another that directly animates the gradient's color sequence. Let's dive into both, starting with the most fluid option:

Approach 1: Seamless Looping via Background Position #

This method works by extending your gradient color sequence to avoid abrupt cuts, then animating the background position to slide the gradient along its direction. It's perfect for continuous, smooth transitions.

Step-by-Step Implementation #

1. Extend the Gradient: Duplicate your original color sequence so the start/end colors match, preventing a "jump" when the animation loops.
2. Set Background Size: Double the background dimensions to accommodate the extended gradient.
3. Animate Background Position: Use @keyframes to slide the gradient from its starting position to the end of the extended range.

Here's the full code:

<div class="gradient-box"></div>

.gradient-box {
  width: 400px;
  height: 300px;
  /* Extended gradient: original colors duplicated to ensure seamless looping */
  background-image: linear-gradient(
    to right top,
    #003eb3, #007BFF, #53b2ff, #0097DB, #009b74, #00c785,
    #003eb3, #007BFF, #53b2ff, #0097DB, #009b74, #00c785
  );
  /* Double the background size to fit the extended gradient */
  background-size: 200% 200%;
  /* Animate the background position with a smooth linear timing */
  animation: slideGradient 8s linear infinite;
}

@keyframes slideGradient {
  0% {
    /* Start at the top-left corner of the extended background */
    background-position: 0% 0%;
  }
  100% {
    /* Slide to the bottom-right, shifting all colors along the gradient direction */
    background-position: 100% 100%;
  }
}

How It Works #

By extending the gradient and animating background-position, the colors appear to smoothly shift toward the top-right direction. Since the start and end of the extended gradient are identical, the animation loops seamlessly without any visual breaks.

Approach 2: Animate Gradient Color Order #

If you specifically want to cycle the order of your colors (like shifting color1, color2, color3 to color2, color3, color1), you can directly define gradient changes in @keyframes. Note that this method may have slightly less smooth transitions compared to the background position approach, but it's precise for color reordering.

Example Code #

.gradient-box {
  width: 400px;
  height: 300px;
  background-image: linear-gradient(
    to right top,
    #003eb3, #007BFF, #53b2ff, #0097DB, #009b74, #00c785
  );
  animation: shiftColorOrder 8s ease-in-out infinite;
}

@keyframes shiftColorOrder {
  0% {
    background-image: linear-gradient(to right top, #003eb3, #007BFF, #53b2ff, #0097DB, #009b74, #00c785);
  }
  20% {
    background-image: linear-gradient(to right top, #007BFF, #53b2ff, #0097DB, #009b74, #00c785, #003eb3);
  }
  40% {
    background-image: linear-gradient(to right top, #53b2ff, #0097DB, #009b74, #00c785, #003eb3, #007BFF);
  }
  60% {
    background-image: linear-gradient(to right top, #0097DB, #009b74, #00c785, #003eb3, #007BFF, #53b2ff);
  }
  80% {
    background-image: linear-gradient(to right top, #009b74, #00c785, #003eb3, #007BFF, #53b2ff, #0097DB);
  }
  100% {
    background-image: linear-gradient(to right top, #00c785, #003eb3, #007BFF, #53b2ff, #0097DB, #009b74);
  }
}

Notes #

• Use ease-in-out timing function to soften the start/end of each color shift.
• Adjust the animation duration (8s in the example) to control how fast the colors reorder.

Final Recommendation #

For the smoothest, most seamless animation, Approach 1 is the way to go. It avoids any abrupt color jumps and creates a continuous flow that looks polished. Approach 2 is better if you need precise control over the exact color order at specific keyframes.

内容的提问来源于stack exchange，提问作者SayHiToMePls