diff --git a/components/tabs/style/card-style.less b/components/tabs/style/card-style.less
index d5f84b101a..f3add23c53 100644
--- a/components/tabs/style/card-style.less
+++ b/components/tabs/style/card-style.less
@@ -55,6 +55,9 @@
   &&-card &-content > &-tabpane,
   &&-editable-card &-content > &-tabpane {
     transition: none!important;
+    &-inactive {
+      overflow: hidden;
+    }
   }
 
   &&-editable-card > &-bar &-tab > div {
diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less
index b39d424c93..e4a8a012a8 100644
--- a/components/tabs/style/index.less
+++ b/components/tabs/style/index.less
@@ -19,9 +19,6 @@
     height: 2px;
     background-color: @primary-color;
     transform-origin: 0 0;
-    &-animated {
-      transition: transform 0.3s @ease-in-out, width 0.3s @ease-in-out;
-    }
   }
 
   &-bar {
@@ -195,7 +192,7 @@
       > .@{tab-prefix-cls}-tabpane {
         flex-shrink: 0;
         width: 100%;
-        transition: opacity 0.3s;
+        transition: opacity .45s;
         opacity: 1;
       }
 
@@ -203,7 +200,6 @@
         opacity: 0;
         height: 0;
         padding: 0!important;
-        overflow: hidden;
       }
     }
     > .@{tab-prefix-cls}-content-animated {
@@ -338,6 +334,16 @@
   }
 }
 
+.@{tab-prefix-cls}-top .@{tab-prefix-cls}-ink-bar-animated,
+.@{tab-prefix-cls}-bottom .@{tab-prefix-cls}-ink-bar-animated {
+  transition: transform .3s @ease-in-out, width .3s @ease-in-out;
+}
+
+.@{tab-prefix-cls}-left .@{tab-prefix-cls}-ink-bar-animated,
+.@{tab-prefix-cls}-right .@{tab-prefix-cls}-ink-bar-animated {
+  transition: transform .3s @ease-in-out, height .3s @ease-in-out;
+}
+
 .no-flex,
 .@{tab-prefix-cls}-no-animation,
 .@{tab-prefix-cls}-vertical {