Animating outline offsets

Is there a smoother way to animate the offset of an outline? It looks choppy.
No description
5 Replies
ἔρως2mo ago
try a different easing function, like a bezier curve
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: 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.
SpecialK4w ago
ooh yeah, that's much better thanks!