<section class="main">
        <div class="oval">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </div>
    </section>

// Global Styles

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

// Variables
$size: 20rem;
$duration: 3s;

// Main Styles

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

.oval  {
    display: flex;
    justify-content: center;
    align-items: center;

    li { 
    width: $size;
    height: $size;
    position: absolute;
    border: 2px solid palevioletred;  
    list-style-type: none;
    opacity: 0 ;
    animation: animation-name $duration linear infinite;    
    border-radius: $size;
    }    
}

@for $i from 1 through 10 {
    li:nth-child(#{$i}) {
        animation-delay: $i * ($duration / 10);
    }
}

@keyframes animation-name {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
        opacity: 0;
        border: solid 2px palevioletred;
    }

    50% {

        opacity: 1;
    }

    100% {

        transform: rotateX(90deg) rotateY(90deg);
        opacity:0;
        border: solid 4px palevioletred;
    }
}