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. See my 'Recent Essays' module below
note: gif is sped up for demonstration purposes
Neat, right? And fairly simple to accomplish. All we really need is CSS!
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.
Final result:
And there you have it - a nice, fluid animated gradient over text. Just another little fun design element courtesy of CSS.
Top comments (11)
If I remember correctly the background position is going to trigger a repaint. I found this cost to be rather innocent on a user transition, but I've had issues with animations across devices in terms of CPU performance. I'd be interested to know how this profiles and if there's anything that could be done to get the same animation effects without such a dramatic impact. Looks awesome though!!
Yeah - I have noticed that if I spam a page with links using this effect, my laptop fans start spinning like a jet engine. Been trying to figure out ways to handle this. Glad you enjoyed the post!
I did this exact same thing a few weeks ago on two sites I built for hover effects on certain links and elements - I really like the effect you can achieve with it. For the most part, it works pretty good with icon fonts too (though Safari was a bit hit-and-miss).
Yeah I noticed in Safari for iOS, if text wraps to a second line, the background does not clip to it - my poorly done work around was to hide my overflown text
Ahhhh my issue was with icon fonts specifically that the gradient never applied as I'm using gradients on icons heavily on my portfolio website.
What you might want to look at is
-webkit-box-decoration-break: clone;regarding the text wrapping onto a second line. 🙂Ahhh - this is awesome! I’m going to give it a shot later on today - thank you James!
I can't wait to try this out - thanks!
It's a really neat effect, I'm more than happy to share!
Simply amazing, thanks for sharing! This is kind out of scope of the article but what font did you choose to make the example?
Glad you liked it! And the font family I set for the text in the example is “HelveticaNeue-Light” - its clean and easy to read
Amazing and eye-catching effect...