Trying to create a div with animated borders, but it only works when positioned absolutely in the center. For illustration, here is the HTML and CSS code:
.bb,
.bb::before,
.bb::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.bb {
width: 200px;
height: 200px;
margin: auto;
color: #69ca62;
box-shadow: inset 0 0 0 1px rgba(105, 202, 98, .5);
}
.bb::before,
.bb::after {
content: '';
z-index: -1;
margin: -5%;
box-shadow: inset 0 0 0 2px;
animation: clipMe 8s linear infinite;
}
.bb::before {
animation-delay: -4s;
}
.bb:hover::after,
.bb:hover::before {
background-color: rgba(255, 0, 0, .3);
}
@keyframes clipMe {
0%,
100% {
clip: rect(0px, 220px, 2px, 0px);
}
25% {
clip: rect(0px, 2px, 220px, 0px);
}
50% {
clip: rect(218px, 220px, 220px, 0px);
}
75% {
clip: rect(0px, 220px, 220px, 218px);
}
}
html,
body {
height: 100%;
}
body {
position: relative;
background-color: #0f222b;
}
*,
*::before,
*::after {
box-sizing: border-box;
}<div class="bb"></div>Facing an issue where I require flexibility for positioning this element wherever needed. When trying to move it away from the center, the animation stops working.
Works correctly when centered: https://jsfiddle.net/uydkwb8f/
Removing the positioning causes it to fail: https://jsfiddle.net/uydkwb8f/1/
Seeking advice on making this design flexible without depending on specific positioning configurations.