<section class="main">
        <div class="main__content">
            <i></i>
            <i></i>
        </div>
    </section>
// Global Styles

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

// Main Styles

.main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #161616;


    i {
        width: 4rem;
        height: 4rem; 
        position: absolute;
        border: .25rem solid slateblue;

        &:nth-child(1) { 
            animation: borderAnimation 2s cubic-bezier(.68,.12,0,.99) forwards infinite;
        }
        
        &:nth-child(2) {
            border-color: salmon;
            animation: borderAnimation -3s 2s cubic-bezier(.68,.12,0,.99) forwards infinite;
        }
    }
}

@keyframes borderAnimation {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        box-shadow: 4px 8px 16px rgba($color:#000, $alpha:0.6);
    }

    50% {
        transform: scale(2) rotate(90deg);
        box-shadow: inset 4px 8px 16px rgba($color:#000, $alpha:.6);
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.