diff --git a/asset/css/animations.less b/asset/css/animations.less
new file mode 100644
index 000000000..541adb839
--- /dev/null
+++ b/asset/css/animations.less
@@ -0,0 +1,27 @@
+// By courtesy of https://csslab.app/animations/wobble
+@keyframes wobble-effect {
+  0%, 100% {
+    transform: translateX(0%);
+    transform-origin: 50% 50%;
+  }
+
+  15% {
+    transform: translateX(calc(-1 * var(--wobble-distance))) rotate(calc(-1 * var(--wobble-rotation)));
+  }
+
+  30% {
+    transform: translateX(calc(var(--wobble-distance) / 2)) rotate(var(--wobble-rotation));
+  }
+
+  45% {
+    transform: translateX(calc(var(--wobble-distance) / -2)) rotate(calc(var(--wobble-rotation) / -1.8));
+  }
+
+  60% {
+    transform: translateX(calc(var(--wobble-distance) / 3.3)) rotate(calc(var(--wobble-rotation) / 3));
+  }
+
+  75% {
+    transform: translateX(calc(var(--wobble-distance) / -5.5)) rotate(calc(var(--wobble-rotation) / -5));
+  }
+}
diff --git a/asset/css/mixin/mixins.less b/asset/css/mixin/mixins.less
index e82fb3767..1f2d050ed 100644
--- a/asset/css/mixin/mixins.less
+++ b/asset/css/mixin/mixins.less
@@ -44,3 +44,9 @@
   -webkit-user-select: @user-select;
   user-select: @user-select;
 }
+
+.wobble-effect(@duration: 1s; @timing: ease; @iteration: infinite; @distance: 32px; @rotation: 15deg) {
+  --wobble-distance: @distance;
+  --wobble-rotation: @rotation;
+  animation: wobble-effect @duration @timing @iteration;
+}