From b14c9524e89d46ff708a9181babb623c444a763f Mon Sep 17 00:00:00 2001
From: "Zhenfei.Li" <Zhenfei.Li@fanruan.com>
Date: Mon, 27 Aug 2018 20:57:51 +0800
Subject: [PATCH] =?UTF-8?q?BI-30745=20=E5=AF=B9=E4=BA=8Ecss3=E7=9A=84anima?=
 =?UTF-8?q?tion=E7=9A=84=E6=B5=8F=E8=A7=88=E5=99=A8=E5=85=BC=E5=AE=B9?=
 =?UTF-8?q?=E5=89=8D=E7=BC=80=E9=97=AE=E9=A2=98=EF=BC=8C=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?less?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/less/animation.less | 41 +++++++++++++++++++++++++++++++++++++++++
 src/less/base/pane.less | 38 +++++++-------------------------------
 2 files changed, 48 insertions(+), 31 deletions(-)
 create mode 100644 src/less/animation.less

diff --git a/src/less/animation.less b/src/less/animation.less
new file mode 100644
index 0000000000..cea8874f99
--- /dev/null
+++ b/src/less/animation.less
@@ -0,0 +1,41 @@
+.keyframes(@name, @frames) {
+    @-webkit-keyframes @name {
+        @frames();
+    }
+    @-moz-keyframes @name {
+        @frames();
+    }
+    @-ms-keyframes @name {
+        @frames();
+    }
+    @-o-keyframes @name {
+        @frames();
+    }
+    @keyframes @name {
+        @frames();
+    }
+}
+
+.animation(@attr) {
+    -webkit-animation: @attr;
+    -moz-animation: @attr;
+    -ms-animation: @attr;
+    -o-animation: @attr;
+    animation: @attr;
+}
+
+.animation-delay(@attr) {
+    -webkit-animation-delay: @attr;
+    -moz-animation-delay: @attr;
+    -ms-animation-delay: @attr;
+    -o-animation-delay: @attr;
+    animation-delay: @attr;
+}
+
+.transform(@attr) {
+    -webkit-transform: @attr;
+    -moz-transform: @attr;
+    -o-transform: @attr;
+    -ms-transform: @attr;
+    transform: @attr;
+}
\ No newline at end of file
diff --git a/src/less/base/pane.less b/src/less/base/pane.less
index d63e325770..1e2246c580 100644
--- a/src/less/base/pane.less
+++ b/src/less/base/pane.less
@@ -8,45 +8,21 @@
     &>div {
         .background-color(@background-color-highlight, 90%);
         .border-radius(2.5px);
-        -webkit-animation: loading-widget 0.8s infinite linear;
-        -moz-animation: loading-widget 0.8s infinite linear;
-        animation: loading-widget 0.8s infinite linear;
+        .animation(loading-widget 0.8s infinite linear);
     }
     & .rect2 {
-        -webkit-animation-delay: -0.2s;
-        -moz-animation-delay: -0.2s;
-        animation-delay: -0.2s;
+        .animation-delay(-0.2s);
     }
     & .rect3 {
-        -webkit-animation-delay: -0.4s;
-        -moz-animation-delay: -0.4s;
-        animation-delay: -0.4s;
+        .animation-delay(-0.4s);
     }
-    @-webkit-keyframes loading-widget {
+    .keyframes (loading-widget, {
         0%,
         100% {
-            -webkit-transform: scaleY(0.3);
+            .transform (scaleY(0.3));
         }
         50% {
-            -webkit-transform: scaleY(1);
+            .transform (scaleY(1));
         }
-    }
-    @-moz-keyframes loading-widget {
-        0%,
-        100% {
-            -moz-transform: scaleY(0.3);
-        }
-        50% {
-            -moz-transform: scaleY(1);
-        }
-    }
-    @keyframes loading-widget {
-        0%,
-        100% {
-            transform: scaleY(0.3);
-        }
-        50% {
-            transform: scaleY(1);
-        }
-    }
+    });
 }
\ No newline at end of file