< Back to Code

Animate PNG file with css

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

        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; }

© Copyright by JAYbranding – All rights reserved.

We would like to advise you in more detail.
Please enter information to receive a consultation