Dotted animation in css3 animation

Question

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

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

Let's say the code:

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

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

Answer 1

This is very possible with CSS and quite simple when using multiple backgrounds and changing their positions using animation.

 .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's an example with continuously moving 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 for web-tiki for helping to eliminate the minor distortions that were initially present at the end of each animation cycle.

Answer 2

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

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 3

based on harry's answer

it can animate all shapes of 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 4

This code is adapted from an answer written by @Harry, modified in response to a question sent by @dude that will work for divs of 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 5

Here is a way to do this without specifying the size of the element on which you want the rotating border:

 .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 is just a quick example, but it uses pseudo-effects to “move” the border on hover (note that keyframes will be more useful if you want 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> 

---

Best example

---

This may suit you better, as the animation will be easier to continue:

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