Грубый пример на коленке, это если без jquery.
Тестировал в хром, opera, ie9
Ссылка на песочницу
или запустите пример ниже.
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<div id="test" style="position:absolute;left:100px;background-color:yellow;width:70px;height:70px;opacity:0.1;">привет</div>
<div id="test2" style="position:absolute;left:500px;background-color:red;width:70px;height:70px;opacity:0.1;">привет</div>
<script>
//для начала обьявим функцию которая будет выполнять анимацию
function animate(style){
var el=style["el"],
easing=style["easing"]||"line",
duration=style["duration"]||1000,
//получим расчитанный стиль
// currentStyle используется в старых ie, для поддержки старых IE этого конечно мало :)
сomputedStyle=window.getComputedStyle?window.getComputedStyle(el, null):el.currentStyle,
//время до которого анимацию нужно успеть выполнить
finalTime=new Date().getTime()+duration,
//список анимируемых свойств
prop={},
// единицы измерения
ob={
left:"px",
right:"px",
top:"px",
bottom:"px",
width:"px",
height:"px"
},
// закон изменения параметра в зависимости от положения анимации
// 3 штучки дя примера
delta={
'line':function(progress){
return progress;
},
'circ':function(progress){
return 1 - Math.sin(Math.acos(progress))
},
'sine':function (progress) {
return 1 - Math.sin((1 - progress) * Math.PI/2);
}
},
//счётчик для циклов
i=0;
//так как время и ссылку на анимируемы обьект передали в style, то нужно эти поля удалить
delete style["time"];
delete style["el"];
delete style["easing"];
//запомним начальные значения всех свойств
//вообще можно было бы использвать сomputedStyle напрямую, но мне стрёмно парсить числа на каждой итерации
// поэтому значения я подгатавливаю в этом цикле заранее
for (i in style){
prop[i]= parseFloat( сomputedStyle[i] )||0;
}
//Цикл анимации
function f(){
//рассчитаем время прошедшее с начала анимации
var now=duration-(finalTime- (new Date().getTime()) ),
progress=now/duration,
s=0;
// защитимся от случае когда прогресс>100% , в этом случае просто установим 100% то есть 1.
if (progress>1) progress=1;
// анимируем каждое свойство
for (i in style){
s=((style[i]-prop[i]) * delta[easing](progress) )+prop[i];
el.style[i]= s+ ( ob[i] || "" );
}
if (progress<1) setTimeout(f,16);
}
//запуск первой итераци цикла
f();
}
// Пример использования получившейся функции
animate({
el:document.getElementById("test"),
left:500,
top:50,
opacity:1,
duration:5000,
//easing:"circ"
});
// Пример использования получившейся функции
animate({
el:document.getElementById("test2"),
left:100,
top:50,
opacity:1,
duration:5000,
//easing:"circ"
});
</script>
</body>
</html>
