New animation next-bounce

source/css/_common/components/post/post-reward.styl

@@ -28,11 +28,21 @@
     }
 
     if (hexo-config('reward_settings.animation')) {
+      span {
+        transform-origin: center bottom;
+      }
+
       &:hover span {
-        animation: next-roll .1s infinite linear;
+        animation: next-bounce 1.4s infinite ease-in-out;
         // The animation may affect :hover of img in dark mode
         pointer-events: none;
       }
+
+      @media (prefers-reduced-motion: reduce) {
+        &:hover span {
+          animation: none;
+        }
+      }
     }
   }
 
@@ -44,12 +54,28 @@
   }
 }
 
-@keyframes next-roll {
-  from {
-    transform: rotateZ(30deg);
+@keyframes next-bounce {
+  0%, 100% {
+    transform: translateY(0) scale(1);
   }
 
-  to {
-    transform: rotateZ(-30deg);
+  12% {
+    transform: translateY(0) scale(1.04, .96);
+  }
+
+  36% {
+    transform: translateY(-7px) scale(.98, 1.02);
+  }
+
+  58% {
+    transform: translateY(0) scale(1.03, .97);
+  }
+
+  72% {
+    transform: translateY(-2px) scale(1);
+  }
+
+  84% {
+    transform: translateY(0) scale(1);
   }
 }