style.css

.cat .avatar::before, .cat .avatar::after {
        content: "";
        display: inline-block;
        border: 4px solid;
        box-sizing: border-box;
        width: 50%;
        height: 50%;
        background-color: inherit;
        border-color: inherit;
        position: absolute;
        z-index: 0;
}

.cat .avatar {
        overflow: visible;
        border-radius: 100%!important;
}

.cat .avatar img {
        border-radius: 100%;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 1;
        position: absolute;
}

.cat .avatar::before {
        border-radius: 75% 0 75% 75%;
        transform: rotate(-37.6deg) skew(-30deg);
        top: 0;
        bottom: 0;
        right: 0;
}

.cat .avatar:hover::before {
    animation: earwiggleright 1s infinite;
}

.cat .avatar::after {
        border-radius: 0 75% 75%;
        transform: rotate(37.6deg) skew(30deg);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
}

.cat .avatar:hover::after {
    animation: earwiggleleft 1s infinite;
}

@keyframes earwiggleleft {
    from { transform: rotate(37.6deg) skew(30deg); }
    25% { transform: rotate(10deg) skew(30deg); }
    50% { transform: rotate(20deg) skew(30deg); }
    75% { transform: rotate(0deg) skew(30deg); }
    to { transform: rotate(37.6deg) skew(30deg); }
}

@keyframes earwiggleright {
    from { transform: rotate(-37.6deg) skew(-30deg); }
    30% { transform: rotate(-10deg) skew(-30deg); }
    55% { transform: rotate(-20deg) skew(-30deg); }
    75% { transform: rotate(-0deg) skew(-30deg); }
    to { transform: rotate(-37.6deg) skew(-30deg); }
}