CSS
html {
background: #03030a;
}
body {
margin: 0;
padding-top: 150px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#222222+39,03030a+80 */
background: #222222;
/* Old browsers */
background: -moz-linear-gradient(top, #222222 39%, #03030a 80%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #222222 39%, #03030a 80%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #222222 39%, #03030a 80%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#03030a', GradientType=0);
/* IE6-9 */
}
.mafia {
position: relative;
width: 300px;
height: 319px;
margin: 0 auto;
background-image: url(http://rybak.zz.mu/images/sequence/mafia.png);
}
a {
background-image: url(http://rybak.zz.mu/images/sequence/smoke-sequence.png);
animation: tick-tock 8s steps(67, end) infinite;
-webkit-animation: tick-tock 8s steps(67, end) infinite;
background-position: 0 0;
display: block;
margin: 0;
height: 130px;
width: 129px;
position: absolute;
opacity: 0;
top: 5px;
right: -55px;
transition: 2s;
-widgetkit-transition: 2s;
}
.mafia:hover a {
opacity: .5;
}
@keyframes tick-tock {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -8710px;
}
}
@-webkit-keyframes tick-tock {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -8710px;
}
}
