Single Image CSS3 Sprite Animation

#dog {
	background: transparent url(images/murphy.indexed.png) 0px 0px no-repeat;
	position:absolute;
	-webkit-transform: translateZ(0);
	margin:163px 0 0px 35px;
	width: 145px;
	height: 65px;
	z-index: 200;
    -webkit-animation: dog .7s steps(7) infinite;
       -moz-animation: dog .7s steps(7) infinite;
        -ms-animation: dog .7s steps(7) infinite;
         -o-animation: dog .7s steps(7) infinite;
            animation: dog .7s steps(7) infinite;
}
@-webkit-keyframes dog {
   from { background-position:    0px; }
     to { background-position: -1015px; }
}
@-moz-keyframes dog {
   from { background-position:    0px; }
     to { background-position: -1015px; }
}
@-ms-keyframes dog {
   from { background-position:    0px; }
     to { background-position: -1015px; }
}
@-o-keyframes dog {
   from { background-position:    0px; }
     to { background-position: -1015px; }
}
@keyframes dog {
   from { background-position:    0px; }
     to { background-position: -1015px; }
}

 

Dave Winter focuses in WordPress UI Design and WordPress Plugin Development (some have labelled him a fanatic) but has hands in many other projects, including photography and music. He's never far from a computer... or an iPad (for testing purposes, of course). If you've been to a WordCamp in Southern California, he probably already knows who you are (or maybe not - he's terrible with names). Dave currently teaches courses at California State University, Long Beach alongside his small business at dauid.us (and his students think he's pretty boss).
© 2008-2020, dauid.us