diff --git a/packages/fluent/scss/ripple/_layout.scss b/packages/fluent/scss/ripple/_layout.scss
index 932f3cf7bb3..2db624748b5 100644
--- a/packages/fluent/scss/ripple/_layout.scss
+++ b/packages/fluent/scss/ripple/_layout.scss
@@ -39,14 +39,14 @@
 
     @keyframes ripple {
         0% {
-            transform: scale(0);
+            transform: translate(-50%, -50%) scale(0);
         }
         20% {
-            transform: scale(1);
+            transform: translate(-50%, -50%) scale(1);
         }
         100% {
             opacity: 0;
-            transform: scale(1);
+            transform: translate(-50%, -50%) scale(1);
         }
     }