From c57543395ccf24fcfbd06ab5f8d1c4ff5167340c Mon Sep 17 00:00:00 2001
From: Your Name <your-email@example.com>
Date: Sat, 21 Feb 2026 16:25:28 -0800
Subject: [PATCH] Fix #1853: use individual translate property to avoid
 !important conflicts

Bootstrap's `.translate-middle` sets `transform: translate(-50%, -50%) !important`.
Per the CSS Cascade spec, `!important` author declarations override CSS animation
keyframe values, causing animated transforms to be suppressed when combined with
Bootstrap's centering utility.

Replace `transform: translate3d(x, y, z)` with the CSS individual `translate`
property in all animations that only use translation (fading entrances/exits,
sliding entrances/exits, shake attention seekers). The `translate` property is a
separate CSS property from `transform` and composes independently, so it is not
overridden by Bootstrap's `transform: ... !important` rule.

Browser support: Chrome 104+, Firefox 72+, Safari 14.1+

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 source/attention_seekers/shake.css            | 6 +++---
 source/attention_seekers/shakeX.css           | 6 +++---
 source/attention_seekers/shakeY.css           | 6 +++---
 source/fading_entrances/fadeInBottomLeft.css  | 4 ++--
 source/fading_entrances/fadeInBottomRight.css | 4 ++--
 source/fading_entrances/fadeInDown.css        | 4 ++--
 source/fading_entrances/fadeInDownBig.css     | 4 ++--
 source/fading_entrances/fadeInLeft.css        | 4 ++--
 source/fading_entrances/fadeInLeftBig.css     | 4 ++--
 source/fading_entrances/fadeInRight.css       | 4 ++--
 source/fading_entrances/fadeInRightBig.css    | 4 ++--
 source/fading_entrances/fadeInTopLeft.css     | 4 ++--
 source/fading_entrances/fadeInTopRight.css    | 4 ++--
 source/fading_entrances/fadeInUp.css          | 4 ++--
 source/fading_entrances/fadeInUpBig.css       | 4 ++--
 source/fading_exits/fadeOutBottomLeft.css     | 4 ++--
 source/fading_exits/fadeOutBottomRight.css    | 4 ++--
 source/fading_exits/fadeOutDown.css           | 2 +-
 source/fading_exits/fadeOutDownBig.css        | 2 +-
 source/fading_exits/fadeOutLeft.css           | 2 +-
 source/fading_exits/fadeOutLeftBig.css        | 2 +-
 source/fading_exits/fadeOutRight.css          | 2 +-
 source/fading_exits/fadeOutRightBig.css       | 2 +-
 source/fading_exits/fadeOutTopLeft.css        | 4 ++--
 source/fading_exits/fadeOutTopRight.css       | 4 ++--
 source/fading_exits/fadeOutUp.css             | 2 +-
 source/fading_exits/fadeOutUpBig.css          | 2 +-
 source/sliding_entrances/slideInDown.css      | 4 ++--
 source/sliding_entrances/slideInLeft.css      | 4 ++--
 source/sliding_entrances/slideInRight.css     | 4 ++--
 source/sliding_entrances/slideInUp.css        | 4 ++--
 source/sliding_exits/slideOutDown.css         | 4 ++--
 source/sliding_exits/slideOutLeft.css         | 4 ++--
 source/sliding_exits/slideOutRight.css        | 4 ++--
 source/sliding_exits/slideOutUp.css           | 4 ++--
 35 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/source/attention_seekers/shake.css b/source/attention_seekers/shake.css
