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);