动画

src/less/core/utils/motion/fade.less

@@ -14,7 +14,7 @@
 
 .fade-motion(bi-fade, biFade);
 
-@keyframes biFadeIn {
+.keyframes(biFadeIn, {
   0% {
     opacity: 0;
   }
@@ -22,9 +22,9 @@
   100% {
     opacity: 1;
   }
-}
+});
 
-@keyframes biFadeOut {
+.keyframes(biFadeOut, {
   0% {
     opacity: 1;
   }
@@ -32,4 +32,4 @@
   100% {
     opacity: 0;
   }
-}
+});

src/less/core/utils/motion/move.less

@@ -17,7 +17,7 @@
 .move-motion(bi-move-left, biMoveLeft);
 .move-motion(bi-move-right, biMoveRight);
 
-@keyframes biMoveDownIn {
+.keyframes(biMoveDownIn, {
   0% {
     transform: translateY(100%);
     transform-origin: 0 0;
@@ -29,9 +29,9 @@
     transform-origin: 0 0;
     opacity: 1;
   }
-}
+});
 
-@keyframes biMoveDownOut {
+.keyframes(biMoveDownOut, {
   0% {
     transform: translateY(0%);
     transform-origin: 0 0;
@@ -43,9 +43,9 @@
     transform-origin: 0 0;
     opacity: 0;
   }
-}
+});
 
-@keyframes biMoveLeftIn {
+.keyframes(biMoveLeftIn, {
   0% {
     transform: translateX(-100%);
     transform-origin: 0 0;
@@ -57,9 +57,9 @@
     transform-origin: 0 0;
     opacity: 1;
   }
-}
+});
 
-@keyframes biMoveLeftOut {
+.keyframes(biMoveLeftOut, {
   0% {
     transform: translateX(0%);
     transform-origin: 0 0;
@@ -71,9 +71,9 @@
     transform-origin: 0 0;
     opacity: 0;
   }
-}
+});
 
-@keyframes biMoveRightIn {
+.keyframes(biMoveRightIn, {
   0% {
     transform: translateX(100%);
     transform-origin: 0 0;
@@ -85,9 +85,9 @@
     transform-origin: 0 0;
     opacity: 1;
   }
-}
+});
 
-@keyframes biMoveRightOut {
+.keyframes(biMoveRightOut, {
   0% {
     transform: translateX(0%);
     transform-origin: 0 0;
@@ -99,9 +99,9 @@
     transform-origin: 0 0;
     opacity: 0;
   }
-}
+});
 
-@keyframes biMoveUpIn {
+.keyframes(biMoveUpIn, {
   0% {
     transform: translateY(-100%);
     transform-origin: 0 0;
@@ -113,9 +113,9 @@
     transform-origin: 0 0;
     opacity: 1;
   }
-}
+});
 
-@keyframes biMoveUpOut {
+.keyframes(biMoveUpOut, {
   0% {
     transform: translateY(0%);
     transform-origin: 0 0;
@@ -127,4 +127,4 @@
     transform-origin: 0 0;
     opacity: 0;
   }
-}
+});

src/less/core/utils/motion/slide.less

@@ -17,7 +17,7 @@
 .slide-motion(bi-slide-left, biSlideLeft);
 .slide-motion(bi-slide-right, biSlideRight);
 
-@keyframes biSlideUpIn {
+.keyframes(biSlideUpIn, {
   0% {
     transform: scaleY(0.8);
     transform-origin: 0% 0%;
@@ -29,9 +29,9 @@
     transform-origin: 0% 0%;
     opacity: 1;
   }
-}
+});
 
-@keyframes biSlideUpOut {
+.keyframes(biSlideUpOut, {
   0% {
     transform: scaleY(1);
     transform-origin: 0% 0%;
@@ -43,9 +43,9 @@
     transform-origin: 0% 0%;
     opacity: 0;
   }
-}
+});
 
-@keyframes biSlideDownIn {
+.keyframes(biSlideDownIn, {
   0% {
     transform: scaleY(0.8);
     transform-origin: 100% 100%;
@@ -57,9 +57,9 @@
     transform-origin: 100% 100%;
     opacity: 1;
   }
-}
+});
 
-@keyframes biSlideDownOut {
+.keyframes(biSlideDownOut, {
   0% {
     transform: scaleY(1);
     transform-origin: 100% 100%;
@@ -71,9 +71,9 @@
     transform-origin: 100% 100%;
     opacity: 0;
   }
-}
+});
 
-@keyframes biSlideLeftIn {
+.keyframes(biSlideLeftIn, {
   0% {
     transform: scaleX(0.8);
     transform-origin: 0% 0%;
@@ -85,9 +85,9 @@
     transform-origin: 0% 0%;
     opacity: 1;
   }
-}
+});
 
