    element.transition(path, value [, opt])

Allows to change the element's property gradually over a period of time. This method lets you specify what property to change (`path`), when the transition will start (`options.delay`), how long the transition will last (`options.duration`), how the transition will run (`options.timingFunction`), and how to interpolate the property value (`options.valueFunction`).

    element.transition('position/x', 250, {
        delay: 100,
        duration: 500,
        timingFunction: function(t) { return t*t; },
        valueFunction: function(a, b) { return function(t) { return a + (b - a) * t }}
    });
    // will start changing the element's x-coordinate in 100ms, for period of 500ms.

JointJS comes pre-built with some common timing and interpolating functions. The timing functions are defined in the `joint.util.timing` namespace and the interpolating functions in the `joint.util.interpolate` namespace. The predefined timing functions are:

- `linear`
- `quad`
- `cubic`
- `inout`
- `exponential`
- `bounce`

and the predefined interpolating functions are:

- `number`
- `object`
- `hexColor`
- `unit`

    element.transition('attrs/text/font-size', '1em', {
        valueFunction: joint.util.interpolate.unit,
        timingFunction: joint.util.timing.bounce
    });
    // will start changing the current font size value to 1em in the bounce fashion.