diff --git a/styles/Badge.scss b/styles/Badge.scss
index c0e3bd3f0..7e8383964 100644
--- a/styles/Badge.scss
+++ b/styles/Badge.scss
@@ -97,6 +97,8 @@
       @include m(as-is) {
         display: inline-flex;
         @include b(badge-sup) {
+          @include fade-in-scale-up-transition(badge, left bottom, $original-transform: translateX(0));
+          transform: translateX(0);
           position: static;
         }
       }
@@ -125,7 +127,7 @@
   }
   @include once {
     @include b(badge-sup) {
-      @include fade-in-scale-up-transition(badge, left bottom);
+      @include fade-in-scale-up-transition(badge, left bottom, $original-transform: (translateX(-50%)));
       transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
       color: white;
       position: absolute;
diff --git a/styles/themes/vars.scss b/styles/themes/vars.scss
index 740d8f886..d60c1007e 100644
--- a/styles/themes/vars.scss
+++ b/styles/themes/vars.scss
@@ -250,7 +250,7 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
   }
 }
 
-@mixin fade-in-scale-up-transition($block: 'fade-in-scale-up', $origin: inherit, $duration: .2s, $start-scale: 0.9) {
+@mixin fade-in-scale-up-transition($block: 'fade-in-scale-up', $origin: inherit, $duration: .2s, $start-scale: 0.9, $original-transform: ()) {
   &.#{$namespace}-#{$block}--transition-leave-active {
     transform-origin: $origin;
     transition: opacity $duration $slow-out-cubic-bezier, transform $duration $slow-out-cubic-bezier;
@@ -261,11 +261,11 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
   }
   &.#{$namespace}-#{$block}--transition-enter, &.#{$namespace}-#{$block}--transition-leave-to {
     opacity: 0;
-    transform: scale($start-scale);
+    transform: scale($start-scale) $original-transform;
   }
   &.#{$namespace}-#{$block}--transition-leave, &.#{$namespace}-#{$block}--transition-enter-to {
     opacity: 1; 
-    transform: scale(1);
+    transform: scale(1) $original-transform;
   }
 }