CSS animations are awesome. Not only do they make great digital art pieces, they also give us the ability to add fluid design elements, right into our web pages. Recently, I integrated a CSS gradient animation in many of my blog links to give them a living, liquid feel to them.
Let’s deconstruct it
So first thing in my CSS is the animation rules.
Here, I’m saying – play the animation named flow for a duration of 30 seconds. Set the animation to ease in and out for a smoother effect, and have the animation loop for an infinite number of times.
Then there are the background rules.
I set my background to be a linear-gradient and give it my desired colors. For beautiful gradients I use often UI Gradients when I can’t come up with anything nice. I then stretch out the background to 300% the size using the background-size property to give the animation room to move.
I then set the background-clip to be text and set the text-fill-color to be transparent so my default font color doesn’t interfere with my gradient.
Now on to the actual animating. I create a keyframe animation named flow and set up keyframes at the zero, fifty, and one-hundred percent marks.
And there you have it – a nice, fluid animated gradient over text. Just another little fun design element courtesy of CSS.