Make pure CSS animation from PNG sequence like GIF

Howdy! Today we are going to make an animation in pure CSS without JavaScript.This will be an sequence of a images that run one after another so that it looks like a animation.We will merge many images into one and will make a vertical(or even horizontal) sequence.We will then crop of the single image and run the sequence so fast that it will look like a GIF image or animation.



Some times, if you might have notice, YouTube does the same thing with its logo.Well, that's not a point itself so lets look at demo first:-

Above animation is powered by the image below with help of CSS animations:)

HTML

<p class="i"></p>

CSS

.i{

  display: inline-block;

  margin: 30px 10px 15px 10px;

  width:190px;

  height:136px;

  background: url(IMAGEURL);

}


.i {

  -moz-animation: sign-animation 3s 0.1s steps(48) forwards;

  -o-animation: sign-animation 3s 0.1s steps(48) forwards;

  -webkit-animation: sign-animation 3s 0.1s steps(48) forwards;

  animation: sign-animation 3s 0.1s steps(48) forwards;

}



@-webkit-keyframes sign-animation {

  to {

    background-position: -8808px 0px;

  }

}

@-moz-keyframes sign-animation {

  to {

    background-position:-8808px 0px;

  }

}

@keyframes sign-animation {

  to {

    background-position: -8808px 0px;

  }

}

So, 48 is a pixel of the width of each photo if the sequence is horizontal.If it was vertical, it should have to be the height of the each picture and also, you have to modify the background position in the correct manner.

Change the 0.1s above to infinite to make animation run infinite number of times.

So that'sit guys if you liked this animation, see the demo on JS fiddle here.

• Tweet
• Share
• Share
• Share
• Share