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

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

<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.

Answer 2

Has no-one heard of CSS variables! these make the code far easier to understand AND their values can easily be tweaked. In the example below, the border color is changed on hover, but you could tweak any CSS variable!

.border-dance-container {
  box-sizing: border-box;
  background-color: #d5e2ed;
  height: 100px;
}

:root {
  --bd-gap-and-dash-length: 10px;
  --bd-border-width: 2px;
  --bd-border-color: blue;
  --bd-dash-percent: 70%;
  --bd-speed: 300px;
}

.border-dance {
  height: 100%;
  background: linear-gradient(90deg, var(--bd-border-color) var(--bd-dash-percent), transparent calc(100% - var(--bd-dash-percent))),
  linear-gradient(90deg, var(--bd-border-color) var(--bd-dash-percent), transparent calc(100% - var(--bd-dash-percent))),
  linear-gradient(0deg, var(--bd-border-color) var(--bd-dash-percent), transparent calc(100% - var(--bd-dash-percent))),
  linear-gradient(0deg, var(--bd-border-color) var(--bd-dash-percent), transparent calc(100% - var(--bd-dash-percent)));
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: var(--bd-gap-and-dash-length) var(--bd-border-width), var(--bd-gap-and-dash-length) var(--bd-border-width), var(--bd-border-width) var(--bd-gap-and-dash-length), var(--bd-border-width) var(--bd-gap-and-dash-length);
  background-position: 0 0, var(--bd-speed) 100%, 0 var(--bd-speed), 100% 0;
  animation: border-dance 10s infinite linear;
}

.border-dance:hover {
  --bd-border-color: green;
  animation: none;
}

@keyframes border-dance {
  0% {}
  100% {
    background-position: var(--bd-speed) 0, 0 100%, 0 0, 100% var(--bd-speed);
  }
}

<div class="border-dance-container">
  <div class="border-dance"></div>
</div>

<span>Hover above</span>

Answer 3

based on answer of harry

this can animate all shapes with all sizes

   div {
margin: 10px;
}

.size1 {
background: black;
width: 100px;
height: 100px;
}

.size2 {
background: black;
width: 300px;
height: 100px;
}


.active-animation {
background-image: linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%);
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
background-position: left top, right bottom, left bottom, right top;
animation: border-dance 1s infinite linear;
}

@keyframes border-dance {
0% {
    background-position: left top, right bottom, left bottom, right top;
}

100% {
    background-position: left 15px top, right 15px bottom, left bottom 15px, right top 15px;
}
}

<div class="size1 active-animation"></div>
<div class="size2 active-animation"></div>

Answer 4

Animating a pseudo-element worked better for my round button:

.border {
    position: relative;
    border: 0;
    height: 4rem;
    width: 4rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.border:before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 100%;
  border: 2px dashed limegreen;
  animation: rotate 20s linear infinite;
}
  
@keyframes rotate {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}

<div class="border"> hello </div>

Answer 5

Here's a way to do it without having to specify the size of the element you want the rotating border on:

.rotating-border {
  width: max-content;
  background: linear-gradient(90deg, purple 50%, transparent 50%), linear-gradient(90deg, purple 50%, transparent 50%), linear-gradient(0deg, purple 50%, transparent 50%), linear-gradient(0deg, purple 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 15px 4px, 15px 4px, 4px 15px, 4px 15px;
  padding: 10px;
  animation: border-dance 4s infinite linear;
}

@keyframes border-dance {
  0% {
    background-position: 0 0, 100% 100%, 0 100%, 100% 0;
  }
  100% {
    background-position: 100% 0, 0 100%, 0 0, 100% 100%;
  }
}

<div class="rotating-border">Hello World</div>

Answer 6

This code is adapted from the answer written by @Harry, modified in response to the question posted by @dude, that will work for a div with any width and height.

.box
{
  position: absolute;
  left: 20px;
  top: 20px;
  width: 150px;
  height: 150px;
}

.dashed 
{
  background: 
    linear-gradient(90deg, blue 50%, transparent 50%),
    linear-gradient(0deg, blue 50%, transparent 50%),
    linear-gradient(90deg, blue 50%, transparent 50%),
    linear-gradient(0deg, blue 50%, transparent 50%);
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-size: 15px 4px, 4px 15px, 15px 4px, 4px 15px;
  background-position: left top, right top, left bottom, left top;
  padding: 4px;
  animation: border-dance 4s infinite linear;
}
	
@keyframes border-dance 
{
  0%
  {
    background-position: left top, right top, right bottom, left bottom;
  }
  100% 
  {
    background-position: right top, right bottom, left bottom, left top;
  }
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel volutpat ante, eu convallis turpis. Cras sit amet est diam. Suspendisse non lectus faucibus, egestas enim quis, feugiat sapien. Nulla pellentesque, risus sit amet ultrices congue, nisl
ante semper est, in tempor eros augue quis tellus. Morbi venenatis varius eros sit amet dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed lobortis sit amet lacus quis tincidunt. Curabitur nibh ex,
imperdiet sit amet sem a, ornare vehicula ipsum. Quisque vitae dui dignissim, viverra enim et, porta risus. Pellentesque pharetra at neque eu efficitur.
<div class="box dashed"></div>

Answer 7

This is only a quick example, but it's using pseudo effects to 'move' the border on a hover (note. keyframes would be more beneficial if you wanted to 'continue' the effect)

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

.go:hover:before{
  content:"";
  position:absolute;
  height:100%;
  width:100%;
  top:-8px;
  left:-8px;
  border: 8px solid black;
  }

.go:hover:after{
  content:"";
  position:absolute;
  height:100%;
  width:100%;
  top:-8px;
  left:-8px;
  border: 8px dashed white;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="go">hover then 'unhover' to see effect</div>

---

A better example

---

This might suit you better since, the animation would be easier to continue too:

.bord {
  height: 300px;
  width: 300px;
  position: relative;
  overflow: hidden;
}
.spinner {
  position: absolute;
  height: 90%;
  width: 90%;
  background: black;
  top: 5%;
  left: 5%;
  transition: all 0.4s;
}
.go {
  position: absolute;
  height: 90%;
  width: 90%;
  background: white;
  top: 5%;
  left: 5%;
}
.bord:hover .spinner {
  transform: rotate(90deg);
  height: 300px;
  width: 300px;
  top: 0;
  left: 0;
}

<div class="bord">
  <div class="spinner"></div>
  <div class="go">hover me!</div>
</div>

Answer 8

With pure CSS you can use repeating-linear-gradient to draw the dots on the background, set the transition and on hover move the background.

Sample css code:

.animationBorder {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 12px;
  width: 200px;
  height: 200px;
  color: black;
  font-size: 20px;
}
.animationBorder:hover .background {
  background-position: 100px 0;
}
.background, .content {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
.background {
  transition: 1200ms;
  background-color: black;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #ffffff 10px, #ffffff 20px);
  background-size: 30px;
}
.content {
  transition: 200ms;
  margin: 1px;
  line-height: 200px;
  text-align: center;
  background-color: white;
}

Demo:

.animationBorder {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 12px;
  width: 200px;
  height: 200px;
  color: black;
  font-size: 20px;
}
.animationBorder:hover .background {
  background-position: 100px 0;
}
.background, .content {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
.background {
  transition: 1200ms;
  background-color: black;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #ffffff 10px, #ffffff 20px);
  background-size: 30px;
}
.content {
  transition: 200ms;
  margin: 1px;
  line-height: 200px;
  text-align: center;
  background-color: white;
}

<span class="animationBorder">
  <div class="background"></div>
  <div class="content">My post</div>
</span>