To animate our gradient background, we need to make it bigger than the text's content box so we can't see all of it at once. We can do that with the handy background-size property. I'm going to set the width of our background gradient to three times the width of our heading element.
Next, we'll set up an animation that will move the background around so that we'll see different parts of it over time. We can set up a simple animation rule that will move the background back and forth once every 16 seconds.
This simple @keyframes statement will move our background from the top left to the bottom right every eight seconds.
In our article on adding gradient effects and patterns to text, we also used a floral background image. Let's have a go at animating that background too.
[
add
]
[
|
|
...
]