182th Eadweard J. Muybridge's Birthday
A CSS-only effect like today's Google doodle (2012-04-09), celebrating Eadweard J. Muybridge's 182th birthday.
CSS
body{
position:relative;
width:804px;
margin:40px auto;
}
div{
width:804px;
height:216px;
background:transparent url('http://img.dnl.bz/903f55.png');
-webkit-animation: animate 30.617s linear;
-moz-animation: animate 21.317s linear;
-ms-animation: animate 30.617s linear;
-o-animation: animate 30.617s linear;
animation: animate 30.617s linear;
}
@-webkit-keyframes animate{
from{
background-position:0 0;
}
to{
background-position:-160800px 0;
}
}
@-moz-keyframes animate{
from{
background-position:0 0;
}
to{
background-position:-160800px 0;
}
}
@-ms-keyframes animate{
from{
background-position:0 0;
}
to{
background-position:-160800px 0;
}
}
@-o-keyframes animate{
from{
background-position:0 0;
}
to{
background-position:-160800px 0;
}
}
@keyframes animate{
from{
background-position:0 0;
}
to{
background-position:-160800px 0;
}
}