Animate PNG file with css

 <style> .animatediv{ width: 951px; height: 979px; background-color: #ccc; margin: 0 auto; background-image: url('/media/2022/09/x-men-animate.png'); animation: play 1s steps(7) infinite; } @keyframes play { from { background-position: 0px; } to { background-position: -6657px; } } </style> <pre data-line=""> <code readonly="true"> <xmp> <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('/media/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></xmp> </code> </pre>