feat: 优化动画效果

src/components/Manufacturer/style.module.scss

@@ -4,19 +4,19 @@
     background-size: 100% 100%;
     position: relative;
     .left {
+        will-change: transform;
         position: absolute;
         left: 0;
         top: 40%;
-        transform: translateY(-50%) rotate(180deg);
         padding: 0.1rem;
         color: #d76bff;
         animation: transformL 1s linear infinite;
     }
     .right {
+        will-change: transform;
         position: absolute;
         right: 0;
         top: 40%;
-        transform: translateY(-50%);
         padding: 0.1rem;
         color: #d76bff;
         animation: transformR 1s linear infinite;
@@ -54,24 +54,24 @@
 
 @keyframes transformR {
     0% {
-        right: 0;
+        transform: translate3d(1px, -50%, 1px);
     }
     90% {
-        right: -10px;
+        transform: translate3d(10px, -50%, 1px);
     }
     100% {
-        right: 0;
+        transform: translate3d(1px, -50%, 1px);
     }
 }
 
 @keyframes transformL {
     0% {
-        left: 0;
+        transform: translate3d(1px, -50%, 1px) rotate(180deg);
     }
     90% {
-        left: -10px;
+        transform: translate3d(-10px, -50%, 1px) rotate(180deg);
     }
     100% {
-        left: 0;
+        transform: translate3d(1px, -50%, 1px) rotate(180deg);
     }
 }