用关键帧可以实现精灵图的切换，同时通过background-size解决了自适应的问题，这样还是不够的，元素还仅仅只是在原地进行帧动画，要让一个元素动起来必须要配合元素坐标的变化
因此在实现上，让元素动起来：
运动 = 关键帧动画 + 坐标变化
关键帧动画我们已经实现了，那坐标的变化就很简单了，一般来说前端能用到的手段
无论用那种需要记住的是元素的坐标 都是 position+translate的值的总和
圣诞主题我采用的是transition+position的处理
transition是css3引入的"过渡"属性，可以让css的属性值在一定的时间区间内平滑地过渡，考虑兼容性问题，这里会额外引入一个插件jquery.transit，这个就是具体封装了transition的CSS3过渡动画的实现
接下来代码部分就非常简单了
transition的使用与jQuery提供的animate()方法基本差不多，所以使用上很容易接受
参考右边的代码，让飞鸟执行一个飞的动作，可以这样用
$(".bird").transition({
'right': "3rem",
}, 10000,'linear',function(){
alert("结束")
});
只要给出position的坐标值，同时给出变化的时间就让元素动起来了，结合一下精灵动画，是不是看起来物体运动就是那么回事了？
具体的实现看右边编辑区
点击运动按钮，通过transition方法，让"鸟"从右边飞出来，飞出右边3rem的位置，请在右边对应的68行区域写出对应的代码来
$(".bird").transition({
'right': "3rem",
}, 10000,'linear',function(){
alert("结束")
});
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报
实战
实战
实战
实战
实战
