BI-30745 对于css3的animation的浏览器兼容前缀问题，定义less

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;
+}

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);
-        }
-    }
-    @-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);
-        }
+            .transform (scaleY(1));
         }
+    });
 }