Посмотрите как фото появляется из пикселей.

                        
<style>

html {height: 100%;overflow:hidden}



body {

    background: 

-webkit-linear-gradient(DarkSlateGray,Cyan);

    background: 

     -o-linear-gradient(DarkSlateGray,Cyan);

    background: 

   -moz-linear-gradient(DarkSlateGray,Cyan);

    background: 

        linear-gradient(DarkSlateGray,Cyan);

    min-height: 100%;

}



.image{

  width: 310px;

  height: 300px;

  background: url(http://goltermann.design/wp-content/themes/goltermann/images/profile_build_jg.png);

  background-position: -4960px;

  position: absolute; 

  margin: auto; 

  top: 0; left: 0; bottom: 0; right: 0;

  

  /* 

  shorthand would be 

  -webkit-animation: gif 1s steps(17,start) 1.5s 1 forwards; 

  but that does not work with safari.

  */

  

  -webkit-animation-name: gif;

  -webkit-animation-delay: 1s;

  -webkit-animation-timing-function: steps(17,start);

  -webkit-animation-duration: 1.5s;

  -webkit-animation-iteration-count: 1;

  -webkit-animation-fill-mode: forwards;



  -moz-animation: gif 1s steps(17,start) 1.5s 1 forwards;

  -ms-animation: gif 1s steps(17,start) 1.5s 1 forwards;

  -o-animation: gif 1s steps(17,start) 1.5s 1 forwards;

  animation: gif 1s steps(17,start) 1.5s 1 forwards;

}

  

  @-webkit-keyframes gif{

  0% {background-position: -5270px}

  100% {background-position: 1px}

  }



  @-moz-keyframes gif{

  from{background-position: -5270px}

  to{background-position: 1px}

  }



  @-ms-keyframes gif{

  from{background-position: -5270px}

  to{background-position: 1px}

  }



  @-o-keyframes gif{

  from{background-position: -5270px}

  to{background-position: 1px}

  }



  @keyframes gif{

  from{background-position: -5270px}

  to{background-position: 0}

  }

</style>

<div class="image"></div>