Подскажите как настроить анимацию, чтобы она работала последовательно, верх-право-низ-лево. Не пойму как работает animation delay? Он как-то странно делей делает
.btn {
display: inline-block;
background-color: red;
width: 140px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 14px;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.025em;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.btn__line {
position: absolute;
display: block;
}
.btn__line--top {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #fff);
}
.btn__line--bottom {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #fff);
}
.btn__line--right {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #fff);
}
.btn__line--left {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(0deg, transparent, #fff);
}
.active-btn .btn__line--top {
animation: anim1 2s infinite;
animation-delay: 0s;
}
.active-btn .btn__line--right {
animation: anim4 2s infinite;
animation-delay: 1s;
}
.active-btn .btn__line--bottom {
animation: anim2 2s infinite;
animation-delay: 2s;
}
.active-btn .btn__line--left {
animation: anim3 2s infinite;
animation-delay: 3s;
}
@keyframes anim1 {
from {
left: -100%;
}
to {
left: 100%;
}
}
@keyframes anim2 {
from {
right: -100%;
}
to {
right: 100%;
}
}
@keyframes anim3 {
from {
bottom: -100%;
}
to {
bottom: 100%;
}
}
@keyframes anim4 {
from {
top: -100%;
}
to {
top: 100%;
}
}
<div class="bnt__box">
<a href="#" class="btn active-btn">
<span class="btn__line btn__line--top"></span>
<span class="btn__line btn__line--right"></span>
<span class="btn__line btn__line--bottom"></span>
<span class="btn__line btn__line--left"></span>
Demo
</a>
</div>