动画就是位置的变化：
HTML：
<div class="bg" id="bg"></div>
css:
.bg{position: absolute;top: 0;left: 0; 100px;height: 100px;background: red;border-radius: 50%;}
javascript:
(function(){
var x = 0;
var y = 0;
var speed = 10;
//动画的加速度
var xstep = speed;
var ystep = speed;
var boxDom = document.getElementById("bg");
//获取浏览器的高度
function draw(){
var maxwidth = window.innerWidth - boxDom.offsetWidth;
var maxheight = window.innerHeight-boxDom.offsetHeight;
y+=ystep;
x+=xstep;
if(x>maxwidth){
xstep = -speed;
x = maxwidth;
}
if(y>maxheight){
ystep = -speed;
y = maxheight;
}
if(y<0){
ystep = speed;
y = 0;
}
if (x<0) {
xstep = speed;
x = 0;
}
boxDom.style.left = x + "px";
boxDom.style.top = y + "px";
};
setInterval(function(){
draw();
},1000/25);
})();
动画与物体的原始位置（定位），时间和速度有关。