:root {
    --anime-time: 8s;
    --box-size: 500px;
    --clip-distance: .05;
    --clip-size: calc(var(--box-size) * (1 + var(--clip-distance) * 2));
    --path-width: 2px;

    --box-width: 500px;
    --box-heigth: 70px;
    --clip-width: calc(var(--box-width) * (1 + var(--clip-distance) * 2));
    --clip-heigth: calc(var(--box-heigth) * (1 + var(--clip-distance) * 2));
}

.bb::before,
.bb::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
}

.bb {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /*padding-top: 0.5em;*/

    width: var(--box-width);
    max-width: 100%;
    height: var(--box-heigth);
    margin: auto;
    /*box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);*/
}

.bb::before,
.bb::after {
    height: var(--clip-heigth);
    /*xx*/
    color: #69ca62;
    content: "";
    z-index: -1;
    /*margin: -4%; /*odstęp linia-border*/
    box-shadow: inset 0 0 0 2px;
    animation: clipMe 8s linear infinite;
}

.bb::before {
    animation-delay: -4s;
}

/*for debug*/
.bb:hover::after,
.bb:hover::before {
    background-color: rgba(255, 0, 0, 0.3);
}

@keyframes clipMe {
    0%,100% {clip: rect(0px, var(--clip-size), var(--path-width), 0px);}
        25% {clip: rect(0px, var(--path-width), var(--clip-heigth), 0px);}
        50% {clip: rect(calc(var(--clip-heigth) - var(--path-width)), var(--clip-size), var(--clip-heigth), 0px);}
        75% {clip: rect(0px, var(--clip-size), var(--clip-heigth), calc(var(--clip-size) - var(--path-width)));}
}