body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

.container {
    font-size: 10px;
    width: 30em;
    height: 30em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    transform: rotate(-135deg);
    animation: animate-rotate 10s infinite;
}

@keyframes animate-rotate {
    0%, 23% {transform: rotate(calc(-135deg + 90deg * 0));}
    25%, 47% {transform: rotate(calc(-135deg + 90deg * 1));}
    50%, 73% {transform: rotate(calc(-135deg + 90deg * 2));}
    75%, 97% {transform: rotate(calc(-135deg + 90deg * 3));}
    100% {transform: rotate(calc(-135deg + 90deg * 4));}
}

.container span {
    position: relative;
}

.container span::before,
.container span::after 
{
    content: '';
    position: absolute;
    box-sizing: border-box;
    border-style: none solid solid none;
    animation: 1.6s linear infinite;
    animation-name: animate-border-width, animate-border-color, animate-scale;
}

.container span::after {
    animation-delay: -0.8s;
}

@keyframes animate-border-width {
    0%, 100%{border-width: 0.1em;}
    25% {border-width: 1.5em;}
}

@keyframes animate-border-color {
    0%, 25% {border-color: tomato;}
    50%, 75% {border-color: gold;}
    100% {border-color: black;}
}

@keyframes animate-scale {
    from {width: 1%; height: 1%;}
    to {width: 100%; height: 100%;}
}