diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index a902f16242..4130ef46f2 100644
--- a/core/core.libraries.yml
+++ b/core/core.libraries.yml
@@ -908,9 +908,6 @@ drupal.dialog.off_canvas:
   version: VERSION
   js:
     misc/dialog/off-canvas.js: {}
-  css:
-    component:
-      misc/dialog/off-canvas.motion.css: {}
   dependencies:
     - core/jquery
     - core/drupal
diff --git a/core/misc/dialog/off-canvas.es6.js b/core/misc/dialog/off-canvas.es6.js
index 480561a7c6..86502adf29 100644
--- a/core/misc/dialog/off-canvas.es6.js
+++ b/core/misc/dialog/off-canvas.es6.js
@@ -143,7 +143,6 @@
               at: `${edge} top`,
               of: window,
             };
-            settings.dialogClass += ' ui-dialog-off-canvas';
             // Applies initial height to dialog based on window height.
             // See http://api.jqueryui.com/dialog for all dialog options.
             settings.height = $(window).height();
diff --git a/core/misc/dialog/off-canvas.js b/core/misc/dialog/off-canvas.js
index 9a958d4692..ceac21b58b 100644
--- a/core/misc/dialog/off-canvas.js
+++ b/core/misc/dialog/off-canvas.js
@@ -94,7 +94,6 @@
               at: edge + ' top',
               of: window
             };
-            settings.dialogClass += ' ui-dialog-off-canvas';
 
             settings.height = $(window).height();
           }
@@ -111,4 +110,4 @@
       });
     }
   };
-})(jQuery, Drupal, Drupal.debounce, Drupal.displace);
+})(jQuery, Drupal, Drupal.debounce, Drupal.displace);
\ No newline at end of file
diff --git a/core/misc/dialog/off-canvas.motion.css b/core/misc/dialog/off-canvas.motion.css
deleted file mode 100644
index dbf71b9353..0000000000
--- a/core/misc/dialog/off-canvas.motion.css
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * @file
- * Motion effects for off-canvas dialog.
- */
-
-.dialog-off-canvas__main-canvas {
-  -webkit-transition: all .7s ease;
-  -moz-transition: all .7s ease;
-  transition: all .7s ease;
-}
diff --git a/core/modules/outside_in/css/off-canvas.motion.css b/core/modules/outside_in/css/off-canvas.motion.css
new file mode 100644
index 0000000000..e395fbb716
--- /dev/null
+++ b/core/modules/outside_in/css/off-canvas.motion.css
@@ -0,0 +1,32 @@
+/**
+ * @file
+ * Motion effects for off-canvas dialog.
+ *
+ * Motion effects are in a separate file so that they can be easily turned off
+ * to improve performance if desired.
+ *
+ * @todo Move motion effects file into a core Off-Canvas library and add a
+ *   configuration option for browser rendering performance to disable this
+ *   file: https://www.drupal.org/node/2784443.
+ */
+
+/* Transition the off-canvas dialog container, with 2s delay to match main canvas speed. */
+.ui-dialog-off-canvas .ui-dialog-content {
+  -webkit-transition: all .7s ease 2s;
+  -moz-transition: all .7s ease 2s;
+  transition: all .7s ease 2s;
+}
+
+@media (max-width: 700px) {
+  .ui-dialog-off-canvas .ui-dialog-content {
+    -webkit-transition: all .7s ease;
+    -moz-transition: all .7s ease;
+    transition: all .7s ease;
+  }
+}
+
+.dialog-off-canvas__main-canvas {
+  -webkit-transition: all .7s ease;
+  -moz-transition: all .7s ease;
+  transition: all .7s ease;
+}
diff --git a/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTestBase.php b/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTestBase.php
index 6aa810568d..12c3d86717 100644
--- a/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTestBase.php
+++ b/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTestBase.php
@@ -41,9 +41,6 @@ protected function enableTheme($theme) {
    */
   protected function waitForOffCanvasToOpen() {
     $web_assert = $this->assertSession();
-    // Wait just slightly longer than the tray CSS animation.
-    // @see core/misc/dialog/off-canvas.motion.css
-    $this->getSession()->wait(800);
     $web_assert->assertWaitOnAjaxRequest();
     $this->assertElementVisibleAfterWait('css', '#drupal-off-canvas');
   }
diff --git a/core/themes/stable/css/core/dialog/off-canvas.motion.css b/core/themes/stable/css/core/dialog/off-canvas.motion.css
deleted file mode 100644
index dbf71b9353..0000000000
--- a/core/themes/stable/css/core/dialog/off-canvas.motion.css
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * @file
- * Motion effects for off-canvas dialog.
- */
-
-.dialog-off-canvas__main-canvas {
-  -webkit-transition: all .7s ease;
-  -moz-transition: all .7s ease;
-  transition: all .7s ease;
-}
diff --git a/core/themes/stable/stable.info.yml b/core/themes/stable/stable.info.yml
index 2041f9dbdc..251ecbd534 100644
--- a/core/themes/stable/stable.info.yml
+++ b/core/themes/stable/stable.info.yml
@@ -57,10 +57,6 @@ libraries-override:
       component:
         css/contextual.toolbar.css: css/contextual/contextual.toolbar.css
 
-  core/drupal.dialog.off_canvas:
-    css:
-      component:
-        misc/dialog/off-canvas.motion.css: css/core/dialog/off-canvas.motion.css
   core/drupal.dropbutton:
     css:
       component: