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>