diff --git a/build/minified/modules/transition.js b/build/minified/modules/transition.js
index 183741bc2..bcd8beef4 100644
--- a/build/minified/modules/transition.js
+++ b/build/minified/modules/transition.js
@@ -106,6 +106,13 @@ $.fn.transition = function() {
             $module.addClass(className.animating);
           },
 
+          direction: function() {
+            return $module.is(':visible') 
+              ? 'out'
+              : 'in'
+            ;
+          }
+
           loop: function() {
             $module
               .addClass(className.loop)
@@ -263,7 +270,9 @@ $.fn.transition = function() {
           module.set.duration();
           module.show();
           module.originalClass = $module.attr('class');
+          module.originalStyle = $module.attr('style');
           module.repaint();
+          module.set.direction();
           module.set.animating();
           $module
             .addClass(className.transition)
@@ -285,7 +294,7 @@ $.fn.transition = function() {
         reset: function() {
           module.verbose('Resetting original class', module.originalClass);
           $module
-            .removeAttr('style')
+            .attr('style', module.originalStyle)
             .attr('class', module.originalClass)
           ;
         },
@@ -469,7 +478,7 @@ $.fn.transition.settings = {
   complete     : function() {},
   
   // animation duration (useful only with future js animations)
-  animation    : 'fade in',
+  animation    : 'fade',
   duration     : '1s',
   
   className    : {
diff --git a/build/minified/modules/transition.min.js b/build/minified/modules/transition.min.js
index 74d77e7fc..b7116a878 100644
--- a/build/minified/modules/transition.min.js
+++ b/build/minified/modules/transition.min.js
@@ -1 +1 @@
-!function(a,b,c,d){a.fn.transition=function(){var e,f=a(this),g=f.selector||"",h=(new Date).getTime(),i=[],j=arguments,k=j[0],l=[].slice.call(arguments,1),m="string"==typeof k;return b.requestAnimationFrame||b.mozRequestAnimationFrame||b.webkitRequestAnimationFrame||b.msRequestAnimationFrame||function(a){setTimeout(a,0)},f.each(function(){var b,f,n,o,p,q,r,s,t,u=a(this),v=this;t={initialize:function(){b=t.get.settings.apply(v,j),t.verbose("Converted arguments into settings object",b),n=b.error,o=b.className,r=b.namespace,p=b.metadata,s="module-"+r,q=t.get.transitionEvent(),f=u.data(s),f===d&&t.instantiate(),m&&(e=t.invoke(k)),m&&e!==!1||t.animate()},instantiate:function(){t.verbose("Storing instance of module",t),f=t,u.data(s,f)},destroy:function(){t.verbose("Destroying previous module for",v),u.removeData(s)},repaint:function(a){t.verbose("Forcing repaint event"),a=v.offsetWidth},set:{animating:function(){u.addClass(o.animating)},loop:function(){u.addClass(o.loop)},duration:function(a){a=a||b.duration,t.verbose("Setting animation duration",a),u.css({"-webkit-animation-duration":a,"-moz-animation-duration":a,"-ms-animation-duration":a,"-o-animation-duration":a,"animation-duration":a})}},remove:{animating:function(){u.removeClass(o.animating)}},get:{settings:function(b,c,e){return a.isPlainObject(b)===d?a.extend(!0,{},a.fn.transition.settings,b):"function"==typeof e?a.extend(!0,{},a.fn.transition.settings,{animation:b,complete:e,duration:c}):"string"==typeof c?a.extend(!0,{},a.fn.transition.settings,{animation:b,duration:c}):"object"==typeof c?a.extend(!0,{},a.fn.transition.settings,c,{animation:b}):"function"==typeof c?a.extend(!0,{},a.fn.transition.settings,{animation:b,complete:c}):a.extend(!0,{},a.fn.transition.settings,{animation:b})},transitionEvent:function(){var a,b=c.createElement("element"),e={animation:"animationend",OAnimation:"oAnimationEnd",MozAnimation:"mozAnimationEnd",WebkitAnimation:"webkitAnimationEnd"};for(a in e)if(b.style[a]!==d)return t.verbose("Determining animation end event",e[a]),e[a];return!1}},can:{animate:function(c){var d=a("<div />");return c=c||b.animation,d.addClass(o.transition).addClass(c),"none"!==d.css("animationName")}},is:{animating:function(){return u.hasClass(o.animating)}},hide:function(){t.verbose("Hiding element"),u.addClass(o.transition).addClass(o.hidden)},show:function(){t.verbose("Showing element"),u.removeClass(o.hidden)},start:function(){t.verbose("Starting animation"),u.removeClass(o.disabled)},stop:function(){t.debug("Stopping animation"),u.addClass(o.disabled)},toggle:function(){t.debug("Toggling play status"),u.toggleClass(o.disabled)},animate:function(a){return b=a||b,t.can.animate()?t.is.animating()?(t.queue(b.animation),!1):(t.set.duration(),t.show(),t.originalClass=u.attr("class"),t.repaint(),t.set.animating(),u.addClass(o.transition).addClass(b.animation).one(q,t.complete),t.debug("Beginning animation",b.animation,u.attr("class")),void 0):(t.error(n.noAnimation,b.animation),!1)},queue:function(a){t.debug("Queueing animation of",a),u.one(q,function(){t.animate.apply(this,b)})},reset:function(){t.verbose("Resetting original class",t.originalClass),u.removeAttr("style").attr("class",t.originalClass)},complete:function(){t.verbose("CSS animation complete",b.animation),u.hasClass(o.outward)?(t.reset(),t.hide()):u.hasClass(o.inward)?(t.reset(),t.show()):t.reset(),t.remove.animating(),t.repaint(),b.complete()},setting:function(c,e){return e===d?b[c]:(a.isPlainObject(c)?a.extend(!0,b,c):b[c]=e,void 0)},internal:function(b,c){return c===d?t[b]:(a.isPlainObject(b)?a.extend(!0,t,b):t[b]=c,void 0)},debug:function(){b.debug&&(b.performance?t.performance.log(arguments):t.debug=Function.prototype.bind.call(console.info,console,b.moduleName+":"))},verbose:function(){b.verbose&&b.debug&&(b.performance?t.performance.log(arguments):t.verbose=Function.prototype.bind.call(console.info,console,b.moduleName+":"))},error:function(){t.error=Function.prototype.bind.call(console.error,console,b.moduleName+":")},performance:{log:function(a){var c,d,e;b.performance&&(c=(new Date).getTime(),e=h||c,d=c-e,h=c,i.push({Element:v,Name:a[0],Arguments:[].slice.call(a,1)||"","Execution Time":d})),clearTimeout(t.performance.timer),t.performance.timer=setTimeout(t.performance.display,100)},display:function(){var c=b.moduleName+":",e=0;h=!1,clearTimeout(t.performance.timer),a.each(i,function(a,b){e+=b["Execution Time"]}),c+=" "+e+"ms",g&&(c+=" '"+g+"'"),(console.group!==d||console.table!==d)&&i.length>0&&(console.groupCollapsed(c),console.table?console.table(i):a.each(i,function(a,b){console.log(b.Name+": "+b["Execution Time"]+"ms")}),console.groupEnd()),i=[]}},invoke:function(b,c,e){var g,h,i=f;return c=c||l,e=v||e,"string"==typeof b&&i!==d&&(b=b.split(/[\. ]/),g=b.length-1,a.each(b,function(b,c){return a.isPlainObject(i[c])&&b!=g?(i=i[c],!0):i[c]!==d?(h=i[c],!0):(t.error(n.method),!1)})),a.isFunction(h)?(f.verbose("Executing invoked function",h),h.apply(e,c)):h||!1}},t.initialize()}),e?e:this},a.fn.transition.settings={moduleName:"Transition",debug:!0,verbose:!0,performance:!0,namespace:"transition",complete:function(){},animation:"fade in",duration:"1s",className:{animating:"animating",disabled:"disabled",hidden:"hidden",inward:"in",looping:"looping",outward:"out",transition:"ui transition"},error:{noAnimation:"There is no css animation matching the one you specified.",method:"The method you called is not defined"}}}(jQuery,window,document);
\ No newline at end of file
+!function(a,b,c,d){a.fn.transition=function(){var e,f=a(this),g=f.selector||"",h=(new Date).getTime(),i=[],j=arguments,k=j[0],l=[].slice.call(arguments,1),m="string"==typeof k;return b.requestAnimationFrame||b.mozRequestAnimationFrame||b.webkitRequestAnimationFrame||b.msRequestAnimationFrame||function(a){setTimeout(a,0)},f.each(function(){var b,f,n,o,p,q,r,s,t,u=a(this),v=this;t={initialize:function(){b=t.get.settings.apply(v,j),t.verbose("Converted arguments into settings object",b),n=b.error,o=b.className,r=b.namespace,p=b.metadata,s="module-"+r,q=t.get.transitionEvent(),f=u.data(s),f===d&&t.instantiate(),m&&(e=t.invoke(k)),m&&e!==!1||t.animate()},instantiate:function(){t.verbose("Storing instance of module",t),f=t,u.data(s,f)},destroy:function(){t.verbose("Destroying previous module for",v),u.removeData(s)},repaint:function(a){t.verbose("Forcing repaint event"),a=v.offsetWidth},set:{animating:function(){u.addClass(o.animating)},loop:function(){u.addClass(o.loop)},duration:function(a){a=a||b.duration,t.verbose("Setting animation duration",a),u.css({"-webkit-animation-duration":a,"-moz-animation-duration":a,"-ms-animation-duration":a,"-o-animation-duration":a,"animation-duration":a})}},remove:{animating:function(){u.removeClass(o.animating)}},get:{settings:function(b,c,e){return a.isPlainObject(b)===d?a.extend(!0,{},a.fn.transition.settings,b):"function"==typeof e?a.extend(!0,{},a.fn.transition.settings,{animation:b,complete:e,duration:c}):"string"==typeof c?a.extend(!0,{},a.fn.transition.settings,{animation:b,duration:c}):"object"==typeof c?a.extend(!0,{},a.fn.transition.settings,c,{animation:b}):"function"==typeof c?a.extend(!0,{},a.fn.transition.settings,{animation:b,complete:c}):a.extend(!0,{},a.fn.transition.settings,{animation:b})},transitionEvent:function(){var a,b=c.createElement("element"),e={animation:"animationend",OAnimation:"oAnimationEnd",MozAnimation:"mozAnimationEnd",WebkitAnimation:"webkitAnimationEnd"};for(a in e)if(b.style[a]!==d)return t.verbose("Determining animation end event",e[a]),e[a];return!1}},can:{animate:function(c){var d=a("<div />");return c=c||b.animation,d.addClass(o.transition).addClass(c),"none"!==d.css("animationName")}},is:{animating:function(){return u.hasClass(o.animating)}},hide:function(){t.verbose("Hiding element"),u.addClass(o.transition).addClass(o.hidden)},show:function(){t.verbose("Showing element"),u.removeClass(o.hidden)},start:function(){t.verbose("Starting animation"),u.removeClass(o.disabled)},stop:function(){t.debug("Stopping animation"),u.addClass(o.disabled)},toggle:function(){t.debug("Toggling play status"),u.toggleClass(o.disabled)},animate:function(a){return b=a||b,t.can.animate()?t.is.animating()?(t.queue(b.animation),!1):(t.set.duration(),t.show(),t.originalClass=u.attr("class"),t.originalStyle=u.attr("style"),t.repaint(),t.set.animating(),u.addClass(o.transition).addClass(b.animation).one(q,t.complete),t.debug("Beginning animation",b.animation,u.attr("class")),void 0):(t.error(n.noAnimation,b.animation),!1)},queue:function(a){t.debug("Queueing animation of",a),u.one(q,function(){t.animate.apply(this,b)})},reset:function(){t.verbose("Resetting original class",t.originalClass),u.attr("style",t.originalStyle).attr("class",t.originalClass)},complete:function(){t.verbose("CSS animation complete",b.animation),u.hasClass(o.outward)?(t.reset(),t.hide()):u.hasClass(o.inward)?(t.reset(),t.show()):t.reset(),t.remove.animating(),t.repaint(),b.complete()},setting:function(c,e){return e===d?b[c]:(a.isPlainObject(c)?a.extend(!0,b,c):b[c]=e,void 0)},internal:function(b,c){return c===d?t[b]:(a.isPlainObject(b)?a.extend(!0,t,b):t[b]=c,void 0)},debug:function(){b.debug&&(b.performance?t.performance.log(arguments):t.debug=Function.prototype.bind.call(console.info,console,b.moduleName+":"))},verbose:function(){b.verbose&&b.debug&&(b.performance?t.performance.log(arguments):t.verbose=Function.prototype.bind.call(console.info,console,b.moduleName+":"))},error:function(){t.error=Function.prototype.bind.call(console.error,console,b.moduleName+":")},performance:{log:function(a){var c,d,e;b.performance&&(c=(new Date).getTime(),e=h||c,d=c-e,h=c,i.push({Element:v,Name:a[0],Arguments:[].slice.call(a,1)||"","Execution Time":d})),clearTimeout(t.performance.timer),t.performance.timer=setTimeout(t.performance.display,100)},display:function(){var c=b.moduleName+":",e=0;h=!1,clearTimeout(t.performance.timer),a.each(i,function(a,b){e+=b["Execution Time"]}),c+=" "+e+"ms",g&&(c+=" '"+g+"'"),(console.group!==d||console.table!==d)&&i.length>0&&(console.groupCollapsed(c),console.table?console.table(i):a.each(i,function(a,b){console.log(b.Name+": "+b["Execution Time"]+"ms")}),console.groupEnd()),i=[]}},invoke:function(b,c,e){var g,h,i=f;return c=c||l,e=v||e,"string"==typeof b&&i!==d&&(b=b.split(/[\. ]/),g=b.length-1,a.each(b,function(b,c){return a.isPlainObject(i[c])&&b!=g?(i=i[c],!0):i[c]!==d?(h=i[c],!0):(t.error(n.method),!1)})),a.isFunction(h)?(f.verbose("Executing invoked function",h),h.apply(e,c)):h||!1}},t.initialize()}),e?e:this},a.fn.transition.settings={moduleName:"Transition",debug:!0,verbose:!0,performance:!0,namespace:"transition",complete:function(){},animation:"fade",duration:"1s",className:{animating:"animating",disabled:"disabled",hidden:"hidden",inward:"in",looping:"looping",outward:"out",transition:"ui transition"},error:{noAnimation:"There is no css animation matching the one you specified.",method:"The method you called is not defined"}}}(jQuery,window,document);
\ No newline at end of file
diff --git a/build/packaged/modules/transition.js b/build/packaged/modules/transition.js
index 183741bc2..bcd8beef4 100644
--- a/build/packaged/modules/transition.js
+++ b/build/packaged/modules/transition.js
@@ -106,6 +106,13 @@ $.fn.transition = function() {
             $module.addClass(className.animating);
           },
 
+          direction: function() {
+            return $module.is(':visible') 
+              ? 'out'
+              : 'in'
+            ;
+          }
+
           loop: function() {
             $module
               .addClass(className.loop)
@@ -263,7 +270,9 @@ $.fn.transition = function() {
           module.set.duration();
           module.show();
           module.originalClass = $module.attr('class');
+          module.originalStyle = $module.attr('style');
           module.repaint();
+          module.set.direction();
           module.set.animating();
           $module
             .addClass(className.transition)
@@ -285,7 +294,7 @@ $.fn.transition = function() {
         reset: function() {
           module.verbose('Resetting original class', module.originalClass);
           $module
-            .removeAttr('style')
+            .attr('style', module.originalStyle)
             .attr('class', module.originalClass)
           ;
         },
@@ -469,7 +478,7 @@ $.fn.transition.settings = {
   complete     : function() {},
   
   // animation duration (useful only with future js animations)
-  animation    : 'fade in',
+  animation    : 'fade',
   duration     : '1s',
   
   className    : {
diff --git a/build/packaged/semantic.min.js.REMOVED.git-id b/build/packaged/semantic.min.js.REMOVED.git-id
index 44894631b..24f14e026 100644
--- a/build/packaged/semantic.min.js.REMOVED.git-id
+++ b/build/packaged/semantic.min.js.REMOVED.git-id
@@ -1 +1 @@
-3933b0941aa806a70f1383228230cba461cdc344
\ No newline at end of file
+b58e89f27173ed156fb95e8ef483299b3f9f1d58
\ No newline at end of file
diff --git a/build/uncompressed/modules/transition.js b/build/uncompressed/modules/transition.js
index 183741bc2..bcd8beef4 100644
--- a/build/uncompressed/modules/transition.js
+++ b/build/uncompressed/modules/transition.js
@@ -106,6 +106,13 @@ $.fn.transition = function() {
             $module.addClass(className.animating);
           },
 
+          direction: function() {
+            return $module.is(':visible') 
+              ? 'out'
+              : 'in'
+            ;
+          }
+
           loop: function() {
             $module
               .addClass(className.loop)
@@ -263,7 +270,9 @@ $.fn.transition = function() {
           module.set.duration();
           module.show();
           module.originalClass = $module.attr('class');
+          module.originalStyle = $module.attr('style');
           module.repaint();
+          module.set.direction();
           module.set.animating();
           $module
             .addClass(className.transition)
@@ -285,7 +294,7 @@ $.fn.transition = function() {
         reset: function() {
           module.verbose('Resetting original class', module.originalClass);
           $module
-            .removeAttr('style')
+            .attr('style', module.originalStyle)
             .attr('class', module.originalClass)
           ;
         },
@@ -469,7 +478,7 @@ $.fn.transition.settings = {
   complete     : function() {},
   
   // animation duration (useful only with future js animations)
-  animation    : 'fade in',
+  animation    : 'fade',
   duration     : '1s',
   
   className    : {
diff --git a/node/src/documents/modules/transition.html b/node/src/documents/modules/transition.html
index c346c0ef5..bf7a59b5a 100755
--- a/node/src/documents/modules/transition.html
+++ b/node/src/documents/modules/transition.html
@@ -30,23 +30,42 @@ type   : 'UI Module'
   
   <h2 class="ui dividing header">Introduction</h2>
 
-  <p>Transitions allows for use of CSS transitions with similar syntax to jQuery's 
-    <a href="http://api.jquery.com/animate/">animate</a>
-  </p>
+  <p>UI Transitions provide a wrapper for using css transitions in javascript without having to manually manage class names and state.</p>
   <h2 class="ui dividing header">Usage</h2>
-  
-  <h3 class="ui header">Initializing a transition</h3>
-  <div class="code">
-    $('.test.button')
+
+  <h3 class="ui header">Using transition</h3>
+  <p>Transitions use similar argument shorthand as <a href="http://api.jquery.com/animate/">animate</a>.</p>
+
+  <div class="code" data-demo="true" data-title="Arguments in transition">
+    $('.dog.image')
+      // default everything
+      .transition()
+      // ok ill specify an animation
+      .transition('fade in')
+      // no that was way too quick
+      .transition('fade out', '2s')
+      .transition('fade in', function() {
+        window.alert('Aha you sat through them all!');
+      })
+    ;
+  </div>
+
+  <p>A transition can be called multiple times to create an animation queue.</p>
+  <div class="code" data-demo="true" data-title="Queueing animations">
+    $('.dog.image')
       .transition('flip out y', '500ms')
       .transition('flip in y', '500ms', function() {
         console.log('done!');
       })
     ;
   </div>
-  <div class="ui large teal test button">
-    Hello
-  </div>
+  <img src="/images/demo/vector.png" class="ui medium dog image">
+
+  <h2 class="ui dividing header">Variations</h2>
+
+
+
+  <h2 class="ui dividing header">Behavior</h2>
 
 </div>
 </body>
diff --git a/node/src/files/components/semantic/modules/transition.js b/node/src/files/components/semantic/modules/transition.js
index 183741bc2..d066f867b 100644
--- a/node/src/files/components/semantic/modules/transition.js
+++ b/node/src/files/components/semantic/modules/transition.js
@@ -263,6 +263,7 @@ $.fn.transition = function() {
           module.set.duration();
           module.show();
           module.originalClass = $module.attr('class');
+          module.originalStyle = $module.attr('style');
           module.repaint();
           module.set.animating();
           $module
@@ -285,7 +286,7 @@ $.fn.transition = function() {
         reset: function() {
           module.verbose('Resetting original class', module.originalClass);
           $module
-            .removeAttr('style')
+            .attr('style', module.originalStyle)
             .attr('class', module.originalClass)
           ;
         },
@@ -469,7 +470,7 @@ $.fn.transition.settings = {
   complete     : function() {},
   
   // animation duration (useful only with future js animations)
-  animation    : 'fade in',
+  animation    : 'fade',
   duration     : '1s',
   
   className    : {
diff --git a/node/src/files/images/demo/vector.png.REMOVED.git-id b/node/src/files/images/demo/vector.png.REMOVED.git-id
new file mode 100644
index 000000000..d48bc078a
--- /dev/null
+++ b/node/src/files/images/demo/vector.png.REMOVED.git-id
@@ -0,0 +1 @@
+a7629cb3b07154a9684400c59cb5bf709c928e12
\ No newline at end of file
diff --git a/node/src/files/javascript/semantic.js b/node/src/files/javascript/semantic.js
index 0105bd714..080e12ea9 100755
--- a/node/src/files/javascript/semantic.js
+++ b/node/src/files/javascript/semantic.js
@@ -166,10 +166,10 @@ semantic.ready = function() {
     initializeCode: function() {
       var
         $code       = $(this),
-        $label      = $('<div>').addClass('ui label'),
         code        = $code.html(),
         contentType = $code.data('type')  || 'javascript',
         title       = $code.data('title') || false,
+        demo        = $code.data('demo')  || false,
         label       = $code.data('label') || false,
         displayType = {
           html       : 'HTML',
@@ -179,6 +179,7 @@ semantic.ready = function() {
           sh         : 'Command Line'
         },
         whiteSpace  = new RegExp('\\n\\s{4}', 'g'),
+        $label,
         padding     = 4,
         label,
         editor,
@@ -218,19 +219,29 @@ semantic.ready = function() {
       ;
       // add label
       if(title) {
-        $label
-          .addClass('attached top')
+        $('<div>')
+          .addClass('ui attached top label')
           .html('<span class="title">' + title + '</span>' + '<em>' + (displayType[contentType] || contentType) + '</em>')
           .prependTo( $(this).parent() )
         ;
       }
-      else if(label) {
-        $label
-          .addClass('pointing below')
+      if(label) {
+        $('<div>')
+          .addClass('ui pointing below label')
           .html(displayType[contentType] || contentType)
           .insertBefore ( $(this).parent() )
         ;
       }
+      if(demo) {
+        $('<a>')
+          .addClass('ui pointing below black label')
+          .html('Run Code')
+          .on('click', function() {
+            eval(code);
+          })
+          .insertBefore ( $(this).parent() )
+        ;
+      }
       editor.resize();
     },
 
diff --git a/src/modules/transition.js b/src/modules/transition.js
index 183741bc2..813990405 100755
--- a/src/modules/transition.js
+++ b/src/modules/transition.js
@@ -106,6 +106,13 @@ $.fn.transition = function() {
             $module.addClass(className.animating);
           },
 
+          direction: function() {
+            return $module.is(':visible') 
+              ? 'out'
+              : 'in'
+            ;
+          },
+
           loop: function() {
             $module
               .addClass(className.loop)
@@ -263,7 +270,9 @@ $.fn.transition = function() {
           module.set.duration();
           module.show();
           module.originalClass = $module.attr('class');
+          module.originalStyle = $module.attr('style');
           module.repaint();
+          module.set.direction();
           module.set.animating();
           $module
             .addClass(className.transition)
@@ -285,7 +294,7 @@ $.fn.transition = function() {
         reset: function() {
           module.verbose('Resetting original class', module.originalClass);
           $module
-            .removeAttr('style')
+            .attr('style', module.originalStyle)
             .attr('class', module.originalClass)
           ;
         },
@@ -469,7 +478,7 @@ $.fn.transition.settings = {
   complete     : function() {},
   
   // animation duration (useful only with future js animations)
-  animation    : 'fade in',
+  animation    : 'fade',
   duration     : '1s',
   
   className    : {