diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index a01301d8b1..cb6b9624fb 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -16275,12 +16275,12 @@ exports[`ConfigProvider components Modal configProvider 1`] = `
       class="config-modal-mask"
     />
     <div
-      class="config-modal-wrap "
+      class="config-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="config-modal "
+        class="config-modal"
         role="document"
         style="width:520px"
       >
@@ -16368,12 +16368,12 @@ exports[`ConfigProvider components Modal configProvider componentSize large 1`]
       class="config-modal-mask"
     />
     <div
-      class="config-modal-wrap "
+      class="config-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="config-modal "
+        class="config-modal"
         role="document"
         style="width:520px"
       >
@@ -16461,12 +16461,12 @@ exports[`ConfigProvider components Modal configProvider componentSize middle 1`]
       class="config-modal-mask"
     />
     <div
-      class="config-modal-wrap "
+      class="config-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="config-modal "
+        class="config-modal"
         role="document"
         style="width:520px"
       >
@@ -16554,12 +16554,12 @@ exports[`ConfigProvider components Modal configProvider virtual and dropdownMatc
       class="ant-modal-mask"
     />
     <div
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal "
+        class="ant-modal"
         role="document"
         style="width:520px"
       >
@@ -16647,12 +16647,12 @@ exports[`ConfigProvider components Modal normal 1`] = `
       class="ant-modal-mask"
     />
     <div
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal "
+        class="ant-modal"
         role="document"
         style="width:520px"
       >
@@ -16740,12 +16740,12 @@ exports[`ConfigProvider components Modal prefixCls 1`] = `
       class="prefix-Modal-mask"
     />
     <div
-      class="prefix-Modal-wrap "
+      class="prefix-Modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="prefix-Modal "
+        class="prefix-Modal"
         role="document"
         style="width:520px"
       >
