虽然现在css3已经有了很多动画效果希望后面有时间也写一些博客，但是先开始我们的基础动画的学习。
1.制作动画常用的属性就是left,right,height,width,opacity等属性
2.因为每个动画不一定都是匀速的，可能是加速或者更加复杂的，所以就会有缓存动画
3.运动的物体，可能不只有一个，可能是多个，或者一个物体多个属性同事改变做出复杂的运动
4.运动可以连续起来，形成一个动画，这个运动叫做链式运动
开始动手
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
.animation{
background-color: green;
height: 100px;
100px;
left: 0px;
top: 0px;
position: absolute;
}
</style>
</head>
<body>
<div id="test" class="animation">animation</div>
</body>
<script type="text/javascript">
window.onload = function(){
var ele = document.getElementById("test");
var timer = null ;
ele.onmouseover = function(){
startAnimation();
}
function startAnimation(){
clearInterval(timer);
var _ele = document.getElementById("test");
timer = setInterval(function(){
if (_ele.offsetLeft == (window.innerWidth-100)){
clearInterval(timer);
};
_ele.style.left = _ele.offsetLeft+ 1 +'px';
},10)
}
}
</script>
</html>
1.这个是一个简单的动画效果，在鼠标移动到div上的时候，div就开始往右移动，不过移动的物体的定位最好是绝对定位比较好，因为脱离文档流。
2.每次鼠标进入div的时候，要清除定时器，不要给物体运动的过程中，鼠标再次移入div上，导致生成多个定时，那么速度就会变快。