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

Answer 1

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 2

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-animatioon {
    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-animatioon"></div>
<div class="size2 active-animatioon"></div>

Answer 3

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 4

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>

Answer 5

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 6

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>