<body>
    <section class="main">
        <div class="main__content">
            <i>
                <div>
                    <li>d</li>
                    <li>d</li>
                    <li>d</li>
                </div>
            </i>
            <i>
                <div>
                    <li>o</li>
                    <li>o</li>
                    <li>o</li>
                </div>
            </i>
            <i>
                <div>
                    <li>w</li>
                    <li>w</li>
                    <li>w</li>
                </div>
            </i>
            <i>
                <div>
                    <li>n</li>
                    <li>n</li>
                    <li>n</li>
                </div>
            </i>
            <i>
                <div>
                    <li>l</li>
                    <li>l</li>
                    <li>l</li>
                </div>
            </i>
            <i>
                <div>
                    <li>o</li>
                    <li>o</li>
                    <li>o</li>
                </div>
            </i>
            <i>
                <div>
                    <li>a</li>
                    <li>a</li>
                    <li>a</li>
                </div>
            </i>
            <i>
                <div>
                    <li>d</li>
                    <li>d</li>
                    <li>d</li>
                </div>
            </i>
        </div>
    </section>
// Global Styles

* {
    margin: 0;
    padding: 0;
}

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

// Placeholders

%flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
// Main Styles

.main {
    width: 100%;
    height: 100%;
    background: #161616;
    @extend %flex-center;

    &__content {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin: 0 2rem;
        cursor: pointer;

        i {
            position: relative;
            width: 4rem;
            height: 4rem;
            border: 1px solid #161616;
            overflow: hidden;

            div {
            position: relative;
            width: 100%;
            height: 100%;
            animation: div-animation 4s ease-in-out forwards infinite;
            
            @keyframes div-animation {
                0% {
                    top: 0;
                }

                33% {
                    top: 4rem;
                }

                66% {
                    top: 8rem;
                }

                100% {
                    top: 8rem;
                }
            }
        }

            li {
                position: absolute;
                width: 100%;
                height: 100%;
                list-style: none;   
                font-family: 'Space Mono', monospace;
                font-size: 1.125rem;
                text-transform: uppercase;
                font-style: normal;
                color: #fff;
                @extend %flex-center;
                background: rebeccapurple;

                &:first-child {
                    top: -4rem;
                    background: pink;

                }

                &:nth-child(2) {
                    top: -8rem;
                    background: rebeccapurple;
                }
            }
        }
    }
}

@for $i from 1 through 8 {
    i:nth-child(#{$i}) {
        div {
            animation-delay: $i * .1s;
        }
    }

    i:nth-child(#{$i}) {
        div {
            li:nth-child(1) {
                background: lighten($color: #c73263, $amount: $i*2);
            }
            
            li:nth-child(2),
            li:nth-child(3) {
                background: darken($color: slateblue, $amount: $i*2);
            }
        }
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.