Animate PNG file with css

<div class="animatediv"></div>

<style>
    .animatediv{

        background-color: #ccc;
        margin: 0 auto;



        /*width and height of one frame */
        width: 951px;
        height: 979px;


        /*load background image of the combine photo */

        background-image: url('https://www.jaybranding.com/wp-content/uploads/2022/09/x-men-animate.png');


        /*play video, replace the number 7 with the number of photos combined */
        animation: play 1s steps(7) infinite;


    }

    @keyframes play {
        from { background-position:    0px; }
        /*replace with the width of the image */
        to { background-position: -6657px; }
}
</style>