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 ...
For further actions, you may consider blocking this person and/or reporting abuse
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...