.face {
    width: 100px;
    height: 100px;
    border: 2px solid black;
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
}

.eye {
    width: 20px;
    height: 20px;
    border: 2px solid black;
    border-radius: 50%;
    position: absolute;
    top: 20px;
}

.eye:first-child {
    left: 20px;
}

.eye:last-child {
    right: 20px;
}

.mouth {
    width: 40px;
    height: 20px;
    border: 2px solid black;
    border-radius: 50%/0 0 100% 100%;
    position: absolute;
    bottom: 20px;
    left: 30px;
    animation: talk 1s infinite;
}

@keyframes talk {
    0%, 100% {
        border-radius: 50%/0 0 100% 100%;
    }
    50% {
        border-radius: 50%/100% 100% 0 0;
    }
}