<link href="{{componentAssets}}/transition.css" rel="stylesheet" type="text/css">

<div class="intro">

<p>CSS properties can be transitioned with a delay, allowing for the creation of more advanced effects.

Click the X to run the animation.</p>

</div>

<div class="example" style="height:240px;">

{{>transition-usage-source}}

</div>

<h2>Separate Transition Properties</h2>

<p>Each transition property can optionally have its own duration, delay, and/or easing.</p>

<p>An optional callback can be passed as the second argument to <code>transition()</code>. The callback is run after all property transitions have completed. In this case, we will use it to remove the node from the document.</p>

```

Y.one('#demo').transition({

duration: 1, // seconds

easing: 'ease-out', // CSS syntax

height: 0,

top: '100px',

width: {

delay: 1,

duration: 0.5,

easing: 'ease-in',

value: 0

},

left: {

delay: 1,

duration: 0.5,

easing: 'ease-in',

value: '150px'

},

opacity: {

delay: 1.5,

duration: 0.25,

value: 0

}

}, function() {

this.remove();

});

```

<h2>Complete Example Source</h2>

```

{{>transition-usage-source}}

```