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>
css3动画 9步
微云:step9.png
相关推荐
