feat(animations) : wobble animation

src/animations/simple/Wobble.ts

@@ -0,0 +1,52 @@
+import wrapper from "@/HOC/wrapper";
+import { animation, defaults } from "@/lib/defaultConfigs";
+
+const rule = `
+    from {
+        transform: none;
+    }
+
+    15% {
+        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    }
+
+    30% {
+        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    }
+
+    45% {
+        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    }
+
+    60% {
+        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    }
+
+    75% {
+        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    }
+
+    to {
+        transform: none;
+    }
+`;
+
+let name: string | undefined;
+function make() {
+    return name || (name = animation(rule));
+};
+
+export default function Wobble({
+    children,
+    _out,
+    timeout,
+    duration = defaults.duration,
+    delay = defaults.delay,
+    count = defaults.count,
+    forever, ...props
+} = defaults) {
+    const effect = { make, duration: timeout === undefined ? duration : timeout, delay, forever, count, style: { animationFillMode: 'both', } };
+    // @ts-expect-error(some props are not allowed, this will be fixed later)
+    return wrapper(props, effect, false, children, true);
+};
+

src/animations/simple/index.ts

@@ -6,3 +6,5 @@ export * from "./RubberBand";
 export * from "./Flash";
 export * from "./Tada";
 export * from "./Swing";
+export * from "./Spin";
+export * from "./Wobble";