Dashed border animation in css3 animation
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>
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.
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>
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>