滑动提示组件动效优化

src/components/SlideTip.vue

@@ -1,14 +1,16 @@
 <template>
   <div class="slide-tip">
-    <div
-      class="slide-tip_text"
-      v-html="text"
-    />
-    <img
-      class="slide-tip_image"
-      src="@/assets/image/下拉.png"
-      alt=""
-    >
+    <div class="twinkle-wrapper">
+      <div
+        class="slide-tip_text"
+        v-html="text"
+      />
+      <img
+        class="slide-tip_image"
+        src="@/assets/image/下拉.png"
+        alt=""
+      >
+    </div>
     <img
       src="@/assets/image/slide-tip-hand.png"
       class="slide-tip_hand"
@@ -34,21 +36,25 @@ export default {
   bottom: 6.17rem;
   left: 50%;
   transform: translateX(-50%);
-  // animation: twinkle 2s infinite;
   font-size: 1.13rem;
   font-family: Source Han Sans CN;
   font-weight: 500;
   color: #18489D;
-  .slide-tip_image {
-    width: 0.94rem;
-    height: 2.47rem;
-    margin-top: 0.94rem;
+  > .twinkle-wrapper {
+    animation: twinkle 2s infinite;
+    > .slide-tip_text {
+    }
+    > .slide-tip_image {
+      width: 0.94rem;
+      height: 2.47rem;
+      margin-top: 0.94rem;
+    }
   }
   .slide-tip_hand {
     position: absolute;
     left: 50%;
     width: 2.26rem;
-    animation: move-up-down 2s infinite;
+    animation: move-up-down 2.8s infinite;
   }
 }
 @keyframes twinkle {
@@ -68,9 +74,12 @@ export default {
 @keyframes move-up-down {
   0% {
     top: 0;
+    opacity: 0;
+  }
+  25% {
     opacity: 1;
   }
-  50% {
+  60% {
     opacity: 1;
   }
   100% {