Moving dotted border using CSS

Question

I have class that applies a dotted style border property to a text block at runtime. I am trying to find a solution, using CSS, that makes the border move like a gif image.

Answer 1

This depends on what exactly you want the animation to look like.

In general, the styles given to you by border-style are rendered statically; it's simply not possible to animate them.

Even with CSS3, your options are fairly limited. The best you can do with border-image is either with a carefully-crafted animated GIF (again, it would depend on how a browser implements border-image with animated images), or with a gradient animation — and whichever you choose depends on browser compatibility and how you want your effect to look.

Otherwise you can experiment with ::before and ::after pseudo-elements to achieve your desired effect.

As a word of warning, though, unless you can ensure your animation meets the relevant WCAG guidelines, in particular 2.2.2 and 2.3, I strongly advise against especially going for the animated-GIF look. On top of being dangerous to certain people, a poorly-crafted animation may turn out more annoying than helpful to most — this is what made animated GIFs so infamous back in the day.

In other words, use this technique sparingly, and only when you know it adds to the user experience rather than taking away from it.