Browse Source

feat: 动画优化

zhangyuhan 3 years ago
parent
commit
b3009f84d7
1 changed files with 8 additions and 4 deletions
  1. 8 4
      src/web/staticres/common-module/yearEndReport/css/index.css

+ 8 - 4
src/web/staticres/common-module/yearEndReport/css/index.css

@@ -156,10 +156,13 @@ body {
 }
 @keyframes InitMeteorBgIn {
   0% {
+    transform: translate3d(0, 100%, 0)
+  }
+  20% {
     transform: scale(4) translate3d(0, 80%, 0) rotate3d(1, 1, 1, 30deg);
   }
   100% {
-    transform: scale(1);
+    transform: scale(1) translate3d(0, 0, 0);
   }
 }
 @keyframes MeteorRotate {
@@ -233,10 +236,10 @@ body {
 }
 @keyframes Scale {
   from {
-    transform: scale(1);
+    transform: scale(1) translate3d(0, 0, 0);
   }
   to {
-    transform: scale(1.5);
+    transform: scale(1.5) translate3d(0, 0, 0);
   }
 }
 @keyframes FadeBottomIn {
@@ -364,10 +367,11 @@ body {
 }
 
 .page-1 .meteor-bg.show {
-  animation: InitMeteorBgIn 4s ease-out 1, Scale 10s 5s ease infinite alternate;
+  animation: InitMeteorBgIn 4s ease-out 1 forwards, Scale 10s 5s ease infinite alternate;
 }
 .page-1 .meteor-bg {
   position: absolute;
+  transform: translate3d(0, 100%, 0);
   bottom: 0;
   width: 100%;
 }