Different background animations on mouseenter and leave (#snippet)

I’m a sucker for beautiful interactions. When you’re browsing Codepen, you’ll find countless examples of people going wild adding fancy effects to elements:

a driving truck
a flying paper plane
3D elements showing up on hover

And …


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

I'm a sucker for beautiful interactions. When you're browsing Codepen, you'll find countless examples of people going wild adding fancy effects to elements:

And as much as I like that stuff, I'm hesitant to throw JavaScript onto something tiny like a hover link animation. And additionally, the options to transition an element purely with CSS are limited. Let's take :hover as an example, there are not many possibilities with two available states (hovered or not hovered). You define a hover state and revert it when the interaction is over. That's it.

Today I found a super smart trick explained by Geoff Graham. Geoff explains how to transition an element's background using pseudo-elements. The catch: the colored background "transitions in" from one side and moves out at another. I haven't seen this effect with pure CSS before. 😲

[Interactive component: visit the article to see it...]

How does that work? The trick is to define a different transform-origin. This is a super smart solution, and if you want to learn more, head over to CSS-Tricks to read Geoff's article.

This trick doesn't work if an element includes line breaks

As a quick side note: if you're planning to apply this effect to links in paragraphs, be aware that the used ::before pseudo-element won't span over line breaks.

This behavior is not a dealbreaker, but yeah... it's why I didn't apply this fancy effect to all my links. 🤷‍♂️


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate Updates
APA

Stefan Judis | Sciencx (2022-01-08T23:00:00+00:00) Different background animations on mouseenter and leave (#snippet). Retrieved from https://www.scien.cx/2022/01/08/different-background-animations-on-mouseenter-and-leave-snippet/

MLA
" » Different background animations on mouseenter and leave (#snippet)." Stefan Judis | Sciencx - Saturday January 8, 2022, https://www.scien.cx/2022/01/08/different-background-animations-on-mouseenter-and-leave-snippet/
HARVARD
Stefan Judis | Sciencx Saturday January 8, 2022 » Different background animations on mouseenter and leave (#snippet)., viewed ,<https://www.scien.cx/2022/01/08/different-background-animations-on-mouseenter-and-leave-snippet/>
VANCOUVER
Stefan Judis | Sciencx - » Different background animations on mouseenter and leave (#snippet). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/08/different-background-animations-on-mouseenter-and-leave-snippet/
CHICAGO
" » Different background animations on mouseenter and leave (#snippet)." Stefan Judis | Sciencx - Accessed . https://www.scien.cx/2022/01/08/different-background-animations-on-mouseenter-and-leave-snippet/
IEEE
" » Different background animations on mouseenter and leave (#snippet)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2022/01/08/different-background-animations-on-mouseenter-and-leave-snippet/. [Accessed: ]
rf:citation
» Different background animations on mouseenter and leave (#snippet) | Stefan Judis | Sciencx | https://www.scien.cx/2022/01/08/different-background-animations-on-mouseenter-and-leave-snippet/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.