Don't animate on scaling + add more keyframes

Author: agriyakhetarpal

assets/theme-css/sphinx-design/_dropdown.scss

@@ -108,44 +108,53 @@ details.sd-dropdown {
   .sd-summary-chevron-down i {
     display: inline-block;
     transform-origin: center;
-    transition:
-      transform 0.25s ease-in-out,
-      opacity 0.25s ease-in-out;
     opacity: 0.6;
   }
 
   // The chevron rotation animations are applied to
   // the icon inside the dropdown title div
   &[open] > .sd-summary-title .sd-summary-chevron-right i {
     transform: rotate(90deg);
+    animation: rotate-to-90 0.25s ease-in-out;
   }
 
   &[open] > .sd-summary-title .sd-summary-chevron-down i {
     transform: rotate(180deg);
+    animation: rotate-to-180 0.25s ease-in-out;
   }
 
-  &:hover .sd-summary-chevron-right i,
-  &:hover .sd-summary-chevron-down i {
+  &:not([open]) > .sd-summary-title .sd-summary-chevron-right i {
+    transform: rotate(0deg);
+    animation: rotate-to-0-from-90 0.25s ease-in-out;
+  }
+
+  &:not([open]) > .sd-summary-title .sd-summary-chevron-down i {
+    transform: rotate(0deg);
+    animation: rotate-to-0-from-180 0.25s ease-in-out;
+  }
+
+  > .sd-summary-title:hover .sd-summary-chevron-right i,
+  > .sd-summary-title:hover .sd-summary-chevron-down i {
     opacity: 1;
   }
 
   // Combined transforms for each state with hover. These cover
   // the cases where the chevron is rotated, say, when the dropdown
   // is open or if the chevron starts rotated (e.g. in the down-up
   // state).
-  &:not([open]):hover .sd-summary-chevron-right i {
+  &:not([open]) > .sd-summary-title:hover .sd-summary-chevron-right i {
     transform: scale(1.1);
   }
 
-  &:not([open]):hover .sd-summary-chevron-down i {
+  &:not([open]) > .sd-summary-title:hover .sd-summary-chevron-down i {
     transform: scale(1.1);
   }
 
-  &[open]:hover > .sd-summary-title .sd-summary-chevron-right i {
+  &[open] > .sd-summary-title:hover .sd-summary-chevron-right i {
     transform: rotate(90deg) scale(1.1);
   }
 
-  &[open]:hover > .sd-summary-title .sd-summary-chevron-down i {
+  &[open] > .sd-summary-title:hover .sd-summary-chevron-down i {
     transform: rotate(180deg) scale(1.1);
   }
 
@@ -160,18 +169,10 @@ details.sd-dropdown {
 
   // Transition animation
   &.sd-fade-in[open] summary ~ * {
-    -moz-animation: sd-fade-in 0.5s ease-in-out;
-    -webkit-animation: sd-fade-in 0.5s ease-in-out;
     animation: sd-fade-in 0.5s ease-in-out;
   }
 
   &.sd-fade-in-slide-down[open] summary ~ * {
-    -moz-animation:
-      sd-fade-in 0.5s ease-in-out,
-      sd-slide-down 0.5s ease-in-out;
-    -webkit-animation:
-      sd-fade-in 0.5s ease-in-out,
-      sd-slide-down 0.5s ease-in-out;
     animation:
       sd-fade-in 0.5s ease-in-out,
       sd-slide-down 0.5s ease-in-out;
@@ -205,3 +206,39 @@ details.sd-dropdown {
     transform: translate(0, 0);
   }
 }
+
+@keyframes rotate-to-90 {
+  from {
+    transform: rotate(0deg) scale(1.1);
+  }
+  to {
+    transform: rotate(90deg) scale(1.1);
+  }
+}
+
+@keyframes rotate-to-180 {
+  from {
+    transform: rotate(0deg) scale(1.1);
+  }
+  to {
+    transform: rotate(180deg) scale(1.1);
+  }
+}
+
+@keyframes rotate-to-0-from-90 {
+  from {
+    transform: rotate(90deg) scale(1.1);
+  }
+  to {
+    transform: rotate(0deg) scale(1.1);
+  }
+}
+
+@keyframes rotate-to-0-from-180 {
+  from {
+    transform: rotate(180deg) scale(1.1);
+  }
+  to {
+    transform: rotate(0deg) scale(1.1);
+  }
+}