Note: If you used different class name, then change 'gradient-text' in this code to your class name. Keep in mind that CSS class names are case insensitive, and cannot contain a space. Meaning that class 'Div block 10' should be written as 'div-block-10' in this custom code.
Now to what the code does - it sets the background-size to 400% of the span; we then create a keyframe animation named ‘animate.’ it then moves the background linearly over a period of 10 seconds. This is what gives the effect that the color is infinitely changing.
As we can see, in the ‘animate’ keyframe, when at 0%, the background position is at 0%. At 100%, the background position is at 400%. So over a period of 10 seconds, the background position moves along the X-axis from 0% to 400%. We can modify the length of the animation by changing the 10s seen in the “.gradient-text” styling in the CSS.
And there we go! Publish your site to see the animation in action. I hope you enjoyed this tutorial. Stay tuned for more tips and tricks to make your Webflow website stand out from the crowd.