CSS Gradient Wipe Animation

Revisiting @keyframes

It occurs to me that in the previous article on animation I didn't go into much depth about what @keyframes actually did. Well, no longer, time to explain.

Keyframes in an animation are basically prefined points in an animation that have certain variables attached and thus allow a computer to calculate what's in between. In CSS, keyframes are determined in terms of how much of the animation has completed, in percent, and placed the keyframes in an @keyframes query with the name of the animation. You can also use "from" for 0% and "to" for 100% if those are your only keyframes. For example:

@keyframes animation-name {
    from {
        color: #bada55;
    }
    to {
        color: #0ff1ce;
    }
}

A WebKit-only feature

The feature we're going to use is exclusive to WebKit (Safari) and Blink (Chrome).

There are two CSS properties here - background-clip and text-fill-color.

Let's make a class:

.animated {
font-family: Raleway, sans-serif;
font-weight: bold;
font-size: 4em;
background: radial-gradient(circle farthest-corner, yellow, red);  text-align: center;
background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
}

This class has text whose color is a radial gradient from yellow to red. Both -webkit- and non--webkit- versions are essential here as a future-proofing measure.

Just one keyframe!

Luckily, you'll only need one keyframe here:

@keyframes colorfultext {
to {
background-position: 200% center;
}
}

In order to enable the animation, add the following lines to your CSS class:

    background-size: 200% auto;
    animation: colorfultext 2s linear infinite;

The resulting code will be something like this and the result is here.

@keyframes colorfultext {
to {
background-position: 200% center;
}
}
.animated {
font-family: Raleway, sans-serif;
font-weight: bold;
font-size: 4em;
animation: colorfultext 2s linear infinite;
background: radial-gradient(circle farthest-corner, yellow, red);  text-align: center;
background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
background-size: 200% auto;
color: #000;
}