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

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney<div class="intro">

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

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt SweeneyClick the X to run the animation.</p>

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney</div>

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney

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

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney{{>transition-usage-source}}

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney</div>

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney<h2>Separate Transition Properties</h2>

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

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney<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>

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney```

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt SweeneyY.one('#demo').transition({

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney duration: 1, // seconds

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney easing: 'ease-out', // CSS syntax

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney height: 0,

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney top: '100px',

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney width: {

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney delay: 1,

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney duration: 0.5,

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney easing: 'ease-in',

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney value: 0

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney },

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney left: {

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney delay: 1,

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney duration: 0.5,

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney easing: 'ease-in',

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney value: '150px'

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney },

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney opacity: {

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney delay: 1.5,

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney duration: 0.25,

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney value: 0

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney }

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney}, function() {

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney this.remove();

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney});

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney```

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney<h2>Complete Example Source</h2>

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney```

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney{{>transition-usage-source}}

69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney```