.demo-block {
    height: 400px;
    background-color: #e3e3e3;
}

.girl * {
    position: absolute;
    display: block;
    cursor: pointer;
    mix-blend-mode: multiply;
    opacity: 0;
    top: calc(50% - 195px);
    left: calc(50% - 260px);
    transform-origin: top left;
    transform: scale(0.65);
}


/*
.girl:hover #frame0 {
    opacity: 0;
}

.girl:hover #frame1 {
    animation: animate 1.5s step-end infinite;
}

.girl:hover #frame2 {
    animation: animate 1.5s step-end 0.1s infinite;
}

.girl:hover #frame3 {
    animation: animate 1.5s step-end 0.2s infinite;
}

.girl:hover #frame4 {
    animation: animate 1.5s step-end 0.3s infinite;
}

.girl:hover #frame5 {
    animation: animate 1.5s step-end 0.4s infinite;
}

.girl:hover #frame6 {
    animation: animate 1.5s step-end 0.5s infinite;
}

.girl:hover #frame7 {
    animation: animate 1.5s step-end 0.6s infinite;
}

.girl:hover #frame8 {
    animation: animate 1.5s step-end 0.7s infinite;
}

.girl:hover #frame9 {
    animation: animate 1.5s step-end 0.8s infinite;
}

.girl:hover #frame10 {
    animation: animate 1.5s step-end 0.9s infinite;
}

.girl:hover #frame11 {
    animation: animate 1.5s step-end 1s infinite;
}

.girl:hover #frame12 {
    animation: animate 1.5s step-end 1.1s infinite;
}

.girl:hover #frame13 {
    animation: animate 1.5s step-end 1.2s infinite;
}

.girl:hover #frame14 {
    animation: animate 1.5s step-end 1.3s infinite;
}

.girl:hover #frame15 {
    animation: animate 1.5s step-end 1.4s infinite;
}
*/

@keyframes animate {
    0%,
    100% {
        opacity: 1;
    }
    /* time of 1 frame (0.1 seconds from 1.5 seconds) */
    6.667% {
        opacity: 0;
    }
}