fix: Badge Animation enter and leave in RTL

Author: tangjinzhou

components/badge/style/rtl.less

@@ -6,7 +6,7 @@
   &:not(&-not-a-wrapper) &-count,
   &:not(&-not-a-wrapper) &-dot,
   &:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component {
-    .@{badge-prefix-cls}-rtl & {
+    .@{badge-prefix-cls}-rtl& {
       right: auto;
       left: 0;
       direction: ltr;
@@ -30,6 +30,17 @@
       }
     }
   }
+
+  &:not(&-not-a-wrapper).@{badge-prefix-cls}-rtl {
+    .@{badge-prefix-cls}-zoom-appear,
+    .@{badge-prefix-cls}-zoom-enter {
+      animation-name: antZoomBadgeInRtl;
+    }
+
+    .@{badge-prefix-cls}-zoom-leave {
+      animation-name: antZoomBadgeOutRtl;
+    }
+  }
 }
 
 .@{ribbon-prefix-cls}-rtl {
@@ -65,3 +76,25 @@
     }
   }
 }
+
+@keyframes antZoomBadgeInRtl {
+  0% {
+    transform: scale(0) translate(-50%, -50%);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1) translate(-50%, -50%);
+  }
+}
+
+@keyframes antZoomBadgeOutRtl {
+  0% {
+    transform: scale(1) translate(-50%, -50%);
+  }
+
+  100% {
+    transform: scale(0) translate(-50%, -50%);
+    opacity: 0;
+  }
+}