index 22f7ff61a..3287cf72e 100644
--- a/source/attention_seekers/shake.css
+++ b/source/attention_seekers/shake.css
@@ -1,7 +1,7 @@
 @keyframes shake {
   from,
   to {
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 
   10%,
@@ -9,14 +9,14 @@
   50%,
   70%,
   90% {
-    transform: translate3d(-10px, 0, 0);
+    translate: -10px 0;
   }
 
   20%,
   40%,
   60%,
   80% {
-    transform: translate3d(10px, 0, 0);
+    translate: 10px 0;
   }
 }
 
diff --git a/source/attention_seekers/shakeX.css b/source/attention_seekers/shakeX.css
index 860fd5ee5..295d1fd6a 100644
--- a/source/attention_seekers/shakeX.css
+++ b/source/attention_seekers/shakeX.css
@@ -1,7 +1,7 @@
 @keyframes shakeX {
   from,
   to {
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 
   10%,
@@ -9,14 +9,14 @@
   50%,
   70%,
   90% {
-    transform: translate3d(-10px, 0, 0);
+    translate: -10px 0;
   }
 
   20%,
   40%,
   60%,
   80% {
-    transform: translate3d(10px, 0, 0);
+    translate: 10px 0;
   }
 }
 
diff --git a/source/attention_seekers/shakeY.css b/source/attention_seekers/shakeY.css
index 07bfdabf9..688721cbb 100644
--- a/source/attention_seekers/shakeY.css
+++ b/source/attention_seekers/shakeY.css
@@ -1,7 +1,7 @@
 @keyframes shakeY {
   from,
   to {
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 
   10%,
@@ -9,14 +9,14 @@
   50%,
   70%,
   90% {
-    transform: translate3d(0, -10px, 0);
+    translate: 0 -10px;
   }
 
   20%,
   40%,
   60%,
   80% {
-    transform: translate3d(0, 10px, 0);
+    translate: 0 10px;
   }
 }
 
diff --git a/source/fading_entrances/fadeInBottomLeft.css b/source/fading_entrances/fadeInBottomLeft.css
index 1efef1973..100f750a2 100644
--- a/source/fading_entrances/fadeInBottomLeft.css
+++ b/source/fading_entrances/fadeInBottomLeft.css
@@ -1,11 +1,11 @@
 @keyframes fadeInBottomLeft {
   from {
     opacity: 0;
-    transform: translate3d(-100%, 100%, 0);
+    translate: -100% 100%;
   }
   to {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 }
 
diff --git a/source/fading_entrances/fadeInBottomRight.css b/source/fading_entrances/fadeInBottomRight.css
index f551c5766..428195e6b 100644
--- a/source/fading_entrances/fadeInBottomRight.css
+++ b/source/fading_entrances/fadeInBottomRight.css
@@ -1,11 +1,11 @@
 @keyframes fadeInBottomRight {
   from {
     opacity: 0;
-    transform: translate3d(100%, 100%, 0);
+    translate: 100% 100%;
   }
   to {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 }
 
diff --git a/source/fading_entrances/fadeInDown.css b/source/fading_entrances/fadeInDown.css
index 3134f742a..c2d4cce9c 100644
--- a/source/fading_entrances/fadeInDown.css
+++ b/source/fading_entrances/fadeInDown.css
@@ -1,12 +1,12 @@
 @keyframes fadeInDown {
   from {
     opacity: 0;
-    transform: translate3d(0, -100%, 0);
+    translate: 0 -100%;
   }
 
   to {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 }
 
diff --git a/source/fading_entrances/fadeInDownBig.css b/source/fading_entrances/fadeInDownBig.css
index 86e3703ae..331ee38b6 100644
--- a/source/fading_entrances/fadeInDownBig.css
+++ b/source/fading_entrances/fadeInDownBig.css
@@ -1,12 +1,12 @@
 @keyframes fadeInDownBig {
   from {
     opacity: 0;
-    transform: translate3d(0, -2000px, 0);
+    translate: 0 -2000px;
   }
 
   to {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 }
 
diff --git a/source/fading_entrances/fadeInLeft.css b/source/fading_entrances/fadeInLeft.css
index 629edcad2..0c5fb2666 100644
--- a/source/fading_entrances/fadeInLeft.css
+++ b/source/fading_entrances/fadeInLeft.css
@@ -1,12 +1,12 @@
 @keyframes fadeInLeft {
   from {
     opacity: 0;
-    transform: translate3d(-100%, 0, 0);
+    translate: -100% 0;
   }
 
   to {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 }
 
diff --git a/source/fading_entrances/fadeInLeftBig.css b/source/fading_entrances/fadeInLeftBig.css
index 1c7e6c16c..e0976d966 100644
--- a/source/fading_entrances/fadeInLeftBig.css
+++ b/source/fading_entrances/fadeInLeftBig.css
@@ -1,12 +1,12 @@
 @keyframes fadeInLeftBig {
   from {
     opacity: 0;
-    transform: translate3d(-2000px, 0, 0);
+    translate: -2000px 0;
   }
 
   to {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 }
 
diff --git a/source/fading_entrances/fadeInRight.css b/source/fading_entrances/fadeInRight.css
index a5e0eeaae..bfb0a4b32 100644
--- a/source/fading_entrances/fadeInRight.css
+++ b/source/fading_entrances/fadeInRight.css
@@ -1,12 +1,12 @@
 @keyframes fadeInRight {
   from {
     opacity: 0;
-    transform: translate3d(100%, 0, 0);
+    translate: 100% 0;
   }
 
   to {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 }
 
diff --git a/source/fading_entrances/fadeInRightBig.css b/source/fading_entrances/fadeInRightBig.css
index d646a7d31..b17a91b3a 100644
--- a/source/fading_entrances/fadeInRightBig.css
+++ b/source/fading_entrances/fadeInRightBig.css
@@ -1,12 +1,12 @@
 @keyframes fadeInRightBig {
   from {
     opacity: 0;
-    transform: translate3d(2000px, 0, 0);
+    translate: 2000px 0;
   }
 
   to {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 }
 
diff --git a/source/fading_entrances/fadeInTopLeft.css b/source/fading_entrances/fadeInTopLeft.css
index cfcf37fcd..37d782b60 100644
--- a/source/fading_entrances/fadeInTopLeft.css
+++ b/source/fading_entrances/fadeInTopLeft.css
@@ -1,11 +1,11 @@
 @keyframes fadeInTopLeft {
   from {
     opacity: 0;
-    transform: translate3d(-100%, -100%, 0);
+    translate: -100% -100%;
   }
   to {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 }
 
diff --git a/source/fading_entrances/fadeInTopRight.css b/source/fading_entrances/fadeInTopRight.css
index 900cfd9e5..28e9bd92a 100644
--- a/source/fading_entrances/fadeInTopRight.css
+++ b/source/fading_entrances/fadeInTopRight.css
@@ -1,11 +1,11 @@
 @keyframes fadeInTopRight {
   from {
     opacity: 0;
-    transform: translate3d(100%, -100%, 0);
+    translate: 100% -100%;
   }
   to {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 }
 
diff --git a/source/fading_entrances/fadeInUp.css b/source/fading_entrances/fadeInUp.css
index ed65b3645..4366974a4 100644
--- a/source/fading_entrances/fadeInUp.css
+++ b/source/fading_entrances/fadeInUp.css
@@ -1,12 +1,12 @@
 @keyframes fadeInUp {
   from {
     opacity: 0;
-    transform: translate3d(0, 100%, 0);
+    translate: 0 100%;
   }
 
   to {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 }
 
diff --git a/source/fading_entrances/fadeInUpBig.css b/source/fading_entrances/fadeInUpBig.css
index af212fa53..4dfd52a50 100644
--- a/source/fading_entrances/fadeInUpBig.css
+++ b/source/fading_entrances/fadeInUpBig.css
@@ -1,12 +1,12 @@
 @keyframes fadeInUpBig {
   from {
     opacity: 0;
-    transform: translate3d(0, 2000px, 0);
+    translate: 0 2000px;
   }
 
   to {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 }
 
diff --git a/source/fading_exits/fadeOutBottomLeft.css b/source/fading_exits/fadeOutBottomLeft.css
index 72f33e951..3de4253ac 100644
--- a/source/fading_exits/fadeOutBottomLeft.css
+++ b/source/fading_exits/fadeOutBottomLeft.css
@@ -1,11 +1,11 @@
 @keyframes fadeOutBottomLeft {
   from {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
   to {
     opacity: 0;
-    transform: translate3d(-100%, 100%, 0);
+    translate: -100% 100%;
   }
 }
 
diff --git a/source/fading_exits/fadeOutBottomRight.css b/source/fading_exits/fadeOutBottomRight.css
index dcc5f384d..0d99b2ab4 100644
--- a/source/fading_exits/fadeOutBottomRight.css
+++ b/source/fading_exits/fadeOutBottomRight.css
@@ -1,11 +1,11 @@
 @keyframes fadeOutBottomRight {
   from {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
   to {
     opacity: 0;
-    transform: translate3d(100%, 100%, 0);
+    translate: 100% 100%;
   }
 }
 
diff --git a/source/fading_exits/fadeOutDown.css b/source/fading_exits/fadeOutDown.css
index 839b990c5..3ba65ca36 100644
--- a/source/fading_exits/fadeOutDown.css
+++ b/source/fading_exits/fadeOutDown.css
@@ -5,7 +5,7 @@
 
   to {
     opacity: 0;
-    transform: translate3d(0, 100%, 0);
+    translate: 0 100%;
   }
 }
 
diff --git a/source/fading_exits/fadeOutDownBig.css b/source/fading_exits/fadeOutDownBig.css
index 5b58d1af7..1f3d58c74 100644
--- a/source/fading_exits/fadeOutDownBig.css
+++ b/source/fading_exits/fadeOutDownBig.css
@@ -5,7 +5,7 @@
 
   to {
     opacity: 0;
-    transform: translate3d(0, 2000px, 0);
+    translate: 0 2000px;
   }
 }
 
diff --git a/source/fading_exits/fadeOutLeft.css b/source/fading_exits/fadeOutLeft.css
index 16f2fc9c3..cef07a474 100644
--- a/source/fading_exits/fadeOutLeft.css
+++ b/source/fading_exits/fadeOutLeft.css
@@ -5,7 +5,7 @@
 
   to {
     opacity: 0;
-    transform: translate3d(-100%, 0, 0);
+    translate: -100% 0;
   }
 }
 
diff --git a/source/fading_exits/fadeOutLeftBig.css b/source/fading_exits/fadeOutLeftBig.css
index e50b468f6..528975bbb 100644
--- a/source/fading_exits/fadeOutLeftBig.css
+++ b/source/fading_exits/fadeOutLeftBig.css
@@ -5,7 +5,7 @@
 
   to {
     opacity: 0;
-    transform: translate3d(-2000px, 0, 0);
+    translate: -2000px 0;
   }
 }
 
diff --git a/source/fading_exits/fadeOutRight.css b/source/fading_exits/fadeOutRight.css
index bf0cbb63f..ac4e79f82 100644
--- a/source/fading_exits/fadeOutRight.css
+++ b/source/fading_exits/fadeOutRight.css
@@ -5,7 +5,7 @@
 
   to {
     opacity: 0;
-    transform: translate3d(100%, 0, 0);
+    translate: 100% 0;
   }
 }
 
diff --git a/source/fading_exits/fadeOutRightBig.css b/source/fading_exits/fadeOutRightBig.css
index f60617093..3e265042b 100644
--- a/source/fading_exits/fadeOutRightBig.css
+++ b/source/fading_exits/fadeOutRightBig.css
@@ -5,7 +5,7 @@
 
   to {
     opacity: 0;
-    transform: translate3d(2000px, 0, 0);
+    translate: 2000px 0;
   }
 }
 
diff --git a/source/fading_exits/fadeOutTopLeft.css b/source/fading_exits/fadeOutTopLeft.css
index 87d4de0e7..7b7fbc975 100644
--- a/source/fading_exits/fadeOutTopLeft.css
+++ b/source/fading_exits/fadeOutTopLeft.css
@@ -1,11 +1,11 @@
 @keyframes fadeOutTopLeft {
   from {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
   to {
     opacity: 0;
-    transform: translate3d(-100%, -100%, 0);
+    translate: -100% -100%;
   }
 }
 
diff --git a/source/fading_exits/fadeOutTopRight.css b/source/fading_exits/fadeOutTopRight.css
index 65bcc18bb..24679e006 100644
--- a/source/fading_exits/fadeOutTopRight.css
+++ b/source/fading_exits/fadeOutTopRight.css
@@ -1,11 +1,11 @@
 @keyframes fadeOutTopRight {
   from {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
   to {
     opacity: 0;
-    transform: translate3d(100%, -100%, 0);
+    translate: 100% -100%;
   }
 }
 
diff --git a/source/fading_exits/fadeOutUp.css b/source/fading_exits/fadeOutUp.css
index fbafcac78..593ecac8b 100644
--- a/source/fading_exits/fadeOutUp.css
+++ b/source/fading_exits/fadeOutUp.css
@@ -5,7 +5,7 @@
 
   to {
     opacity: 0;
-    transform: translate3d(0, -100%, 0);
+    translate: 0 -100%;
   }
 }
 
diff --git a/source/fading_exits/fadeOutUpBig.css b/source/fading_exits/fadeOutUpBig.css
index 5583bd04e..81f8251c2 100644
--- a/source/fading_exits/fadeOutUpBig.css
+++ b/source/fading_exits/fadeOutUpBig.css
@@ -5,7 +5,7 @@
 
   to {
     opacity: 0;
-    transform: translate3d(0, -2000px, 0);
+    translate: 0 -2000px;
   }
 }
 
diff --git a/source/sliding_entrances/slideInDown.css b/source/sliding_entrances/slideInDown.css
index d6373677d..837ed0beb 100644
--- a/source/sliding_entrances/slideInDown.css
+++ b/source/sliding_entrances/slideInDown.css
@@ -1,11 +1,11 @@
 @keyframes slideInDown {
   from {
-    transform: translate3d(0, -100%, 0);
+    translate: 0 -100%;
     visibility: visible;
   }
 
   to {
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 }
 
diff --git a/source/sliding_entrances/slideInLeft.css b/source/sliding_entrances/slideInLeft.css
index 93370a830..0c27c21a2 100644
--- a/source/sliding_entrances/slideInLeft.css
+++ b/source/sliding_entrances/slideInLeft.css
@@ -1,11 +1,11 @@
 @keyframes slideInLeft {
   from {
-    transform: translate3d(-100%, 0, 0);
+    translate: -100% 0;
     visibility: visible;
   }
 
   to {
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 }
 
diff --git a/source/sliding_entrances/slideInRight.css b/source/sliding_entrances/slideInRight.css
index 209a99c71..5ba2097d6 100644
--- a/source/sliding_entrances/slideInRight.css
+++ b/source/sliding_entrances/slideInRight.css
@@ -1,11 +1,11 @@
 @keyframes slideInRight {
   from {
-    transform: translate3d(100%, 0, 0);
+    translate: 100% 0;
     visibility: visible;
   }
 
   to {
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 }
 
diff --git a/source/sliding_entrances/slideInUp.css b/source/sliding_entrances/slideInUp.css
index 37b6cde60..ec1d27958 100644
--- a/source/sliding_entrances/slideInUp.css
+++ b/source/sliding_entrances/slideInUp.css
@@ -1,11 +1,11 @@
 @keyframes slideInUp {
   from {
-    transform: translate3d(0, 100%, 0);
+    translate: 0 100%;
     visibility: visible;
   }
 
   to {
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 }
 
diff --git a/source/sliding_exits/slideOutDown.css b/source/sliding_exits/slideOutDown.css
index e8e0c7d47..570b862bf 100644
--- a/source/sliding_exits/slideOutDown.css
+++ b/source/sliding_exits/slideOutDown.css
@@ -1,11 +1,11 @@
 @keyframes slideOutDown {
   from {
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 
   to {
     visibility: hidden;
-    transform: translate3d(0, 100%, 0);
+    translate: 0 100%;
   }
 }
 
diff --git a/source/sliding_exits/slideOutLeft.css b/source/sliding_exits/slideOutLeft.css
index cf444546b..f1ca6327b 100644
--- a/source/sliding_exits/slideOutLeft.css
+++ b/source/sliding_exits/slideOutLeft.css
@@ -1,11 +1,11 @@
 @keyframes slideOutLeft {
   from {
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 
   to {
     visibility: hidden;
-    transform: translate3d(-100%, 0, 0);
+    translate: -100% 0;
   }
 }
 
diff --git a/source/sliding_exits/slideOutRight.css b/source/sliding_exits/slideOutRight.css
index 95f7f22f1..07bc16b06 100644
--- a/source/sliding_exits/slideOutRight.css
+++ b/source/sliding_exits/slideOutRight.css
@@ -1,11 +1,11 @@
 @keyframes slideOutRight {
   from {
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 
   to {
     visibility: hidden;
-    transform: translate3d(100%, 0, 0);
+    translate: 100% 0;
   }
 }
 
diff --git a/source/sliding_exits/slideOutUp.css b/source/sliding_exits/slideOutUp.css
index 27541b534..71dae5edf 100644
--- a/source/sliding_exits/slideOutUp.css
+++ b/source/sliding_exits/slideOutUp.css
@@ -1,11 +1,11 @@
 @keyframes slideOutUp {
   from {
-    transform: translate3d(0, 0, 0);
+    translate: none;
   }
 
   to {
     visibility: hidden;
-    transform: translate3d(0, -100%, 0);
+    translate: 0 -100%;
   }
 }