CSS
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}
}
@-o-keyframes gif{
from{background-position: -5270px}
to{background-position: 1px}
}
@keyframes gif{
from{background-position: -5270px}
to{background-position: 0}
}
