demo.scss

body {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    align-items: center;
}

.eyes {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;

    .eye {
        height: 200px;
        width: 200px;
        border-radius: 40%;
        margin: 5px;
        background: #faf9f7;
        box-shadow: 0 0 3px;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: row;

    .eye-retina {
        display: inline-block;
        width: 60%;
        height: 60%;
        background: #373737;
        border: #6CDDF8 2px solid;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    } // eye retina

    .eye-lash {
        position: absolute;
        height: 50%;
        background: orange;
        width: 100%;
        z-index: 1;
    } // eye lash

    .up {
        top: -50%;
        animation: blinkbottom 2s linear infinite;
    } // up

    .down {
        bottom: -50%;
        animation: blinktop 2s linear infinite;
    }

    @keyframes blinkbottom {
        0% {
            top: -50%;
        }
        5% {
            top: 0;
        }
        10% {
            top: -50%;
        }
    }

    @keyframes blinktop {
        0% {
            bottom: -50%;
        }
        5% {
            bottom: 0;
        }
        10% {
            bottom: -50%;
        } // 10%
    } // Blinktop
    } // Eye
    } // Eyes
/* Eyes */