hoax, если копируете то копируйте правильно...
вот с сделал по той что до пиливал так как у вас много чего не хватает
<!DOCTYPE HTML>
<html>
<head>
<style>
#animate{
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div id="animate"></div>
<script>
function animate(opts){
var start = new Date();
var timer = setInterval(function (){
var progress = (new Date - start)/opts.duration;
if(progress > 1)progress = 1;
opts.step(opts.delta(progress));
if(progress == 1){
clearInterval(timer);
opts.compleat && opts.compleat(opts.elem);
};
},opts.delay || 1000/60);
return timer;
}
function Prop(opts){
opts.step = function (prog){
var value;
for(var i = opts.prop.length;i--;){
value = opts.start[i] + ((opts.value[i] - opts.start[i] )*prog);
opts.elem.style[opts.prop[i]] = value+ opts.units;
};
}
if (!opts.delta) {
opts.delta = function (progress){
return progress;
}
}
return animate(opts);
}
var elem = document.getElementById("animate");
Prop({
elem:elem,//элемент на котором происходит анимация
start:[1],// начальное значение
value:[0],// конечное значение
prop:['opacity'],// свойство анимации
duration:2000,// время анимации
units:'',//единицы измерение px || % || ''-без единици измерения
});
</script>
</body>
</html>
некоторые коменты удалил , но они есть в 4 посте.