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 75dde50..9f37f56 100644
--- a/core/modules/outside_in/css/outside_in.module.css
+++ b/core/modules/outside_in/css/outside_in.module.css
@@ -12,59 +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;
-  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;
@@ -105,7 +126,7 @@
   font-weight: bold;
 }
 
-/**
+/** 
  * Inputs.
  */
 #offcanvas textarea,
@@ -122,7 +143,11 @@
 #offcanvas input[type="text"],
 #offcanvas input[type="time"],
 #offcanvas input[type="url"],
+<<<<<<< HEAD
 #offcanvas input[type="week"],
+=======
+#offcanvas input[type="week"], 
+>>>>>>> css-and-animation
 #offcanvas input[type="range"] {
   display: block;
   width: 100%;
@@ -137,17 +162,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;
-}
+} 
 */
 
 /**
@@ -175,7 +200,7 @@
 }
 
 /**
- * Admin label.
+ * Admin label. 
  */
 #offcanvas .form-item-settings-admin-label {
   font-size: 1.25em;
@@ -200,7 +225,7 @@
 }
 
 /**
- * Form actions.
+ * Form actions. 
  */
 #offcanvas .form-actions {
   padding: 1em;
diff --git a/core/modules/outside_in/tests/modules/offcanvas_test/src/Form/SidebarForm.php b/core/modules/outside_in/tests/modules/offcanvas_test/src/Form/SidebarForm.php
new file mode 100644
index 0000000..16c4f8d
--- /dev/null
+++ b/core/modules/outside_in/tests/modules/offcanvas_test/src/Form/SidebarForm.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace Drupal\offcanvas_test\Form;
+
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Plugin\PluginFormInterface;
+use Drupal\outside_in\OperationAwareFormInterface;
+
+/**
+ * @todo.
+ */
+class SidebarForm implements PluginFormInterface, OperationAwareFormInterface {
+
+  /**
+   * @var string
+   */
+  protected $operation;
+
+  /**
+   * {@inheritdoc}
+   */
+  public function setOperation($operation) {
+    $this->operation = $operation;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
+    return $form;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function validateConfigurationForm(array &$form, FormStateInterface $form_state) {
+    // Intentionally empty.
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {
+    // Intentionally empty.
+  }
+
+}
diff --git a/core/modules/outside_in/tests/src/FunctionalJavascript/OffCanvasTest.php b/core/modules/outside_in/tests/src/FunctionalJavascript/OffCanvasTest.php
index 52ebaaf..227305c 100644
--- a/core/modules/outside_in/tests/src/FunctionalJavascript/OffCanvasTest.php
+++ b/core/modules/outside_in/tests/src/FunctionalJavascript/OffCanvasTest.php
@@ -2,9 +2,12 @@
 
 namespace Drupal\Tests\outside_in\FunctionalJavascript;
 
-
 use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
 
+/**
+ * Tests the off-canvas tray functionality.
+ */
+
 class OffCanvasTest extends JavascriptTestBase {
 
   /**
@@ -24,6 +27,7 @@ class OffCanvasTest extends JavascriptTestBase {
   public function testOffCanvasLinks() {
     // @todo Add other themes to test against.
     $themes = ['bartik', 'stark'];
+    // @todo Add RTL Language test for each theme.
     // Test the same functionality on multiple themes
     foreach ($themes as $theme) {
       // Enable the theme.
@@ -31,12 +35,10 @@ public function testOffCanvasLinks() {
       $theme_config = \Drupal::configFactory()->getEditable('system.theme');
       $theme_config->set('default', $theme);
       $theme_config->save();
-      //$this->placeBlock('offcanvas_links_block', ['id' => 'offcanvaslinks']);
       $this->drupalGet('/offcanvas-test-links');
 
       $page = $this->getSession()->getPage();
 
-      $this->htmlOutput($page->getContent());
       $web_assert = $this->assertSession();
 
       // Make sure off-canvas tray is on page when first loaded.
@@ -47,10 +49,7 @@ public function testOffCanvasLinks() {
       foreach (['1', '2'] as $link_index) {
         // Click the first test like that should open the page.
         $page->clickLink("Click Me $link_index!");
-        $web_assert->assertWaitOnAjaxRequest();
-        // Wait for off-canvas element to appear.
-        $condition = "(jQuery('#offcanvas').length > 0)";
-        $this->assertJsCondition($condition, 5000);
+        $this->waitForOffCanvasToOpen();
 
         // Check that the canvas is not on the page.
         $web_assert->elementExists('css', '#offcanvas');
@@ -71,7 +70,7 @@ public function testOffCanvasLinks() {
         // @todo Should the close have an id?
         $offcanvas_tray->find('css', '.offcanvasClose')->press();
         // Wait for animation to be done.
-        $web_assert->assertWaitOnAjaxRequest();
+        $this->waitForOffcanvasToClose();
         // Make sure canvas doesn't exist after closing.
         $web_assert->elementNotExists('css', '#offcanvas');
       }
@@ -80,4 +79,20 @@ public function testOffCanvasLinks() {
     }
   }
 
+  /**
+   * Waits for Off-canvas tray to close.
+   */
+  protected function waitForOffcanvasToClose() {
+    $condition = "(jQuery('#offcanvas').length == 0)";
+    $this->assertJsCondition($condition, 5000);
+  }
+
+  /**
+   * Waits for Off-canvas tray to open.
+   */
+  protected function waitForOffCanvasToOpen() {
+    $condition = "(jQuery('#offcanvas').length > 0)";
+    $this->assertJsCondition($condition, 5000);
+  }
+
 }