css3动画 9步
<!doctype html> <html> <head> <meta charset="utf-8"> <title>demo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <style> .runner { -webkit-animation-timing-function: steps(9,end); -webkit-animation-duration: .6s; -webkit-animation-name: m6runner; -webkit-animation-delay: 0s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-timing-function: steps(9,end); animation-duration: .6s; animation-name: m6runner; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: alternate; } @-webkit-keyframes m6runner { 0% { background-position: 0 0; } 100% { background-position: -540px 0; } } @keyframes m6runner { 0% { background-position: 0 0; } 100% { background-position: -540px 0; } } .people{ width:60px; height:67px; background:url(images/step9.png) no-repeat; background-size:540px 67px;} </style> </head> <body> <div class="walk"> <div class="people runner"></div> </div> </body> </html>
微云:step9.png