How one can Animate Textual content Gradients and Patterns in CSS — SitePoint

On this fast tip, we’ll present how straightforward it’s to animate a background gradient with CSS.

In a latest article, we confirmed tips on how to set a background gradient on textual content. The CodePen demo beneath reveals the outcome.

Be sure that to learn by way of that article if you happen to’re unsure how we acquired to this outcome, as we’ll construct on this instance beneath.

For the sake of this demo, let’s add in some additional colours to our gradient background:

h1 {
  background-image: linear-gradient(
    45deg,
    #ffb3ba,
    #c49c6e,
    #bfbf76,
    #77b084,
    #ff7e74,
    #3b82f6,
    #c084fc,
    #db2777
   );
}

If we flip off background-clip: textual content and text-color: clear for a second, we get a greater sense of how our gradient fills the textual content’s content material field.

Let’s now undergo the steps of animating our background gradient.

Step 1: Adjusting the Background Measurement

To animate our gradient background, we have to make it larger than the textual content’s content material field so we are able to’t see all of it directly. We are able to try this with the helpful background-size property. (You possibly can learn all about background-size right here.)

I’m going to set the width of our background gradient to a few instances the width of our heading component:

h1 {
  background-size: 300% 100%;
}

Now, solely a 3rd of the gradient background shall be seen at anyone time, as seen beneath.

Step 2: Setting an Animation

Subsequent, we’ll arrange an animation that can transfer the background round in order that we’ll see totally different elements of it over time.

We are able to arrange a easy animation rule like so:

h1 {
  animation: gradientAnimation 8s linear infinite;
}

That may transfer the background forwards and backwards as soon as each 16 seconds.

Subsequent, we’ll arrange an @keyframes assertion:

@keyframes gradientAnimation {
  0% {
    background-position: 0;
  }
  to {
    background-position: 100%;
  }
}

This easy @keyframes assertion will transfer our background from the highest left to the underside proper each eight seconds.

Within the Pen beneath, we’ve as soon as once more disabled background-clip: textual content and shade: clear so we are able to see what’s taking place within the background.

As soon as we re-enable background-clip: textual content and shade: clear, we see the completed product.

Fairly cool!

Animating a Background Picture

In our article on including gradient results and patterns to textual content, we additionally used a floral background picture. (See the Pen for that right here.)

Let’s have a go at animating that background too. We’ll do it barely in another way, as we don’t wish to distort the background picture.

Let’s take away background-size: comprise from the unique demo and never set a background measurement in any respect. That leaves us with this:

h1 {
  shade: clear;
  -webkit-background-clip: textual content; 
  background-clip: textual content; 
  background-image: url(floral.jpg);
  -webkit-text-stroke: 1px #7512d7;
  text-stroke: 1px #7512d7;
  animation: gradientAnimation 20s linear infinite;
  animation-direction: alternate;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0;
  }
  to {
    background-position: 100%;
  }
}

The result’s proven within the CodePen demo beneath.

Strive turning off background-clip: textual content and text-color: clear for a second if you wish to see what’s taking place within the background.

Our background picture is repeating by default, which doesn’t look too unhealthy for this explicit picture. (Simply out of curiosity, attempt including background-repeat: no-repeat to see what what occurs and not using a repeating background.) In different conditions, the place the background picture doesn’t tile so nicely, you may wish to forestall the picture repeating after which use background-size to make the picture bigger, like we did with the gradient background above. For instance:

h1 {
  background-repeat: no-repeat;
  background-size: 120%;
}

Right here’s the impact of doing that on our floral demo.

Conclusion

We might do way more spectacular animations that this, however the goal was to maintain it easy right here. You possibly can dig deeper into CSS keyframes and animations in How one can Get Began with CSS Animation. You too can mess around with the timing of the animation, angle of the gradient and so forth.

As talked about within the earlier article, have enjoyable with this however don’t go overboard, as an excessive amount of of this sort of animation can turn out to be annoying. A delicate animated background on a heading may simply add that contact of curiosity or intrigue you’ll want to hold your viewers engaged.