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

you can use a gif image in the background, the only solution for doing it via css. otherwise your javascript

Answer 2

Do you mean you want to animate the dotted border?

You could look into CSS 3 border images, which would allow you to provide an (animated) gif for your border, if you don't mind not supporting IE.

Answer 3

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.

Answer 4

Here are two examples using border-image.

Advantages :

• Only one div
• Inside can be truly transparent

.selected {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50px;

  border: 1px solid transparent;
  box-sizing: border-box;

  border-image-outset: 0px;
  border-image-repeat: repeat;
  border-image-source: url("http://matthewjamestaylor.com/blog/selection-big.gif");
}

.v1 {
  left: 100px;

  border-image-slice: 6;
  border-image-width: 1px;
}

.v2 {
  left: 300px;

  border-image-slice: 3;
  border-image-width: 2px;
}

<p style="color: #aaa;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquam metus hendrerit venenatis placerat. Morbi sem ex, egestas at egestas iaculis, imperdiet in mauris. Nulla facilisi. Aliquam eu porttitor libero, vel porta ipsum. Proin egestas consequat urna, et rhoncus arcu congue vitae. Maecenas at massa mollis, accumsan mauris in, faucibus ligula. Nulla sed lorem pharetra lacus dictum lobortis sit amet id tellus. Vestibulum porta auctor maximus. Fusce congue, orci et feugiat ultricies, turpis mi egestas est, nec vulputate nulla risus quis lorem. Sed vitae risus rhoncus, ultricies nunc non, mollis mauris.</p>

<div class="selected v1">
</div>

<div class="selected v2">
</div>

Answer 5

I'm also looking for such a solution since I'm trying to simulate the animated border that excel uses to indicate that the current selection has been cut and is waiting to be pasted.

Tacky? No, not in the context of the use I intend.

I found this jQuery plugin. http://there4development.com/projects/animatedborder/, the orginal poster might want to give it a go.

Answer 6

Here's a pretty flexible SCSS option:

$antlength: 50px;
$antwidth: 10px;
$antcolor: black;

@keyframes marching-ants {
    0%   {background-position: 0 0, $antlength 100%, 0 $antlength, 100% 0;}
    100% {background-position: $antlength 0, 0 100%, 0 0, 100% $antlength;}
}

.ants {
    background-image: linear-gradient(90deg, $antcolor 50%, transparent 50%),
        linear-gradient(90deg, $antcolor 50%, transparent 50%),
        linear-gradient(0, $antcolor 50%, transparent 50%),
        linear-gradient(0, $antcolor 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: $antlength $antwidth, $antlength $antwidth, $antwidth $antlength, $antwidth $antlength;
    animation: marching-ants 400ms infinite linear;
}