j

Application/Home/View/default/Index_index.tpl

@@ -43,7 +43,7 @@
         //        })(document, window);
     </script>
     <title>谁是桃源幸运锦鲤</title>
-    <link href="__CDN__/css/main.css?t=1.92" rel="stylesheet">
+    <link href="__CDN__/css/main.css?t=1.93" rel="stylesheet">
     <style>
 
     </style>

Public/static/css/main.css

@@ -192,8 +192,10 @@ ul, li {
   opacity: 0;
 }
 #container .prize-type .bounceInDown {
-  -webkit-animation-name: bounceInDown;
-  animation-name: bounceInDown;
+  -webkit-animation: bounceInDown 1s ease 0s 1;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  opacity: 0;
 }
 #container .word {
   font-size: 40px;
@@ -215,10 +217,12 @@ ul, li {
     transform: translate3d(0, 25px, 0);
   }
   75% {
+    opacity: 1;
     -webkit-transform: translate3d(0, -10px, 0);
     transform: translate3d(0, -10px, 0);
   }
   90% {
+    opacity: 1;
     -webkit-transform: translate3d(0, 5px, 0);
     transform: translate3d(0, 5px, 0);
   }

Public/static/css/main.scss

@@ -215,8 +215,9 @@ flex-direction: column-reverse;
     height: 300px;
     opacity: 0;
     .bounceInDown {
-      -webkit-animation-name: bounceInDown;
-      animation-name: bounceInDown
+      -webkit-animation: bounceInDown 1s ease 0s 1;
+      @include animate_forwards;
+      opacity: 0;
     }
   }
   .word{
@@ -239,10 +240,12 @@ flex-direction: column-reverse;
     transform: translate3d(0, 25px, 0)
   }
   75% {
+    opacity: 1;
     -webkit-transform: translate3d(0, -10px, 0);
     transform: translate3d(0, -10px, 0)
   }
   90% {
+    opacity: 1;
     -webkit-transform: translate3d(0, 5px, 0);
     transform: translate3d(0, 5px, 0)
   }