a “Now I need ::before to change on hover.” Gotta put the background on that instead and position it directly under the link. Plus, it means starting with scaleX(0) which hides the whole dang thing by default making it unusable.īut a pseudo-element could work! It doesn’t matter if that gets squished or hidden because it isn’t part of the actual content. Going from scaleX(0) to scaleX(1) scales the entire element, so that basically squishes the link - content and all - down to nothing, then stretches it back out to its natural size which is a totally different effect. Or, in this case, just along the x-axis with scaleX().īut like I mentioned, there isn’t a way to isolate the element’s background to do that. For example, the background can “grow” or “shrink” by changing the element’s scale(). The transform property provides a bunch of functions that can transition together for slightly more complex movement. My next attempt was jump into transforms. I could make it do one or the other, but not both. The transtion can only be applied to animatable properties.
Make sure that the transition property is on the element itself and not on the element’s trigger state (eg :hover or :focus ). The problem is there’s nothing that can really make the background-position transition from left-to-right to left-to-right. Steps to fix CSS transition not working issues: Check that the syntax of your CSS transition property is correct. If I could do the same thing, only from left-to-right, then all that’s left is the mouse-out, right? Nope. I’ve done that myself on some projects, like this: That’s how I’ve seen that “growing” background color thing done in the past. Define the background-color, set the background-size and background-position, then transition the background-position. “I bet that’s using a transition on a background.” Quite elegant! I’m actually a little embarrassed how long it took me to realize how the mouse-out part works. And it’s not super complex or anything, but rather a clever use of transitions and transforms paired with proper offsets. Whatever the case, I fired up a fresh pen and went to work recreating it. It’s exactly the sort of behavior I’d expect from a mouse-in, mouse-out sort of interaction. I think it might be how contextually accurate it is in that the background color slides in from the left, then exits out through the right. There’s something about this that feels so app-like. I must’ve spent 10 minutes just staring at the demo in awe.
0 kommentar(er)
