MooTools Tween

Create transitions with tween - Mootools.

<style>
#box1 {
width:100px;
height:100px;
background-color:#ccc;
}

#box2 {
width:100px;
height:100px;
background-color:#ccc;
}
</style>
<div id=box1></div>
<div id=box2></div>
<script>
window.addEvent(domready, function() {
/*Transitions the background color of the Element from black to red*/
var myFx = new Fx.Tween($(box1));
myFx.start(background-color, #000, #f00);

/*Transitions the background color of the Element from its current color to blue*/
var myFx = new Fx.Tween($(box2));
myFx.start(background-color, #f00);
});
</script>

Tween + duration

element.set(tween,{duration: 300}).tween(opacity,0,1);