[ACCEPTED]-Moving dotted border using CSS-border

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

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

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>

0

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

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

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

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

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

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

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

0

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

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

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

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>

0

Do you mean you want to animate the dotted 4 border?

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

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