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.

Is there any way to achieve this?

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.

Answer 2

Not CSS3, but it works: http://matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page

You can make it without images, by utlizing CSS3 gradients for the stripes and animating background-position (rough demo: http://codepen.io/christopheschwyzer/pen/CEwBI), but I wouldn't recommend it since it would only work well on Webkit.

Answer 3

I've made a complete example based on this article. Enjoy!

.outer {
  position: absolute;
  
  left: 100px;
  top: 50px;
  width: 100px;
  height: 100px;
  
  background-image: url(http://matthewjamestaylor.com/blog/selection.gif);
  
  border: 1px solid;
}

.selected {
  border: 0px;
}

.inner {
  position:absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;

  background-color: #9CF;
}

.selected .inner {
  margin: 1px;
}

<div class="outer selected">
  <div class="inner" />
</div>

Answer 4

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 5

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 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;
}

Collapsed to a snippet:

@keyframes marching-ants {
  0% {
    background-position: 0 0, 50px 100%, 0 50px, 100% 0;
  }
  100% {
    background-position: 50px 0, 0 100%, 0 0, 100% 50px;
  }
}

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

<div class="ants">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 7

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 8

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