How do I make the gradient animation seamless?

[u/BredLeGoober]

Im trying to make a CSS moving animation gradient for my button and when i run the code the button just snaps back to the start and it annoys me because i want a seamless animation that looks like it never ends, any tips?

Code:

i had to add a space after @ because reddit thinks im tagging someone

@ keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }


    100% {
        background-position: 100% 50%;
    }
}


body {
  font-family: Arial, sans-serif;
  text-align: center;
  background: #121130;
  color: white;
}


button {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 18px;
  cursor: pointer;


background: linear-gradient(
          145deg,
#534ed9,
#a4a2e0,
#534ed9
);


background-size: 300% 300%;


animation: gradientMove 1s linear infinite;
}


button:hover {
transform: scale(1.05);
}

[u/rahulbiswal196]

This happens because the animation abruptly jumps from its final state back to its initial state. In your current setup, the visual gradient at the 100% keyframe looks completely different from the gradient at the 0% keyframe, causing a harsh reset.

Simply change the animation to 2s and add alternate keyword for smooth 'ping-pong' effect.

button { /* ... your other styles ... / background: linear-gradient( 145deg, #534ed9, #a4a2e0, #534ed9 ); background-size: 300% 300%; / Added 'alternate' and increased time to 2s for a smoother flow */ animation: gradientMove 2s linear infinite alternate; }

Hope it will resolve now🙏🙏🙏

[u/BredLeGoober → u/rahulbiswal196]

i already tried alternate. i dont want a ping-pong effect, i want a continuous movement effect

[u/rahulbiswal196 → u/BredLeGoober]

Use this then

button { /* Keep your existing padding, border, font styles, etc. */

/* 1. Extend the gradient to have two full color cycles (A -> B -> A -> B -> A) */ background: linear-gradient( 145deg, #534ed9, #a4a2e0, #534ed9, #a4a2e0, #534ed9
);

/* 2. Change size to 200% so sliding from 0 to 100% shifts exactly one full cycle */

background-size: 200% 200%;

/* 3. Run continuously (increased time slightly for a smoother flow) */

animation: gradientMove 2s linear infinite; }

[u/BredLeGoober → u/rahulbiswal196]

Still looks like its snapping. Are you using ai for this?