@keyframes penguin-animation-keyframes {
    0% {
        background-image: url("frame1.svg");
    }

    40% {
        background-image: url("frame1.svg");
    }

    41% {
        background-image: url("frame2.svg");
    }

    50% {
        background-image: url("frame2.svg");
    }

    51% {
        background-image: url("frame3.svg");
    }

    100% {
        background-image: url("frame3.svg");
    }
}

.penguin-animation {
    background-repeat: no-repeat;
    background-size: contain;
    animation: penguin-animation-keyframes 4s infinite linear;
    width: 100%;
    aspect-ratio: 10 / 7;
}

/* workaround for preloading frames to prevend flicker */
.penguin-animation:after {
    visibility: hidden;
    position: absolute;
    z-index: -1;
    width: 0;
    height: 0;
    content: url("frame1.svg") url("frame2.svg") url("frame3.svg");
}