diff --git a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap
index 58010097ae..ad95df008a 100644
--- a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap
+++ b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap
@@ -6810,16 +6810,16 @@ exports[`Locale Provider should display the text as ar 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle1"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -11851,16 +11851,16 @@ exports[`Locale Provider should display the text as az 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle0"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -16892,16 +16892,16 @@ exports[`Locale Provider should display the text as bg 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle2"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -21933,16 +21933,16 @@ exports[`Locale Provider should display the text as ca 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle3"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -26974,16 +26974,16 @@ exports[`Locale Provider should display the text as cs 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle4"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -32015,16 +32015,16 @@ exports[`Locale Provider should display the text as da 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle5"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -37056,16 +37056,16 @@ exports[`Locale Provider should display the text as de 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle6"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -42097,16 +42097,16 @@ exports[`Locale Provider should display the text as el 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle7"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -47138,16 +47138,16 @@ exports[`Locale Provider should display the text as en 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle9"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -52179,16 +52179,16 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle8"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -57220,16 +57220,16 @@ exports[`Locale Provider should display the text as es 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle10"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -62261,16 +62261,16 @@ exports[`Locale Provider should display the text as et 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle11"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -67302,16 +67302,16 @@ exports[`Locale Provider should display the text as fa 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle12"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -72343,16 +72343,16 @@ exports[`Locale Provider should display the text as fi 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle13"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -77384,16 +77384,16 @@ exports[`Locale Provider should display the text as fr 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle14"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -82425,16 +82425,16 @@ exports[`Locale Provider should display the text as fr 2`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle15"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -87466,16 +87466,16 @@ exports[`Locale Provider should display the text as ga 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle16"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -92507,16 +92507,16 @@ exports[`Locale Provider should display the text as gl 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle17"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -97548,16 +97548,16 @@ exports[`Locale Provider should display the text as he 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle18"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -102589,16 +102589,16 @@ exports[`Locale Provider should display the text as hi 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle19"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -107630,16 +107630,16 @@ exports[`Locale Provider should display the text as hr 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle20"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -112671,16 +112671,16 @@ exports[`Locale Provider should display the text as hu 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle21"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -117712,16 +117712,16 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle22"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -122753,16 +122753,16 @@ exports[`Locale Provider should display the text as id 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle52"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -127794,16 +127794,16 @@ exports[`Locale Provider should display the text as is 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle23"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -132835,16 +132835,16 @@ exports[`Locale Provider should display the text as it 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle24"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -137876,16 +137876,16 @@ exports[`Locale Provider should display the text as ja 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle25"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -142917,16 +142917,16 @@ exports[`Locale Provider should display the text as kn 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle26"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -147958,16 +147958,16 @@ exports[`Locale Provider should display the text as ko 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle27"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -152999,16 +152999,16 @@ exports[`Locale Provider should display the text as ku 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle28"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -158040,16 +158040,16 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle29"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -163081,16 +163081,16 @@ exports[`Locale Provider should display the text as lt 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle30"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -168122,16 +168122,16 @@ exports[`Locale Provider should display the text as lv 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle53"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -173163,16 +173163,16 @@ exports[`Locale Provider should display the text as mk 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle31"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -178204,16 +178204,16 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle33"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -183245,16 +183245,16 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle32"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -188286,16 +188286,16 @@ exports[`Locale Provider should display the text as nb 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle34"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -193327,16 +193327,16 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle35"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -198368,16 +198368,16 @@ exports[`Locale Provider should display the text as nl 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle37"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -203409,16 +203409,16 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle36"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -208450,16 +208450,16 @@ exports[`Locale Provider should display the text as pl 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle38"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -213491,16 +213491,16 @@ exports[`Locale Provider should display the text as pt 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle40"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -218532,16 +218532,16 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle39"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -223573,16 +223573,16 @@ exports[`Locale Provider should display the text as ro 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle41"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -228614,16 +228614,16 @@ exports[`Locale Provider should display the text as ru 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle42"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -233655,16 +233655,16 @@ exports[`Locale Provider should display the text as sk 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle43"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -238696,16 +238696,16 @@ exports[`Locale Provider should display the text as sl 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle44"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -243737,16 +243737,16 @@ exports[`Locale Provider should display the text as sr 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle45"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -248778,16 +248778,16 @@ exports[`Locale Provider should display the text as sv 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle46"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -253819,16 +253819,16 @@ exports[`Locale Provider should display the text as ta 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle47"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -258860,16 +258860,16 @@ exports[`Locale Provider should display the text as th 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle48"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -263901,16 +263901,16 @@ exports[`Locale Provider should display the text as tr 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle49"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -268942,16 +268942,16 @@ exports[`Locale Provider should display the text as uk 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle50"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -273983,16 +273983,16 @@ exports[`Locale Provider should display the text as vi 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle51"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -279024,16 +279024,16 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle54"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -284065,16 +284065,16 @@ exports[`Locale Provider should display the text as zh-hk 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle55"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
@@ -289106,16 +289106,16 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
     class="ant-modal-root"
   >
     <div
-      class="ant-modal-mask fade-appear"
+      class="ant-modal-mask fade-appear fade-appear-start fade"
     />
     <div
       aria-labelledby="rcDialogTitle56"
-      class="ant-modal-wrap "
+      class="ant-modal-wrap"
       role="dialog"
       tabindex="-1"
     >
       <div
-        class="ant-modal zoom-appear"
+        class="ant-modal zoom-appear zoom-appear-prepare zoom"
         role="document"
         style="width: 520px;"
       >
diff --git a/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/components/modal/__tests__/__snapshots__/Modal.test.js.snap
index 5b1b6d3689..d0699e9cb8 100644
--- a/components/modal/__tests__/__snapshots__/Modal.test.js.snap
+++ b/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -8,15 +8,15 @@ exports[`Modal render correctly 1`] = `
         class="ant-modal-root"
       >
         <div
-          class="ant-modal-mask fade-appear"
+          class="ant-modal-mask fade-appear fade-appear-start fade"
         />
         <div
-          class="ant-modal-wrap "
+          class="ant-modal-wrap"
           role="dialog"
           tabindex="-1"
         >
           <div
-            class="ant-modal zoom-appear"
+            class="ant-modal zoom-appear zoom-appear-prepare zoom"
             role="document"
             style="width: 520px;"
           >
@@ -105,15 +105,15 @@ exports[`Modal render without footer 1`] = `
         class="ant-modal-root"
       >
         <div
-          class="ant-modal-mask fade-appear"
+          class="ant-modal-mask fade-appear fade-appear-start fade"
         />
         <div
-          class="ant-modal-wrap "
+          class="ant-modal-wrap"
           role="dialog"
           tabindex="-1"
         >
           <div
-            class="ant-modal zoom-appear"
+            class="ant-modal zoom-appear zoom-appear-prepare zoom"
             role="document"
             style="width: 520px;"
           >
@@ -181,15 +181,15 @@ exports[`Modal support closeIcon 1`] = `
   class="ant-modal-root"
 >
   <div
-    class="ant-modal-mask fade-appear"
+    class="ant-modal-mask fade-appear fade-appear-start fade"
   />
   <div
-    class="ant-modal-wrap "
+    class="ant-modal-wrap"
     role="dialog"
     tabindex="-1"
   >
     <div
-      class="ant-modal zoom-appear"
+      class="ant-modal zoom-appear zoom-appear-prepare zoom"
       role="document"
       style="width: 520px;"
     >
diff --git a/components/modal/__tests__/confirm.test.js b/components/modal/__tests__/confirm.test.js
index bc16573efe..2e19c00f17 100644
--- a/components/modal/__tests__/confirm.test.js
+++ b/components/modal/__tests__/confirm.test.js
@@ -1,12 +1,45 @@
-import TestUtils from 'react-dom/test-utils';
+import TestUtils, { act } from 'react-dom/test-utils';
+import CSSMotion from 'rc-motion';
+import { genCSSMotion } from 'rc-motion/lib/CSSMotion';
+import KeyCode from 'rc-util/lib/KeyCode';
 import Modal from '..';
 import { destroyFns } from '../Modal';
+import { sleep } from '../../../tests/utils';
 
 const { confirm } = Modal;
 
+jest.mock('rc-motion');
+
 describe('Modal.confirm triggers callbacks correctly', () => {
+  // Inject CSSMotion to replace with No transition support
+  const MockCSSMotion = genCSSMotion(false);
+  Object.keys(MockCSSMotion).forEach(key => {
+    CSSMotion[key] = MockCSSMotion[key];
+  });
+
+  // Mock for rc-util raf
+  window.requestAnimationFrame = callback => {
+    return window.setTimeout(callback, 16);
+  };
+  window.cancelAnimationFrame = id => {
+    window.clearTimeout(id);
+  };
+
   const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
+  /* eslint-disable no-console */
+  // Hack error to remove act warning
+  const originError = console.error;
+  console.error = (...args) => {
+    const errorStr = String(args[0]);
+    if (errorStr.includes('was not wrapped in act(...)')) {
+      return;
+    }
+
+    originError(...args);
+  };
+  /* eslint-enable */
+
   afterEach(() => {
     errorSpy.mockReset();
     document.body.innerHTML = '';
@@ -68,20 +101,39 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     expect(onOk.mock.calls.length).toBe(1);
   });
 
-  it('should allow Modal.comfirm without onCancel been set', () => {
+  it('should allow Modal.confirm without onCancel been set', () => {
     open();
     // Third Modal
     $$('.ant-btn')[0].click();
     expect(errorSpy).not.toHaveBeenCalled();
   });
 
-  it('should allow Modal.comfirm without onOk been set', () => {
+  it('should allow Modal.confirm without onOk been set', () => {
     open();
     // Fourth Modal
     $$('.ant-btn-primary')[0].click();
     expect(errorSpy).not.toHaveBeenCalled();
   });
 
+  it('should close confirm modal when press ESC', () => {
+    jest.useFakeTimers();
+    const onCancel = jest.fn();
+    Modal.confirm({
+      title: 'title',
+      content: 'content',
+      onCancel,
+    });
+    jest.runAllTimers();
+    expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(1);
+    TestUtils.Simulate.keyDown($$('.ant-modal')[0], {
+      keyCode: KeyCode.ESC,
+    });
+    jest.runAllTimers();
+    expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(0);
+    expect(onCancel).toHaveBeenCalledTimes(1);
+    jest.useRealTimers();
+  });
+
   it('should not hide confirm when onOk return Promise.resolve', () => {
     open({
       onOk: () => Promise.resolve(''),
@@ -90,16 +142,19 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     expect($$('.ant-modal-confirm')).toHaveLength(1);
   });
 
-  it('should emit error when onOk return Promise.reject', () => {
+  it('should emit error when onOk return Promise.reject', async () => {
     const error = new Error('something wrong');
     open({
-      onOk: () => Promise.reject(error),
+      onOk: () => {
+        return Promise.reject(error);
+      },
     });
     $$('.ant-btn-primary')[0].click();
+
     // wait promise
-    return Promise.resolve().then(() => {
-      expect(errorSpy).toHaveBeenCalledWith(error);
-    });
+    await sleep();
+
+    expect(errorSpy).toHaveBeenCalledWith(error);
   });
 
   it('shows animation when close', () => {
@@ -107,6 +162,7 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     jest.useFakeTimers();
     expect($$('.ant-modal-confirm')).toHaveLength(1);
     $$('.ant-btn')[0].click();
+
     jest.runAllTimers();
     expect($$('.ant-modal-confirm')).toHaveLength(0);
     jest.useRealTimers();
@@ -158,25 +214,6 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     jest.useRealTimers();
   });
 
-  it('should close confirm modal when press ESC', () => {
-    jest.useFakeTimers();
-    const onCancel = jest.fn();
-    Modal.confirm({
-      title: 'title',
-      content: 'content',
-      onCancel,
-    });
-    jest.runAllTimers();
-    expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(1);
-    TestUtils.Simulate.keyDown($$('.ant-modal')[0], {
-      keyCode: 27,
-    });
-    jest.runAllTimers();
-    expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(0);
-    expect(onCancel).toHaveBeenCalledTimes(1);
-    jest.useRealTimers();
-  });
-
   it('should not close modals when click confirm button when onOk has argument', () => {
     jest.useFakeTimers();
     ['info', 'success', 'warning', 'error'].forEach(type => {
@@ -268,23 +305,35 @@ describe('Modal.confirm triggers callbacks correctly', () => {
 
   it('destroyFns should reduce when instance.destroy', () => {
     jest.useFakeTimers();
+
     Modal.destroyAll(); // clear destroyFns
     jest.runAllTimers();
+
     const instances = [];
     ['info', 'success', 'warning', 'error'].forEach(type => {
       const instance = Modal[type]({
         title: 'title',
         content: 'content',
       });
+
+      // Render modal
+      act(() => {
+        jest.runAllTimers();
+      });
+
       instances.push(instance);
     });
     const { length } = instances;
     instances.forEach((instance, index) => {
       expect(destroyFns.length).toBe(length - index);
-      instance.destroy();
-      jest.runAllTimers();
+
+      act(() => {
+        instance.destroy();
+        jest.runAllTimers();
+      });
       expect(destroyFns.length).toBe(length - index - 1);
     });
+
     jest.useRealTimers();
   });
 
diff --git a/components/modal/__tests__/hook.test.js b/components/modal/__tests__/hook.test.js
index df263d0ee4..d443d26cfd 100644
--- a/components/modal/__tests__/hook.test.js
+++ b/components/modal/__tests__/hook.test.js
@@ -1,11 +1,20 @@
 import React from 'react';
+import CSSMotion from 'rc-motion';
+import { genCSSMotion } from 'rc-motion/lib/CSSMotion';
 import { mount } from 'enzyme';
 import Modal from '..';
 import Button from '../../button';
 
 jest.mock('rc-util/lib/Portal');
+jest.mock('rc-motion');
 
 describe('Modal.hook', () => {
+  // Inject CSSMotion to replace with No transition support
+  const MockCSSMotion = genCSSMotion(false);
+  Object.keys(MockCSSMotion).forEach(key => {
+    CSSMotion[key] = MockCSSMotion[key];
+  });
+
   it('hooks support context', () => {
     jest.useFakeTimers();
     const Context = React.createContext('light');
diff --git a/package.json b/package.json
index 332217bc00..2e4dffb148 100644
--- a/package.json
+++ b/package.json
@@ -121,7 +121,7 @@
     "rc-cascader": "~1.4.0",
     "rc-checkbox": "~2.3.0",
     "rc-collapse": "~2.0.0",
-    "rc-dialog": "~8.3.0",
+    "rc-dialog": "~8.4.0",
     "rc-drawer": "~4.1.0",
     "rc-dropdown": "~3.2.0",
     "rc-field-form": "~1.12.0",