animition和transition的配合

本文主要是介绍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让它暂停，代码如下：
});