diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx
index 3642555fd5..9951373fc7 100644
--- a/components/_util/wave.tsx
+++ b/components/_util/wave.tsx
@@ -49,7 +49,10 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
     if (insertExtraNode) {
       node.appendChild(extraNode);
     }
-    const transitionEnd = () => {
+    const transitionEnd = (e: AnimationEvent) => {
+      if (e.animationName !== 'fadeEffect') {
+        return;
+      }
       node.removeAttribute(attributeName);
       this.removeExtraStyleNode();
       if (insertExtraNode) {
diff --git a/components/style/core/motion/other.less b/components/style/core/motion/other.less
index 310fb4bc25..932640a653 100644
--- a/components/style/core/motion/other.less
+++ b/components/style/core/motion/other.less
@@ -19,14 +19,14 @@
   right: -1px;
   border-radius: inherit;
   border: 0 solid @primary-color;
-  opacity: 0.4;
-  animation: waveEffect .4s cubic-bezier(.25, .8, .25, 1);
+  opacity: 0.2;
+  animation: fadeEffect 2s cubic-bezier(0.2, 1, 0.3, 1), waveEffect .4s cubic-bezier(0.2, 1, 0.3, 1);
+  animation-fill-mode: forwards;
   display: block;
 }
 
 @keyframes waveEffect {
-  to {
-    opacity: 0;
+  100% {
     top: -@wave-animation-width;
     left: -@wave-animation-width;
     bottom: -@wave-animation-width;
@@ -34,3 +34,9 @@
     border-width: @wave-animation-width;
   }
 }
+
+@keyframes fadeEffect {
+  100% {
+    opacity: 0;
+  }
+}