Dashed border animation in css3 animation

Question

I saw this article http://tympanus.net/Tutorials/BorderAnimationSVG/

I want to add this in my WP blog. So that each new post div have this animation on its border. But problem is that its in SVG. Is there anyway i can make this animation work without using SVG and also i don't want to use javascript.

Lets say code is:

.go {    width: 900px;    height: 200px;    border: 8px dashed;  }

<div class="go"></div>

Answer 1

This much is possible with CSS and is pretty simple when using multiple backgrounds and changing their positions using animations.

.border {    height: 100px;    width: 200px;    background: linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%);    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;    background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;    background-position: 0px 0px, 212px 116px, 0px 116px, 216px 0px;    padding: 10px;    transition: background-position 2s;  }  .border:hover{      background-position: 212px 0px, 0px 116px, 0px 0px, 216px 116px;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>  <div class="border">Some text</div>

---

Here is a sample with continuous movement of the borders right from the page load.

.border {    height: 100px;    width: 200px;    background: linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%);    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;    background-size: 15px 4px, 15px 4px, 4px 15px, 4px 15px;    background-position: 0px 0px, 200px 100px, 0px 100px, 200px 0px;    padding: 10px;    animation: border-dance 4s infinite linear;  }  @keyframes border-dance {    0% {      background-position: 0px 0px, 300px 116px, 0px 150px, 216px 0px;    }    100% {      background-position: 300px 0px, 0px 116px, 0px 0px, 216px 150px;    }  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>  <div class="border">Some text</div>

Credits to web-tiki for helping to fix the slight distortion that was originally present at the end of each loop of the animation.