Border hover animation reversing
Hi, I'd like to reverse my animation when hovering off the element, and not that it disappears without transition like now.
Also the animation is weird and glitchy, can't figure out why..
https://codepen.io/axl-prudhomme/pen/XWOayoN?editors=1100
17 Replies
How could I make this animation smoother and reverse the animation when I hover off the element?
or is there a different approach ?
how about you use a transition instead?
I use the transition rule
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
you are
you're also using
ease-outchanged it to ease-in-out
but still the same
it just disappears
i tried linear, and yeah, it didnt work
it should, i think
yeah, I specify in the transition the width and height, so it should go back to default in a transition
should I make it a different way? so it's less chunky and all?
you can try with a giant radial background for a ::before, with transparent borders
or a different effect
wow, how'd I start with the radial background? xD
what do you mean?
how would I make that
with a conic-gradient on the before and an @propery to transition a custom property.
But,... @property is relative new. Support is not 100% (firefox is about to ship it soon)
yup, i didnt had the @property in mind, but i had the gradient in mind
you did a fantastic job, and made it configurable
Wow, that's quite cool. Thanks!
I'll look into that
we could even do it without the before element
(removed codepen, see backup below)
that's a lot better
removed the codepen, here a backup for future reference