Search code examples
htmlanimationpngsequenceclip-path

How to use the PNG sequence in a single file in HTML / Javascript?

I remarked the PNG sequence files are either multiple files or a single file which contains all sequences. I can't figure it out if the two types of sequences have different names (and if yes what are these names). Further I try to find out how to use the image sequence j a SINGLE FILE like this one hereenter image description here

for HTML / javascript animations. I think I need a div which moves over the png file (clip path), but I can't find any example. Maybe you know some? Thank you!

Solution

  • Sorry, but I can animate horizontally (or vertically) only. If you stack your images side to side horizontally, it will be perfect.

    .animatedImage {
  background-image: url(https://i.sstatic.net/kuEev.png);
  height: 300px;
  width: 500px;
  
  animation: png-animation 1s steps(3) forwards; /* To change speed of animation, change firs number; To include more images, change number in steps() */
  animation-iteration-count:infinite; /* Make animation never ends */
}

@keyframes png-animation {

  to {
    background-position: -1500px 0px;
  }

}
    <div class="animatedImage"></div>