Single Image CSS3 Sprite Animation
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | #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; } } |