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

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

/* as used on jaschagoltermann.de */