{% else-1 %}
Посмотрите как фото появляется из пикселей.

                        
<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>
0 78 0
Без комментариев...