Marching ant border using a GIF - css

Question

I know there's a way to do marching ants with linear-gradients but it eats a huge amount of CPU (about 10% for each one). I am trying to make an alt solution but find border-image-slice confusing.
Here is the outdated tutorial I'm using: http://www.chrisdanford.com/blog/2014/04/28/marching-ants-animated-selection-rectangle-in-css/
I've removed the obsolete css but I'm not sure how to slice the image so that the ants are marching. The tut says:
We’ll start with a 10px x 10px animated gif that is composed of nine
tiles: 1×1 in the corners, 1×8 or 8×1 on the edges, and 8×8 in the
center.
body {
background-color: green;
}
.box {
width: 200px;
height: 200px;
background-color: black;
}
.marching {
border: 1px solid transparent;
border-image-source: url('https://i.imgsafe.org/e5bc19b03a.gif');
border-image-slice: 1;
border-image-repeat: stretch stretch;
}
<div class="box marching"></div>
Thanks

Answer 1

The background should repeat, not stretch. Is this what you're going for?
body {
background-color: green;
}
.box {
width: 200px;
height: 200px;
background-color: black;
}
.marching {
border: 1px solid transparent;
border-image-source: url('https://i.imgsafe.org/e5bc19b03a.gif');
border-image-slice: 1;
border-image-repeat: repeat repeat;
}
<div class="box marching"></div>

Answer 2

Here is CSS version I found, how does it compare with the others when it comes to CPU usage?
body { background: green; }
.box {
position: relative;
width: 90px;
height: 90px;
overflow: hidden;
margin: 10px;
background: black;
}
.box * {
position: absolute;
}
.box div {
width: 100%;
height: 100%;
}
.box div:nth-child(1) { transform: rotate( 0deg ); }
.box div:nth-child(2) { transform: rotate( 90deg ); }
.box div:nth-child(3) { transform: rotate( 180deg ); }
.box div:nth-child(4) { transform: rotate( 270deg ); }
.box i {
left: 0;
top: 0;
width: 200%;
border-bottom: 1px dashed white;
}
.box i {
animation: marching 4s infinite linear;
}
#keyframes marching {
from { transform: translateX( -50% ); }
to { transform: translateX( 0% ); }
}
<div class="box">
<div><i></i></div>
<div><i></i></div>
<div><i></i></div>
<div><i></i></div>
</div>
Src: https://jsfiddle.net/desandro/zm7Et/

Answer 3

Is there any reason why you're not using a canvas?
The Canvas element has a lineDashOffset property that is often used for marching ant effects:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
If you're planning on using a GIF it looks as though scaling isn't something you're worried about, so maybe a canvas might be a better way to do it. Buffer-canvases might also be used to improve performance.