diff --git a/README.md b/README.md
index 5fb84a1..de7d390 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,7 @@ If it is a bug [please open an issue on GitHub](http://github.com/offirgolan/emb
 - scale-down
 - scale-rotate
 - slide-reverse
+- slide-shrink
 
 ### Menu Item Animations
 
diff --git a/addon/animations/slide-shrink.js b/addon/animations/slide-shrink.js
new file mode 100644
index 0000000..763fd5a
--- /dev/null
+++ b/addon/animations/slide-shrink.js
@@ -0,0 +1,12 @@
+import Animation from 'ember-burger-menu/animations/base';
+
+export default Animation.extend({
+  animation: 'slide-shrink',
+
+  outlet(open, width, right) {
+    return {
+      marginLeft: (open && !right) ? `${width}px` : 0,
+      marginRight: (open && right) ? `${width}px` : 0
+    };
+  }
+});
diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss
index 8c82b8d..162bde3 100644
--- a/addon/styles/addon.scss
+++ b/addon/styles/addon.scss
@@ -10,6 +10,7 @@
 @import './animations/scale-rotate';
 @import './animations/scale-up';
 @import './animations/slide';
+@import './animations/slide-shrink';
 @import './animations/slide-reverse';
 
 @import './animations/menu-item/push';
@@ -44,8 +45,8 @@
 		z-index: 99;
 		height: 100%;
 		perspective: 1000px;
-		-webkit-transition: -webkit-transform $t-duration;
-		transition: transform $t-duration;
+		-webkit-transition: -webkit-transform $t-duration, margin $t-duration;
+		transition: transform $t-duration, margin $t-duration;
 
 		.bm-content {
 			position: relative;
diff --git a/addon/styles/animations/slide-shrink.scss b/addon/styles/animations/slide-shrink.scss
new file mode 100644
index 0000000..89e089d
--- /dev/null
+++ b/addon/styles/animations/slide-shrink.scss
@@ -0,0 +1,27 @@
+@import '../variables';
+
+.ember-burger-menu.bm--slide-shrink {
+	.bm-menu {
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0);
+	}
+
+	.bm-outlet {
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	&.right {
+		.bm-menu {
+			-webkit-transform: translate3d(100%, 0, 0);
+			transform: translate3d(100%, 0, 0);
+		}
+	}
+
+	&.is-open {
+		.bm-menu {
+			-webkit-transform: translate3d(0, 0, 0);
+			transform: translate3d(0, 0, 0);
+		}
+	}
+}
diff --git a/addon/utils/css-stringify.js b/addon/utils/css-stringify.js
index 4053356..9800c2b 100644
--- a/addon/utils/css-stringify.js
+++ b/addon/utils/css-stringify.js
@@ -2,7 +2,7 @@ import Ember from 'ember';
 
 const {
   isEmpty,
-  String: { htmlSafe }
+  String: { htmlSafe, dasherize }
 } = Ember;
 
 const PREFIXES = ['webkit'];
@@ -32,6 +32,7 @@ export default function cssStringify(hash = {}) {
 }
 
 function buildProp(key, value) {
+  key = dasherize(key);
   let css = [`${key}: ${value}`];
 
   if (PREFIXED_PROPS.indexOf(key) > -1) {
diff --git a/tests/dummy/app/controllers/index.js b/tests/dummy/app/controllers/index.js
index 3537482..7b6b84b 100644
--- a/tests/dummy/app/controllers/index.js
+++ b/tests/dummy/app/controllers/index.js
@@ -41,7 +41,8 @@ export default Ember.Controller.extend({
     'scale-up',
     'scale-down',
     'scale-rotate',
-    'slide-reverse'
+    'slide-reverse',
+    'slide-shrink'
   ],
 
   itemAnimations: [
diff --git a/tests/unit/animations-test.js b/tests/unit/animations-test.js
index d36452a..8f2e863 100644
--- a/tests/unit/animations-test.js
+++ b/tests/unit/animations-test.js
@@ -3,6 +3,7 @@ import { module, test } from 'qunit';
 
 const ANIMATIONS = [
   'slide',
+  'slide-shrink',
   'reveal',
   'push',
   'fall-down',
diff --git a/yarn.lock b/yarn.lock
index 89577ea..8214e8c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2194,9 +2194,9 @@ ember-cli-changelog@^0.3.4:
     rsvp "^3.1.0"
     valid-url "^1.0.9"
 
-ember-cli-code-coverage@0.3.9:
-  version "0.3.9"
-  resolved "https://registry.yarnpkg.com/ember-cli-code-coverage/-/ember-cli-code-coverage-0.3.9.tgz#bdd971fd3de451c2ec3644fd3e0be6ed8541a961"
+ember-cli-code-coverage@0.3.12:
+  version "0.3.12"
+  resolved "https://registry.yarnpkg.com/ember-cli-code-coverage/-/ember-cli-code-coverage-0.3.12.tgz#6139ad643e882c8dd738f6bc0b480fcfd3a4b351"
   dependencies:
     babel-core "^5.8.38"
     body-parser "^1.15.0"
@@ -2210,6 +2210,8 @@ ember-cli-code-coverage@0.3.9:
     extend "^3.0.0"
     fs-extra "^0.26.7"
     istanbul "^0.4.3"
+    node-dir "^0.1.16"
+    rsvp "^3.2.1"
     source-map "0.5.6"
     string.prototype.startswith "^0.2.0"
 
@@ -4818,6 +4820,12 @@ negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
 
+node-dir@^0.1.16:
+  version "0.1.16"
+  resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.16.tgz#d2ef583aa50b90d93db8cdd26fcea58353957fe4"
+  dependencies:
+    minimatch "^3.0.2"
+
 node-fetch@^1.3.3:
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"