-@keyframes biSlideLeftOut {
+.keyframes(biSlideLeftOut, {
   0% {
     transform: scaleX(1);
     transform-origin: 0% 0%;
@@ -99,9 +99,9 @@
     transform-origin: 0% 0%;
     opacity: 0;
   }
-}
+});
 
-@keyframes biSlideRightIn {
+.keyframes(biSlideRightIn, {
   0% {
     transform: scaleX(0.8);
     transform-origin: 100% 0%;
@@ -113,9 +113,9 @@
     transform-origin: 100% 0%;
     opacity: 1;
   }
-}
+});
 
-@keyframes biSlideRightOut {
+.keyframes(biSlideRightOut, {
   0% {
     transform: scaleX(1);
     transform-origin: 100% 0%;
@@ -127,4 +127,4 @@
     transform-origin: 100% 0%;
     opacity: 0;
   }
-}
+});

src/less/core/utils/motion/zoom.less

@@ -29,7 +29,7 @@
 .zoom-motion(bi-zoom-left, biZoomLeft);
 .zoom-motion(bi-zoom-right, biZoomRight);
 
-@keyframes biZoomIn {
+.keyframes(biZoomIn, {
   0% {
     transform: scale(0.2);
     opacity: 0;
@@ -39,20 +39,14 @@
     transform: scale(1);
     opacity: 1;
   }
-}
+});
-
-@keyframes biZoomOut {
-  0% {
-    transform: scale(1);
-  }
 
-  100% {
+.keyframes(biZoomOut, {
-    transform: scale(0.2);
+  0% { transform: scale(1); }
-    opacity: 0;
+  100% { transform: scale(0.2); opacity: 0; }
-  }
+});
-}
 
-@keyframes biZoomBigIn {
+.keyframes(biZoomBigIn, {
   0% {
     transform: scale(0.8);
     opacity: 0;
@@ -62,9 +56,9 @@
     transform: scale(1);
     opacity: 1;
   }
-}
+});
 
-@keyframes biZoomBigOut {
+.keyframes(biZoomBigOut, {
   0% {
     transform: scale(1);
   }
@@ -73,9 +67,9 @@
     transform: scale(0.8);
     opacity: 0;
   }
-}
+});
 
-@keyframes biZoomUpIn {
+.keyframes(biZoomUpIn, {
   0% {
     transform: scale(0.8);
     transform-origin: 50% 0%;
@@ -86,9 +80,9 @@
     transform: scale(1);
     transform-origin: 50% 0%;
   }
-}
+});
 
-@keyframes biZoomUpOut {
+.keyframes(biZoomUpOut, {
   0% {
     transform: scale(1);
     transform-origin: 50% 0%;
@@ -99,9 +93,9 @@
     transform-origin: 50% 0%;
     opacity: 0;
   }
-}
+});
 
-@keyframes biZoomLeftIn {
+.keyframes(biZoomLeftIn, {
   0% {
     transform: scale(0.8);
     transform-origin: 0% 50%;
@@ -112,9 +106,9 @@
     transform: scale(1);
     transform-origin: 0% 50%;
   }
-}
+});
 
-@keyframes biZoomLeftOut {
+.keyframes(biZoomLeftOut, {
   0% {
     transform: scale(1);
     transform-origin: 0% 50%;
@@ -125,9 +119,9 @@
     transform-origin: 0% 50%;
     opacity: 0;
   }
-}
+});
 
-@keyframes biZoomRightIn {
+.keyframes(biZoomRightIn, {
   0% {
     transform: scale(0.8);
     transform-origin: 100% 50%;
@@ -138,9 +132,9 @@
     transform: scale(1);
     transform-origin: 100% 50%;
   }
-}
+});
 
-@keyframes biZoomRightOut {
+.keyframes(biZoomRightOut, {
   0% {
     transform: scale(1);
     transform-origin: 100% 50%;
@@ -151,9 +145,9 @@
     transform-origin: 100% 50%;
     opacity: 0;
   }
-}
+});
 
-@keyframes biZoomDownIn {
+.keyframes(biZoomDownIn, {
   0% {
     transform: scale(0.8);
     transform-origin: 50% 100%;
@@ -164,9 +158,9 @@
     transform: scale(1);
     transform-origin: 50% 100%;
   }
-}
+});
 
-@keyframes biZoomDownOut {
+.keyframes(biZoomDownOut, {
   0% {
     transform: scale(1);
     transform-origin: 50% 100%;
@@ -177,4 +171,4 @@
     transform-origin: 50% 100%;
     opacity: 0;
   }
-}
+});