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

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.