@keyframes blink {
    0% {
        transform: scale(1)
    }

    10% {
        transform: scale(1)
    }

    11% {
        transform: scaleY(.1)
    }

    12% {
        transform: scale(1)
    }

    30% {
        transform: scale(1)
    }

    31% {
        transform: scaleY(.1)
    }

    32% {
        transform: scale(1)
    }

    60% {
        transform: scale(1)
    }

    61% {
        transform: scaleY(.1)
    }

    62% {
        transform: scale(1)
    }

    to {
        transform: scale(1)
    }
}

@keyframes anim-sad {
    0% {
        transform: rotate(0deg)
    }

    49% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(0deg)
    }

    70% {
        transform: rotate(-10deg)
    }

    90% {
        transform: rotate(-10deg)
    }

    to {
        transform: translateX(0deg)
    }
}

.face {
    z-index: 1;
    margin: 30px auto 0;
    width: 30px;
    position: relative;
    border: 4px solid transparent;
    border-top-color: #666;
    border-radius: 50%;
    height: 30px;
    animation: anim-sad 5s infinite
}

    .face:after,
    .face:before {
        top: -20px;
        position: absolute;
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        animation: blink 10s infinite;
        animation-delay: 1.3s;
        background-color: #666
    }

    .face:before {
        right: 0
    }

    .face:after {
        left: 0
    }