diff --git a/addon/components/paper-toast.js b/addon/components/paper-toast.js
index d333dd76c..b12120363 100644
--- a/addon/components/paper-toast.js
+++ b/addon/components/paper-toast.js
@@ -1,15 +1,17 @@
 import Ember from 'ember';
-import AnimateMixin from 'ember-paper/mixins/animate-mixin';
+import TransitionMixin from 'ember-css-transitions/mixins/transition-mixin';
 
 /*global Hammer*/
 
-export default Ember.Component.extend(AnimateMixin, {
+export default Ember.Component.extend(TransitionMixin, {
   tagName: 'md-toast',
   classNames: ['md-default-theme'],
   classNameBindings: ['_right:md-right', '_left:md-left', '_bottom:md-bottom', '_top:md-top'],
-  animated: true,
+
   'align-fab': true,
 
+  transitionClass: 'ng',
+
   // right,left,bottom and top should only be given once. Therefor we use a computed for each so that they can
   // never change once initially provided.
   _right: Ember.computed(function () { return this.get('right'); }),
diff --git a/addon/mixins/animate-mixin.js b/addon/mixins/animate-mixin.js
deleted file mode 100644
index 4b1e78e83..000000000
--- a/addon/mixins/animate-mixin.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Mixin.create({
-  classNameBindings: ['animated:ng-enter'],
-
-  /**
-   * Wait for redraw so we can add add animation classes
-   * See CSS redraw / repaint for more details.
-   */
-    reDraw (element) {
-    return new Ember.RSVP.Promise(function (resolve) {
-      setTimeout(function() {
-        // These are just meant to be called so browser to a repaint.
-        /* jshint ignore:start */
-        element[0].offsetHeight;
-        element[0].getComputedStyle;
-        /* jshint ignore:end */
-        resolve(element);
-      },0);
-    });
-  },
-
-  _animateOnInsert: Ember.on('didInsertElement', function () {
-    var _self = this;
-    this.reDraw(this.$()).then(function () {
-      _self.$().addClass('ng-enter-active');
-    });
-  }),
-
-  _animateOnDestroy: Ember.on('willDestroyElement', function () {
-    var old = this.$().clone().addClass('ng-leave').removeClass('ng-enter ng-enter-active').appendTo(this.$().parent());
-    this.reDraw(old).then(function () {
-      old.one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function () {
-        old.remove();
-      });
-      old.addClass('ng-leave-active');
-    });
-  })
-
-
-});
diff --git a/package.json b/package.json
index bdf8918b3..4f38b728c 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,9 @@
   },
   "dependencies": {
     "broccoli-autoprefixer": "^3.0.0",
-    "ember-cli-babel": "^5.1.3"
+    "ember-cli-babel": "^5.1.3",
+    "ember-css-transitions": "^0.1.0",
+    "ember-wormhole": "^0.3.4"
   },
   "keywords": [
     "ember-addon",
diff --git a/tests/dummy/app/templates/toast.hbs b/tests/dummy/app/templates/toast.hbs
index ac28d3554..fce8dc6bc 100644
--- a/tests/dummy/app/templates/toast.hbs
+++ b/tests/dummy/app/templates/toast.hbs
@@ -6,11 +6,11 @@
         <span>Toasts</span>
     </h2>
 {{/paper-toolbar}}
-{{#paper-content classNames="md-padding"}}
+{{#paper-content class="md-padding"}}
     <div class="doc-content" style="min-height: 448px; position: relative; overflow: hidden;">
         <h3>Basic Usage</h3>
         <p>Toast can be dismissed with a swipe, a timer, or a button.</p>
-      {{#paper-button classNames="md-fab md-fab-top-right"}}FAB{{/paper-button}}
+      {{#paper-button class="md-fab md-fab-top-right"}}FAB{{/paper-button}}
 
       <!-- some toasts -->
 
@@ -76,7 +76,7 @@
       {{#paper-checkbox checked=top}}Top{{/paper-checkbox}}
 
 
-      {{#paper-button action="openFabBottom" primary=true classNames="md-fab md-fab-bottom-right"}}FAB{{/paper-button}}
+      {{#paper-button action="openFabBottom" primary=true class="md-fab md-fab-bottom-right"}}FAB{{/paper-button}}