Testing animation delay in CSS and code

sandbox/darren/just_a_box.css

@@ -2,20 +2,18 @@ Screen {
     background: lightcoral;
 }
 
-#left_pane {
-    background: red;
-    width: 20;
-    overflow: scroll scroll;
+#sidebar {
+  color: $text-panel;
+  background: $panel;
+  dock: left;
+  width: 30;
+  offset-x: -100%;
+  transition: offset 500ms in_out_cubic 2s;
+  layer: sidebar;
 }
 
-#middle_pane {
-    background: green;
-    width: 140;
-}
-
-#right_pane {
-    background: blue;
-    width: 30;
+#sidebar.-active {
+  offset-x: 0;
 }
 
 .box {

sandbox/darren/just_a_box.py

@@ -20,9 +20,13 @@ class Box(Widget, can_focus=True):
 
 
 class JustABox(App):
+    def on_load(self):
+        self.bind("s", "toggle_class('#sidebar', '-active')", description="Sidebar")
+
     def compose(self) -> ComposeResult:
         self.box = Box()
         yield self.box
+        yield Widget(id="sidebar")
 
     def key_a(self):
         self.animator.animate(