I have the following classes using tailwind 3.4.17:

bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 bg-[length:400%_100%] animate-[gradientMove_2s_linear_infinite]

with keyframes:

'0%': { backgroundPosition: '0% 50%' },
'50%': { backgroundPosition: '100% 50%' },
'100%': { backgroundPosition: '0% 50%' },

I want an animation like:

pink -> purple -> blue -> purple -> pink

but I want the transition to always go from left to right. Currently it goes left to right but goes from right to left at the end, and repeats.

I have the following classes using tailwind 3.4.17:

bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 bg-[length:400%_100%] animate-[gradientMove_2s_linear_infinite]

with keyframes:

'0%': { backgroundPosition: '0% 50%' },
'50%': { backgroundPosition: '100% 50%' },
'100%': { backgroundPosition: '0% 50%' },

I want an animation like:

pink -> purple -> blue -> purple -> pink

but I want the transition to always go from left to right. Currently it goes left to right but goes from right to left at the end, and repeats.

• tailwind-css

1 Answer 1

You can just create a gradient of

pink -> purple -> blue -> purple -> pink

like so:

bg-linear-[to_right,pink_10%,purple_30%,blue_50%,purple_70%,pink_90%]

and then animate it left to right with keyframes:

@keyframes gradientMove {
  0% {
    background-position-x: left;
  }
  100% {
    background-position-x: right;
  }
}

Having animate-[gradientMove_2s_linear_infinite] causes it to repeat endlessly, if you want it to stop after the animation just replace with animate-[gradientMove_2s_linear_forwards]. This sets animation-fill-mode.

All together:

bg-linear-[to_right,pink_10%,purple_30%,blue_50%,purple_70%,pink_90%] bg-[length:400%_100%] animate-[gradientMove_2s_linear_forwards]