diff --git a/core/modules/outside_in/css/outside_in.base.css b/core/modules/outside_in/css/outside_in.base.css
index ddf3b38..3d412ac 100644
--- a/core/modules/outside_in/css/outside_in.base.css
+++ b/core/modules/outside_in/css/outside_in.base.css
@@ -4,10 +4,10 @@
  */
 
 /**
- * Resets
+ * Resets 
  * inside the wrapper override font styling the page provides, this may look a bit extreme
  * but any module may place any new form element in this tray therefore CSS from any
- * front-end-theme needs to be overridden
+ * front-end-theme needs to be overridden 
  */
 #offcanvas abbr,
 #offcanvas acronym,
diff --git a/core/modules/outside_in/css/outside_in.module.css b/core/modules/outside_in/css/outside_in.module.css
index 0c3a31d..ba173f9 100644
--- a/core/modules/outside_in/css/outside_in.module.css
+++ b/core/modules/outside_in/css/outside_in.module.css
@@ -12,60 +12,80 @@
   box-shadow: -2px 3px 1px 1px rgba(0, 0, 0, 0.3333); /* LTR */
   display: inline-block;
   width: 25%;
-  -webkit-transform: translate(100%, 0);
-     -moz-transform: translate(100%, 0);
-       -o-transform: translate(100%, 0);
-      -ms-transform: translate(100%, 0);
-          transform: translate(100%, 0);
-  transition: all 0.75s;
-  -webkit-transition: all 0.75s;
-  -moz-transition: all 0.75s;
+  -webkit-transform: translateX(100%);
+     -moz-transform: translateX(100%);
+       -o-transform: translateX(100%);
+      -ms-transform: translateX(100%);
+          transform: translateX(100%);
+  /* 2s delay matches transition speed to transform speed */
+  transition: ease-out all 1s 2s;
+  -webkit-transition: ease-out all 1s 2s;
+  -moz-transition: ease-out all 1s 2s;
   z-index: 1000;
 }
 [dir="rtl"] #offcanvas {
-  right: auto;
-  left: 0;
+  text-align: right;
+  -webkit-transform: translateX(-100%);
+     -moz-transform: translateX(-100%);
+       -o-transform: translateX(-100%);
+      -ms-transform: translateX(-100%);
+          transform: translateX(-100%);
 }
-#canvas-tray-wrapper #canvas-tray {
-  width: 100%;
+#canvas-tray-wrapper.js-tray-open #offcanvas {
+  -webkit-transform: translateX(0); 
+     -moz-transform: translateX(0); 
+       -o-transform: translateX(0); 
+      -ms-transform: translateX(0); 
+          transform: translateX(0); 
+}
+#canvas-tray-wrapper #canvas-tray { 
   display: inline-block;
-  transition: all 0.75s;
-  -webkit-transition: all 0.75s;
-  -moz-transition: all 0.75s;
+  width: 100%;
+  transition: all 1s;
+  -webkit-transition: all 1s;
+  -moz-transition: all 1s;
 }
 #canvas-tray-wrapper.js-tray-open #canvas-tray {
+  left: 0; /* LTR */
   width: 75%;
+  transition: all 1s;
+  -webkit-transition: all 1s;
+  -moz-transition: all 1s;
 }
-#canvas-tray-wrapper.js-tray-open #offcanvas {
-  -webkit-transform: translate(0, 0);
-     -moz-transform: translate(0, 0);
-       -o-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
-          transform: translate(0, 0);
+[dir="rtl"] #canvas-tray-wrapper.js-tray-open #canvas-tray {
+  right: 0;
 }
 /* button that closes the offcanvas tray */
 #offcanvas > button.offcanvasClose,
 #offcanvas > button.offcanvasClose:hover {  /* todo: add hover state */
   position: absolute;
-  width: 30px;
-  height: 30px;
-  /* @todo Add correct right value to make button to appear. */
-  /* right: 0; /* LTR */
-  top: 1em;
+  right: 15px; /* LTR */
+  top: 15px;
+  height: 20px;
+  width: 20px;
   border: 0;
   border-radius: 0;
-  background: url(/core/misc/icons/ffffff/ex.svg) 0 0 no-repeat;
+  background: url(/core/misc/icons/ffffff/ex.svg) center center no-repeat;
   color: transparent;
   cursor: pointer;
 }
-[dir="rtl"] #offcanvas > span.offcanvasClose {
+[dir="rtl"] #offcanvas > button.offcanvasClose {
+  left: 15px;
   right: auto;
-  left: 0;
 }
-#offcanvas > .content {
+#offcanvas h1 { 
+  font-size: 120%;
+}
+[dir="rtl"] #offcanvas h1 { 
+  text-align: right;
+}
+#offcanvas > .content { 
   height: 100%;
   padding: 15px;
 }
+[dir="rtl"] #offcanvas .content{
+  text-align: right;
+}
 #canvas-tray.offCanvasDisplayInProgress {
    position: fixed;
    display: inline-block;
@@ -106,7 +126,7 @@
   font-weight: bold;
 }
 
-/**
+/** 
  * Inputs.
  */
 #offcanvas textarea,
@@ -123,7 +143,7 @@
 #offcanvas input[type="text"],
 #offcanvas input[type="time"],
 #offcanvas input[type="url"],
-#offcanvas input[type="week"],
+#offcanvas input[type="week"], 
 #offcanvas input[type="range"] {
   display: block;
   width: 100%;
@@ -138,17 +158,17 @@
 }
 
 /* add a background to checkboxes, radois for contrast */
-/*
-#offcanvas .radio-wrapper {
+/* 
+#offcanvas .radio-wrapper { 
   display: inline-block;
   padding: 1px;
   border-radius: 20px;
 }
-#offcanvas .checkbox-wrapper {
+#offcanvas .checkbox-wrapper { 
   display: inline-block;
   padding: 1px;
   border-radius: 3px;
-}
+} 
 */
 
 /**
@@ -176,7 +196,7 @@
 }
 
 /**
- * Admin label.
+ * Admin label. 
  */
 #offcanvas .form-item-settings-admin-label {
   font-size: 1.25em;
@@ -201,7 +221,7 @@
 }
 
 /**
- * Form actions.
+ * Form actions. 
  */
 #offcanvas .form-actions {
   padding: 1em;