Animating outline offsets
Is there a smoother way to animate the offset of an outline? It looks choppy.
https://codepen.io/night_shift/pen/wvZNxBV
5 Replies
try a different easing function, like a bezier curve
i don't even know an easing would matter much (visualy) on such a short transition-duration (0.1 s/ 0.2s). maybe just make it linear
it will, in the middle
just a tiny tiny bit
Not really an answer to your question but you could try animating a different property to achive the same effect.
For example adding a pseudo element with a border and animating that.
A quick demo: https://codepen.io/cbolson/pen/ZEZPaZX
The difference is minor but noticeable, especially on mouseout.
I have added a --speed custom property. Interestingly, if you slow it down to something like 5 seconds you can see that the offset transition appears to shrink and then expand again in small steps.
In my second version, using the pseudo element, you still get the steps (when slowed down) but it doesn't get the small increase between each step. I presume this is why it looks smoother.
In my second version, using the pseudo element, you still get the steps (when slowed down) but it doesn't get the small increase between each step. I presume this is why it looks smoother.
ooh yeah, that's much better
thanks!