Add animations to the sidebar and other small places

python_docs_theme/static/pydoctheme.css

@@ -129,6 +129,7 @@ form.inline-search input[type='submit'] {
 }
 
 div.document {
+    animation: fadeIn 0.6s ease-in-out;
     display: flex;
     /* Don't let long code literals extend beyond the right side of the screen */
     overflow-wrap: break-word;
@@ -149,6 +150,7 @@ div.sphinxsidebar {
     border-radius: 5px;
     line-height: 130%;
     font-size: smaller;
+    transition: width 0.3s ease;
 }
 
 div.sphinxsidebar h3,
@@ -205,6 +207,9 @@ div.sphinxsidebar input[type='text'] {
     width: 12px;
     border-radius: 0 5px 5px 0;
     border-left: none;
+    position: absolute;
+    right: 0;
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 #sidebarbutton span {
@@ -761,3 +766,24 @@ div.versionremoved .versionmodified {
         display: none;
     }
 }
+
+/* Animation */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    div.document {
+        animation: none;
+        transition: none;
+    }
+
+    #sidebarbutton {
+        transition: none;
+    }
+}