var steps = 250; // steps from start to finish

​

// the final css values

var endValueTop = 300;

var endValueLeft = 300;

var endValueFontSize = 100;

​

// the current css values (get encreased in doAnimation())

var currentValueTop = 100;

var currentValueLeft = 100;

var currentValueFontSize = 0;

​

// the added values in each step

var stepsTop = (endValueTop - currentValueTop) / steps;

​

​

var stepsLeft = (endValueLeft - currentValueLeft) / steps;

var stepsFontSize = (endValueFontSize - currentValueFontSize) / steps;

​

var hello = $('#hello').get(0).style;

function doAnimation() {

​

    // increase current values

    currentValueTop += stepsTop;

    currentValueLeft += stepsLeft;

    currentValueFontSize += stepsFontSize;

​

    // apply them

   hello.top = currentValueTop + 'px';

  hello.left = currentValueLeft + 'px';

  hello.fontSize = currentValueFontSize + 'em';

    console.log(stepsLeft);

    // restart if there are steps left

    if (steps--) {

        window.setTimeout(function(){

            doAnimation();

        }, 15);

    }

}

​

// start the first time

doAnimation();