CSS properties can be transitioned with a delay, allowing for the creation of more advanced effects.
Click the X to run the animation.
{{>transition-usage-source}}
Separate Transition Properties
Each transition property can optionally have its own duration, delay, and/or easing.
An optional callback can be passed as the second argument to transition(). The callback is run after all property transitions have completed. In this case, we will use it to remove the node from the document.
```
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();
});
```
Complete Example Source
```
{{>transition-usage-source}}
```