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

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 2

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>