animition和transition的配合

   $("button:first").click(function() {
        $boy.addClass('slowWalk').transition({
            'left': $("#content").width() + 'px',
        }, 10000);
    });

添加一个class“slowWalk”，里面用到了animation，用于切换人物画面，形成动画：

.slowWalk {
       -webkit-animation-name: person-slow;
       -webkit-animation-duration: 950ms;
       -webkit-animation-iteration-count: infinite;
       -webkit-animation-timing-function: steps(1, start);
       -moz-animation-name: person-slow;
       -moz-animation-duration: 950ms;
       -moz-animation-iteration-count: infinite;
       -moz-animation-timing-function: steps(1, start)
   }

 @-webkit-keyframes person-slow {
       0% {
           background-position: -0px -291px;
       }
       25% {
           background-position: -602px -0px;
       }
       50% {
           background-position: -302px -291px;
       }
       75% {
           background-position: -151px -291px;
       }
       100% {
           background-position: -0px -291px;
       }
   }
   

同时用transition让人物走动起来，改变left的坐标，例如让它走100个像素，transition实现慢慢移动形成走路的过程。

$boy.addClass('slowWalk').transition({
            'left': 100px,
        }, 10000);

同时添加一个按钮让人物可以停下来，分两步：

（1）强制给left一个固定值，让transition停下来；

（2）让animation停下来，

$("button:last").click(function() {
        var left = $boy.css('left');
        // 强制做了一个改变目标left的处理，提取现在的left值
        // 动画是要运行10秒,所以此时动画还是没有结束的
        $boy.css('left',left);  //赋值left值给boy的css属性
        // 增加暂停的样式
        $boy.addClass('pauseWalk'); //pauseWalk属性包含animation-play-state设置为paused让它暂停，代码如下：
    });

 .pauseWalk {
            -webkit-animation-play-state: paused;
            -moz-animation-play-state: paused;
        }