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
No description
5 Replies
ἔρως
ἔρως2mo ago
try a different easing function, like a bezier curve
MarkBoots
MarkBoots2mo ago
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
ἔρως
ἔρως5w ago
it will, in the middle just a tiny tiny bit
Chris Bolson
Chris Bolson5w ago
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.
SpecialK
SpecialK4w ago
ooh yeah, that's much better thanks!