styles: Be specific about which properties are transitioned.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

web/styles/app_components.css

@@ -362,7 +362,8 @@ div.overlay {
     opacity: 0;
     visibility: hidden;
 
-    transition: all 0.2s ease-in;
+    transition: none 0.2s ease-in;
+    transition-property: opacity, visibility;
     overflow: hidden;
 
     .overlay-content {
@@ -669,7 +670,8 @@ input.settings_text_input {
 
 .animated-purple-button {
     color: hsl(0deg 0% 100%);
-    transition: all 80ms linear;
+    transition: none 80ms linear;
+    transition-property: background-color, box-shadow;
     box-shadow: none;
     /* This color just passes WCAG AA */
     background-color: hsl(240deg 96% 68%);
@@ -716,10 +718,11 @@ input.settings_text_input {
 
         .color-animated-button-text {
             color: hsl(0deg 0% 100%);
-            transition: all 0.2s ease;
+            transition: color 0.2s ease;
         }
 
-        transition: all 0.2s ease;
+        transition: none 0.2s ease;
+        transition-property: background-color, color;
     }
 
     .zulip-icon,
@@ -1177,7 +1180,7 @@ input.settings_text_input {
     color: hsl(0deg 0% 33%);
     border: 1px solid hsl(0deg 0% 80%);
     transition:
-        border linear 0.2s,
+        border-color linear 0.2s,
         box-shadow linear 0.2s;
     box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
     border-radius: 4px;

web/styles/compose.css

@@ -240,7 +240,8 @@
                 color: var(--color-compose-chevron-arrow);
                 text-decoration: none;
                 cursor: default;
-                transition: all 0.2s ease-in-out;
+                transition: none 0.2s ease-in-out;
+                transition-property: background, color;
 
                 &.narrow_to_compose_recipients {
                     background: var(
@@ -320,7 +321,7 @@
     grid-template-areas: "message-content composebox-buttons";
     border-radius: 4px;
     border: 1px solid var(--color-message-content-container-border);
-    transition: border 0.2s ease;
+    transition: border-color 0.2s ease;
 
     &:has(.new_message_textarea:focus) {
         border-color: var(--color-message-content-container-border-focus);
@@ -905,14 +906,14 @@ textarea.new_message_textarea {
     flex: 1 1 0;
     border: 1px solid hsl(0deg 0% 0% / 20%);
     border-radius: 3px;
-    transition: border 0.2s ease;
+    transition: border-color 0.2s ease;
     background: hsl(0deg 0% 100%);
 
     /* Give the recipient box, a `<div>`, the
        correct styles when focus is in the
        #stream_message_recipient_topic `<input>` */
     &:focus-within {
-        border: 1px solid hsl(0deg 0% 67%);
+        border-color: hsl(0deg 0% 67%);
     }
 
     #stream_message_recipient_topic,
@@ -991,7 +992,7 @@ textarea.new_message_textarea {
     background-color: var(--color-compose-send-button-background);
 
     &:active {
-        transition: all 80ms;
+        transition: transform 80ms;
         transform: scale(0.96);
     }
 
@@ -1461,7 +1462,7 @@ textarea.new_message_textarea {
     font-weight: 450;
 
     &:active {
-        transition: all 80ms;
+        transition: transform 80ms;
         transform: scale(0.96);
     }
 

web/styles/image_upload_widget.css

@@ -5,8 +5,6 @@
     box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
     overflow: hidden;
 
-    transition: all 0.3s ease;
-
     .image-block {
         background-size: contain;
         height: 100%;

web/styles/inbox.css

@@ -79,7 +79,8 @@
                 font-size: 16px;
                 color: var(--color-icons-inbox);
                 opacity: 0.4;
-                transition: all 140ms;
+                transition: none 140ms;
+                transition-property: background-color, opacity, transform;
                 padding: 5px;
                 margin: 0;
                 /* = -Width of the button. */

web/styles/lightbox.css

@@ -59,7 +59,7 @@
         opacity: 0;
         pointer-events: none;
         cursor: pointer;
-        transition: all 0.2s ease;
+        transition: opacity 0.2s ease;
     }
 
     &.show .exit {
@@ -183,7 +183,7 @@
             cursor: pointer;
 
             opacity: 0.5;
-            transition: all 0.3s ease;
+            transition: opacity 0.3s ease;
 
             &:hover {
                 opacity: 1;

web/styles/message_row.css

@@ -428,7 +428,8 @@
     .message_control_button {
         opacity: 0;
         visibility: hidden;
-        transition: all 0.2s ease;
+        transition: none 0.2s ease;
+        transition-property: opacity, visibility;
         width: var(--message-box-icon-width);
         height: var(--message-box-icon-height);
         text-align: center;
@@ -527,14 +528,14 @@
 .unread_marker {
     margin-left: var(--unread-marker-left);
     opacity: 0;
-    transition: all 0.3s ease-out;
+    transition: opacity 0.3s ease-out;
 
     &.slow_fade {
-        transition: all 2s ease-out;
+        transition: opacity 2s ease-out;
     }
 
     &.fast_fade {
-        transition: all 0.3s ease-out;
+        transition: opacity 0.3s ease-out;
     }
 
     &.date_unread_marker {
@@ -562,7 +563,7 @@
 }
 
 .unread .unread_marker {
-    transition: all 0.3s ease-out;
+    transition: opacity 0.3s ease-out;
     opacity: 1;
 }
 
@@ -657,7 +658,7 @@
 .edit-content-container {
     border-radius: 4px;
     border: 1px solid var(--color-message-content-container-border);
-    transition: border 0.2s ease;
+    transition: border-color 0.2s ease;
 
     &:has(.message_edit_content:focus) {
         border-color: var(--color-message-content-container-border-focus);

web/styles/modal.css

@@ -406,7 +406,7 @@
     border: 1px solid hsl(0deg 0% 80%);
     box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
     transition:
-        border linear 0.2s,
+        border-color linear 0.2s,
         box-shadow linear 0.2s;
     margin-bottom: 10px;
     width: 206px;

web/styles/popovers.css

@@ -753,7 +753,7 @@ ul.popover-group-menu-member-list {
         opacity: 0;
         pointer-events: none;
 
-        transition: all 0.3s ease;
+        transition: opacity 0.3s ease;
 
         &.fade.in {
             opacity: 1;

web/styles/portico/activity.css

@@ -145,7 +145,7 @@ tr.admin td:first-child {
         color: hsl(0deg 0% 33%);
         vertical-align: text-bottom;
         transition:
-            border linear 0.2s,
+            border-color linear 0.2s,
             box-shadow linear 0.2s;
         box-shadow: inset 0 1px 1px hsla(0deg 0% 0% / 7.5%);
 
@@ -372,7 +372,7 @@ tr.admin td:first-child {
     border: 1px solid hsl(0deg 0% 80%);
     box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
     transition:
-        border linear 0.2s,
+        border-color linear 0.2s,
         box-shadow linear 0.2s;
     color: hsl(0deg 0% 33%);
 

web/styles/portico/billing.css

@@ -59,7 +59,8 @@
             width: 120px;
             height: 70px;
             background-color: hsl(0deg 0% 94%);
-            transition: all 0.2s ease;
+            transition: none 0.2s ease;
+            transition-property: background-color, border-color;
             display: inline-block;
             text-align: center;
             cursor: pointer;

web/styles/portico/comparison_table.css

@@ -130,7 +130,7 @@
         align-items: center;
         border-radius: 3px;
         cursor: pointer;
-        transition: all 120ms ease-out;
+        transition: background-color 120ms ease-out;
     }
 
     .comparison-tab:hover {
@@ -139,7 +139,6 @@
     }
 
     .comparison-tab:active {
-        transition: all 120ms ease-out;
         background-color: hsl(0deg 0% 100% / 70%);
     }
 
@@ -178,7 +177,7 @@
     }
 
     .comparison-table tr {
-        transition: all 200ms ease-out;
+        transition: background-color 200ms ease-out;
     }
 
     .comparison-table tbody tr:hover {
@@ -199,7 +198,6 @@
         font-weight: 700;
         color: hsl(223deg 40% 30% / 100%);
         background: hsl(209deg 41% 94%);
-        transition: all 200ms ease-out;
     }
 
     .comparison-table th .icon {
@@ -537,19 +535,10 @@
 
     .comparison-table th.comparison-table-feature {
         padding-top: 28px;
-        /* Don't apply transitions to the
-           padding. This prevents the "Features"
-           label from sliding into place when
-           switching over to the All view. */
-        transition: none;
     }
 
     .comparison-table td.stuck {
         padding-top: 24px;
-        /* Don't apply transitions to the
-           padding. This makes the stuck state
-           look more precise. */
-        transition: none;
     }
 
     @media (width <= 730px) {

web/styles/portico/email_log.css

@@ -111,7 +111,7 @@
             border: 1px solid hsl(0deg 0% 80%);
             box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
             transition:
-                border linear 0.2s,
+                border-color linear 0.2s,
                 box-shadow linear 0.2s;
             margin-bottom: 10px;
             width: 206px;

web/styles/portico/footer.css

@@ -171,7 +171,7 @@
         mask-position: center;
         mask-repeat: no-repeat;
         mask-image: var(--footer-social-icon);
-        transition: all 150ms ease-out;
+        transition: background-color 150ms ease-out;
 
         &:hover {
             background-color: hsl(238.6deg 84.31% 90%);

web/styles/portico/hello.css

@@ -165,7 +165,8 @@ ul {
             "pnum" on,
             "lnum" on;
         color: hsl(0deg 0% 100%);
-        transition: all 0.8s ease-out;
+        transition: none 0.8s ease-out;
+        transition-property: background, transform;
         cursor: pointer;
     }
 
@@ -197,7 +198,7 @@ ul {
     }
 
     .client-logos-div {
-        transition: all 0.7s ease-out;
+        transition: opacity 0.7s ease-out;
         background-position: center;
     }
 
@@ -264,7 +265,7 @@ ul {
         line-height: 130%; /* 33.8px */
         position: relative;
         opacity: 0.7;
-        transition: all 0.1s;
+        transition: opacity 0.1s;
     }
 
     .screen-2__tabs ul li label:hover {
@@ -282,7 +283,7 @@ ul {
         border-radius: 5px;
         background: hsl(0deg 0% 100%);
         opacity: 0.3;
-        transition: all 0.1s;
+        transition: opacity 0.1s;
     }
 
     .screen-2__tabs ul li label:hover::before {
@@ -418,7 +419,8 @@ ul {
     }
 
     .quote__text {
-        transition: all 0.5s ease-out;
+        transition: none 0.5s ease-out;
+        transition-property: background, box-shadow;
         font-family: var(--font-ss3);
         font-style: normal;
         font-weight: 400;
@@ -448,7 +450,7 @@ ul {
         bottom: -37px;
         left: 0;
         mask-image: var(--quote-tail-mask);
-        transition: all 0.5s ease-out;
+        transition: background 0.5s ease-out;
         background: linear-gradient(
             0deg,
             hsl(0deg 0% 100% / 49%) 0%,
@@ -525,11 +527,11 @@ ul {
 
     .quote__source a {
         border-bottom: 1px solid hsl(0deg 0% 100% / 50%);
-        transition: border 0.4s ease-out;
+        transition: border-bottom-color 0.4s ease-out;
     }
 
     .quote__source a:hover {
-        border-bottom: 1px solid hsl(0deg 0% 100%);
+        border-bottom-color: hsl(0deg 0% 100%);
         transition: none;
     }
 
@@ -622,12 +624,12 @@ ul {
     .screen-4__desc a {
         font-weight: 550;
         border-bottom: 1px solid hsl(0deg 0% 100% / 50%);
-        transition: border 0.4s ease-out;
+        transition: border-bottom-color 0.4s ease-out;
     }
 
     .screen-2__desc a:hover,
     .screen-4__desc a:hover {
-        border-bottom: 1px solid hsl(0deg 0% 100%);
+        border-bottom-color: hsl(0deg 0% 100%);
         transition: none;
     }
 
@@ -669,7 +671,7 @@ ul {
         border: 2px solid hsl(0deg 0% 100% / 26%);
         background: hsl(0deg 0% 100% / 7%);
         min-height: 80px;
-        transition: all 0.2s;
+        transition: background 0.2s;
         padding: 12px 16px 14px;
 
         .card__text {

web/styles/portico/integrations.css

@@ -122,12 +122,10 @@ $category-text: hsl(219deg 23% 33%);
                     display: block;
                     color: hsl(0deg 0% 33%);
                     margin-bottom: 10px;
-                    transition:
+                    transition: border-color linear 0.2s;
-                        border linear 0.2s,
-                        box-shadow linear 0.2s;
 
                     &:focus {
-                        border: 1px solid $border-green;
+                        border-color: $border-green;
                         outline: 0;
                     }
 
@@ -191,7 +189,8 @@ $category-text: hsl(219deg 23% 33%);
                 padding: 6px 10px 3px;
                 margin: 3px 0;
                 border-radius: 5px;
-                transition: all 0.3s ease;
+                transition: none 0.3s ease;
+                transition-property: background-color, color;
                 color: $category-text;
 
                 &.selected,
@@ -261,7 +260,8 @@ $category-text: hsl(219deg 23% 33%);
                 border-left: 1px solid $light-blue-border;
                 border-right: 1px solid $light-blue-border;
                 border-bottom: 1px solid $light-blue-border;
-                transition: all 0.3s ease;
+                transition: none 0.3s ease;
+                transition-property: background-color, color;
                 font-size: 0.9em;
 
                 &.selected,
@@ -317,10 +317,11 @@ $category-text: hsl(219deg 23% 33%);
         border: 1px solid $light-blue-border;
         color: $category-text;
         text-align: center;
-        transition: all 0.3s ease;
+        transition: none 0.3s ease;
+        transition-property: border-color;
 
         &:hover {
-            border: 1px solid $border-green;
+            border-color: $border-green;
         }
 
         &.legacy {
@@ -507,7 +508,8 @@ $category-text: hsl(219deg 23% 33%);
                     width: 165px;
                     text-align: center;
                     border-radius: 5px;
-                    transition: all 0.3s ease;
+                    transition: none 0.3s ease;
+                    transition-property: background-color, color;
                     background-color: $light-blue-border;
                     color: $category-text;
 

web/styles/portico/integrations_dev_panel.css

@@ -24,7 +24,7 @@
 
         box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
         transition:
-            border linear 0.2s,
+            border-color linear 0.2s,
             box-shadow linear 0.2s;
 
         &:focus {
@@ -68,7 +68,7 @@
         border: 1px solid hsl(0deg 0% 80%);
         box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
         transition:
-            border linear 0.2s,
+            border-color linear 0.2s,
             box-shadow linear 0.2s;
         margin-bottom: 10px;
 

web/styles/portico/landing_page.css

@@ -317,7 +317,7 @@ button {
 
             box-shadow: 0 3px 10px hsl(0deg 0% 0% / 20%);
 
-            transition: all 0.2s ease;
+            transition: box-shadow 0.2s ease;
 
             &:hover {
                 box-shadow: 0 3px 10px hsl(0deg 0% 100% / 20%);
@@ -681,8 +681,6 @@ button {
         .message-feed {
             height: calc(100% - 20px);
             margin-top: 20px;
-
-            transition: all 0.1s ease;
         }
     }
 
@@ -910,7 +908,7 @@ button {
     width: 155px;
     height: 220px;
     padding: 0 5px;
-    transition: all 0.3s ease;
+    transition: border-color 0.3s ease;
     margin: 10px 5px;
     color: hsl(219deg 23% 33%);
     border-radius: 5px;
@@ -918,7 +916,7 @@ button {
 }
 
 .portico-landing.hello .integrations .integration-icons .group:hover {
-    border: 1px solid hsl(170deg 47% 53%);
+    border-color: hsl(170deg 47% 53%);
 }
 
 .portico-landing.hello .integrations .integration-logo {
@@ -1079,7 +1077,7 @@ button {
     font-size: 3em;
     text-align: center;
 
-    transition: all 0.2s ease;
+    transition: background 0.2s ease;
 }
 
 .portico-landing.apps .other-apps .apps .icon:hover {
@@ -1582,7 +1580,7 @@ button {
 
     font-size: 0.9em;
 
-    transition: all 0.3s ease;
+    transition: background-color 0.3s ease;
 }
 
 .for-education-pricing-model .pricing-container .price-box:focus {

web/styles/portico/navbar.css

@@ -194,7 +194,8 @@ details summary::-webkit-details-marker {
     opacity: 0;
     height: 0;
     width: 100%;
-    transition: all 0.05s;
+    transition: none 0.05s;
+    transition-property: height, opacity;
 }
 
 .top-menu-tab-input-unselect:not(:checked) + .top-menu-submenu-backdrop {
@@ -238,7 +239,8 @@ details summary::-webkit-details-marker {
     gap: 16px;
     opacity: 0;
     visibility: hidden;
-    transition: all 0.2s;
+    transition: none 0.2s;
+    transition-property: opacity, visibility;
 }
 
 #case-studies-submenu {
@@ -382,7 +384,8 @@ details summary::-webkit-details-marker {
         "lnum" on;
     color: hsl(0deg 0% 100% / 80%);
 
-    transition: all 0.2;
+    transition: none 0.2;
+    transition-property: backdrop-filter, background, bottom, height;
     overscroll-behavior: contain;
 }
 
@@ -504,7 +507,8 @@ details summary::-webkit-details-marker {
     position: sticky;
     top: 0;
     z-index: 1;
-    transition: all 0.3s;
+    transition: none 0.3s;
+    transition-property: background, backdrop-filter;
     height: 60px;
     overflow: hidden;
     display: flex;

web/styles/portico/portico.css

@@ -533,7 +533,7 @@ input.text-error {
             font-size: 0.6em;
             margin-left: 5px;
             opacity: 0.5;
-            transition: all 0.2s ease;
+            transition: opacity 0.2s ease;
         }
 
         &:hover .realm-name i.fa {
@@ -684,14 +684,14 @@ input.text-error {
         padding: 10px;
         border: 1px solid hsl(0deg 0% 93%);
         border-radius: 4px;
-        transition: all 0.3s ease;
+        transition: border-color 0.3s ease;
 
         & a {
             color: inherit;
         }
 
         &:hover {
-            border: 1px solid hsl(0deg 0% 73%);
+            border-color: hsl(0deg 0% 73%);
         }
 
         .avatar {
@@ -837,7 +837,8 @@ input.new-organization-button {
         padding: 2px 7px 1px 8px;
         font-weight: 600;
         font-size: 16px;
-        transition: all 0.2s ease-in;
+        transition: none 0.2s ease-in;
+        transition-property: background-color, color;
         border-radius: 4px;
 
         &:hover {
@@ -1103,7 +1104,8 @@ input.new-organization-button {
             right: calc(100% - 40px);
             fill: hsl(0deg 0% 100%);
             z-index: 2;
-            transition: all 0.3s ease;
+            transition: none 0.3s ease;
+            transition-property: right, top;
             cursor: pointer;
         }
 
@@ -1117,7 +1119,7 @@ input.new-organization-button {
             pointer-events: none;
             overflow: hidden;
             transform: translateX(0);
-            transition: all 0.3s ease;
+            transition: transform 0.3s ease;
         }
 
         .sidebar.show {

web/styles/portico/portico_signin.css

@@ -209,7 +209,7 @@ html {
 
         transition:
             color 0.3s ease,
-            border 0.3s ease;
+            border-color 0.3s ease;
 
         &:hover {
             color: hsl(156deg 62% 61%);
@@ -428,7 +428,8 @@ html {
         border: none;
         border-radius: 4px;
 
-        transition: all 0.3s ease;
+        transition: none 0.3s ease;
+        transition-property: background-color, outline;
 
         &:hover {
             background-color: hsl(213deg 33% 31%);
@@ -547,7 +548,7 @@ html {
             background-color: hsl(0deg 0% 100%);
             color: hsl(0deg 0% 33%);
 
-            transition: border 0.3s ease;
+            transition: border-color 0.3s ease;
 
             &:focus:invalid {
                 box-shadow: none;
@@ -555,7 +556,7 @@ html {
             }
 
             &:focus {
-                border: 1px solid hsl(0deg 0% 53%);
+                border-color: hsl(0deg 0% 53%);
                 outline: 0;
             }
         }
@@ -571,7 +572,8 @@ html {
 
             margin-top: 1px;
 
-            transition: all 0.3s ease;
+            transition: none 0.3s ease;
+            transition-property: color, font-size, font-weight, transform;
         }
 
         &.moving-label {

web/styles/rendered_markdown.css

@@ -349,7 +349,7 @@
             float: right;
             width: 15px;
             cursor: pointer;
-            transition: 0.4s ease;
+            transition: transform 0.4s ease;
             transform: rotate(45deg);
 
             &::before,
@@ -360,7 +360,7 @@
                 width: 12px;
                 height: 3px;
                 background-color: hsl(0deg 0% 83%);
-                transition: 0.4s ease;
+                transition: transform 0.4s ease;
             }
 
             &::after {
@@ -917,7 +917,7 @@
     &::-webkit-scrollbar-thumb {
         background-color: hsl(0deg 0% 0% / 30%);
         border-radius: 20px;
-        transition: all 0.2s ease;
+        transition: background-color 0.2s ease;
     }
 
     &::-webkit-scrollbar-thumb:hover {

web/styles/settings.css

@@ -868,7 +868,7 @@ input[type="checkbox"] {
         position: relative;
         margin-left: 5px;
         color: hsl(0deg 0% 67%);
-        transition: all 0.3s ease;
+        transition: color 0.3s ease;
 
         &:hover {
             color: hsl(0deg 0% 27%);
@@ -1494,7 +1494,7 @@ $option_title_width: 180px;
     color: hsl(0deg 0% 33%);
     border: 1px solid hsl(0deg 0% 80%);
     transition:
-        border linear 0.2s,
+        border-color linear 0.2s,
         box-shadow linear 0.2s;
 
     &:focus {
@@ -1709,7 +1709,7 @@ $option_title_width: 180px;
 
     box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
     transition:
-        border linear 0.2s,
+        border-color linear 0.2s,
         box-shadow linear 0.2s;
 
     &:focus {
@@ -2025,7 +2025,7 @@ $option_title_width: 180px;
     border: 1px solid hsl(0deg 0% 80%);
     box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
     transition:
-        border linear 0.2s,
+        border-color linear 0.2s,
         box-shadow linear 0.2s;
     margin-bottom: 10px;
 

web/styles/subscriptions.css

@@ -286,7 +286,8 @@ h4.user_group_setting_subsection_title {
 
     cursor: pointer;
 
-    transition: all 0.3s ease;
+    transition: none 0.3s ease;
+    transition-property: opacity, transform;
 }
 
 .user-groups-container .user-groups-header.slide-left .fa-chevron-left,
@@ -328,7 +329,6 @@ h4.user_group_setting_subsection_title {
         .user-groups-title,
         .subscriptions-title {
             display: inline-block;
-            transition: all 0.3s ease;
             transform: translate(-13px, 0);
         }
 
@@ -1229,7 +1229,7 @@ div.settings-radio-input-parent {
         background-color: var(--color-background-modal);
         border-top: none;
 
-        transition: all 0.3s ease;
+        transition: left 0.3s ease;
         z-index: 10;
 
         &.show {

web/styles/widgets.css

@@ -130,7 +130,7 @@
         border: 1px solid hsl(0deg 0% 80%);
         box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
         transition:
-            border linear 0.2s,
+            border-color linear 0.2s,
             box-shadow linear 0.2s;
         border-radius: 4px;
         color: hsl(0deg 0% 33%);
@@ -218,7 +218,8 @@ button {
         padding: 4px;
         padding-left: 14px;
         padding-right: 14px;
-        transition: all 0.2s ease;
+        transition: none 0.2s ease;
+        transition-property: background-color, border-color, color;
 
         &:hover,
         &:focus {

web/styles/zulip.css

@@ -438,7 +438,7 @@ body.has-overlay-scrollbar {
             text-overflow: ellipsis;
             /* Button curvature and transitions. */
             border-radius: 4px;
-            transition: all 100ms ease-out;
+            transition: transform 100ms ease-out;
 
             &:hover,
             &:focus {
@@ -773,7 +773,7 @@ strong {
 
 .new_messages,
 .new_messages_fadeout {
-    transition: all 3s ease-in-out;
+    transition: background-color 3s ease-in-out;
 }
 
 .messagebox-content .slow-send-spinner {
@@ -918,7 +918,7 @@ div.focused-message-list {
         border-radius: 4px;
         border: 1px solid hsl(0deg 0% 80%);
         transition:
-            border linear 0.2s,
+            border-color linear 0.2s,
             box-shadow linear 0.2s;
 
         &:focus {
@@ -1295,7 +1295,7 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
     border: 1px solid hsl(0deg 0% 80%);
     box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
     transition:
-        border linear 0.2s,
+        border-color linear 0.2s,
         box-shadow linear 0.2s;
 
     &:focus {