react-animate-z 3.0.0 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/build/components/AnimateOn.d.ts +2 -2
  2. package/build/components/AnimatePresence.d.ts +0 -1
  3. package/build/index.cjs.js +14 -15
  4. package/build/index.cjs.js.map +1 -1
  5. package/build/index.d.ts +1 -2
  6. package/build/index.esm.js +14 -15
  7. package/build/index.esm.js.map +1 -1
  8. package/package.json +1 -1
package/build/components/AnimateOn.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ReactElement } from "react";
1
+ import React, { ReactElement } from "react";
2
2
  import type { IFAnimateRecipeOptions } from "../animation/types";
3
3
  import type { AnimName } from "../key-frames";
4
4
  export interface IFAnimateOnProps<T = any> {
@@ -8,5 +8,5 @@ export interface IFAnimateOnProps<T = any> {
8
8
  options?: IFAnimateRecipeOptions;
9
9
  children: ReactElement;
10
10
  }
11
- export declare function AnimateOn<T>({ when, value, anim, options, children, }: IFAnimateOnProps<T>): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
11
+ export declare function AnimateOn<T>({ when, value, anim, options, children, }: IFAnimateOnProps<T>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
12
12
  export default AnimateOn;
package/build/components/AnimatePresence.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import React, { ReactElement } from "react";
2
2
  import type { AnimName } from "../key-frames";
3
3
  export interface IFAnimatePresenceProps {
4
- /** show / hide */
5
4
  show: boolean;
6
5
  enter: AnimName;
7
6
  exit: AnimName;
package/build/index.cjs.js CHANGED
@@ -1,22 +1,21 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),r=require("react"),n=require("styled-components");function a(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var e=a(n);const o={bounce:"1s",bounceIn:"1s",bounceOut:"1s",bounceElastic:"1.2s",bounceSmall:"0.8s",bounceRotate:"1s",bounceJelly:"1.2s",jelly:"1s",jellyX:"1s",jellyY:"1s",jellyIn:"1s",jellyOut:"1s",shakeMix:"0.8s",shakeHorizontal:"0.8s",shakeVertical:"0.8s",shakeDiagonal:"0.8s",shakeQuick:"0.5s",pulse:"1s",pulseInOut:"1.2s",pulseFade:"1.2s",pulseFast:"0.6s",pulseColor:"1.2s",heartBeat:"1.3s",float:"2s",floatSway:"2.5s",floatHorizontal:"2.5s",floatCircular:"3s",floatWiggle:"2s",orbit:"3s",orbitEllipse:"3s",flash:"0.8s",flashIrregular:"1.2s",flashFast:"0.5s",flashSlow:"1.5s",flashPulse:"1s",glow:"1.5s",glowTextFlicker:"2s",glowRainbow:"3s",glowBreathing:"2.5s",glowGlitch:"1.2s",blurIn:"0.8s",blurOut:"0.8s",fadeIn:"0.8s",fadeOut:"0.8s",slideInFromLeft:"0.8s",slideInFromRight:"0.8s",slideOutToLeft:"0.8s",slideOutToRight:"0.8s",zoomIn:"1s",zoomOut:"1s",spin:"2s",spin3D:"2.5s",flip:"1s",flipIn:"1s",flipOut:"1s",typing:"2s",typingLoop:"2.5s",typeWriter:"3s",typeDelete:"1.5s",swing:"1s",tada:"1s",hinge:"2s"},s={rubberBand:"\n from { transform: scale3d(1,1,1); }\n 30% { transform: scale3d(1.25,.75,1); }\n 40% { transform: scale3d(.75,1.25,1); }\n 50% { transform: scale3d(1.15,.85,1); }\n 65% { transform: scale3d(.95,1.05,1); }\n 75% { transform: scale3d(1.05,.95,1); }\n to { transform: scale3d(1,1,1); }\n",jello:"\n from, 11.1%, to { transform: none; }\n 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg) scale3d(1,1,1); }\n 33.3% { transform: skewX(6.25deg) skewY(6.25deg) scale3d(1,1,1); }\n 44.4% { transform: skewX(-3.125deg) skewY(-3.125deg) scale3d(1,1,1); }\n 55.5% { transform: skewX(1.5625deg) skewY(1.5625deg) scale3d(1,1,1); }\n 66.6% { transform: skewX(-.78125deg) skewY(-.78125deg) scale3d(1,1,1); }\n 77.7% { transform: skewX(.390625deg) skewY(.390625deg) scale3d(1,1,1); }\n 88.8% { transform: skewX(-.1953125deg) skewY(-.1953125deg) scale3d(1,1,1); }\n",wobble:"\n from { transform: translate3d(0,0,0) scale3d(1,1,1); }\n 15% { transform: translate3d(-25%,0,0) rotate(-5deg) scale3d(1,1,1); }\n 30% { transform: translate3d(20%,0,0) rotate(3deg) scale3d(1,1,1); }\n 45% { transform: translate3d(-15%,0,0) rotate(-3deg) scale3d(1,1,1); }\n 60% { transform: translate3d(10%,0,0) rotate(2deg) scale3d(1,1,1); }\n 75% { transform: translate3d(-5%,0,0) rotate(-1deg) scale3d(1,1,1); }\n to { transform: translate3d(0,0,0) scale3d(1,1,1); }\n",rollIn:"\n from { opacity: 0; transform: translate3d(-100%,0,0) rotate(-120deg) scale3d(1,1,1); }\n to { opacity: 1; transform: translate3d(0,0,0) rotate(0deg) scale3d(1,1,1); }\n",jackInTheBox:"\n from { opacity: 0; transform: scale3d(.1,.1,.1) rotate(30deg); transform-origin: center bottom; }\n 50% { transform: rotate(-10deg) scale3d(.5,.5,.5); }\n 70% { transform: rotate(3deg) scale3d(.8,.8,.8); }\n to { opacity: 1; transform: scale3d(1,1,1); }\n"},f={blurIn:"\n from { filter: blur(5px); opacity: 0; }\n to { filter: blur(0); opacity: 1; }\n",blurInZoom:"\n from { opacity: 0; transform: scale(0.9); filter: blur(6px); }\n to { opacity: 1; transform: scale(1); filter: blur(0); }\n",blurInScale:"\n from { opacity: 0; transform: scale(1.1); filter: blur(6px); }\n to { opacity: 1; transform: scale(1); filter: blur(0); }\n",blurInUp:"\n from { opacity: 0; transform: translateY(40px); filter: blur(6px); }\n to { opacity: 1; transform: translateY(0); filter: blur(0); }\n",blurInRotate:"\n from { opacity: 0; transform: rotate(-10deg) scale(0.95); filter: blur(6px); }\n to { opacity: 1; transform: rotate(0deg) scale(1); filter: blur(0); }\n",blurOut:"\n from { filter: blur(0); opacity: 1; }\n to { filter: blur(6px); opacity: 0; }\n",blurOutZoom:"\n from { opacity: 1; transform: scale(1); filter: blur(0); }\n to { opacity: 0; transform: scale(0.9); filter: blur(6px); }\n",blurOutScale:"\n from { opacity: 1; transform: scale(1); filter: blur(0); }\n to { opacity: 0; transform: scale(1.1); filter: blur(6px); }\n",blurOutDown:"\n from { opacity: 1; transform: translateY(0); filter: blur(0); }\n to { opacity: 0; transform: translateY(40px); filter: blur(6px); }\n",blurOutRotate:"\n from { opacity: 1; transform: rotate(0deg) scale(1); filter: blur(0); }\n to { opacity: 0; transform: rotate(10deg) scale(0.95); filter: blur(6px); }\n"},l={bounce:"\n 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }\n 40% { transform: translateY(-30px); }\n 60% { transform: translateY(-15px); }\n",bounceIn:"\n 0% { opacity: 0; transform: scale(.3); }\n 50% { opacity: 1; transform: scale(1.05); }\n 70% { transform: scale(.9); }\n 100% { transform: scale(1); }\n",bounceOut:"\n 20% { transform: scale(.9); }\n 50%, 55% { opacity: 1; transform: scale(1.1); }\n to { opacity: 0; transform: scale(.3); }\n",bounceElastic:"\n 10% { transform: scaleY(0.9) translateY(5%); }\n 45% { transform: scaleY(1.2) translateY(-100%); }\n 65% { transform: scaleY(0.95) translateY(0); }\n 75% { transform: scaleY(1.05) translateY(-25%); }\n 85%, 100% { transform: scaleY(1) translateY(0); }\n",bounceSmall:"\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-6px); }\n",bounceRotate:"\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 40% { transform: translateY(-20px) rotate(-5deg); }\n 60% { transform: translateY(-10px) rotate(5deg); }\n",bounceJelly:"\n 0%, 100% { transform: scale(1, 1); }\n 30% { transform: scale(1.25, 0.75); }\n 40% { transform: scale(0.75, 1.25); }\n 50% { transform: scale(1.15, 0.85); }\n 65% { transform: scale(0.95, 1.05); }\n 75% { transform: scale(1.05, 0.95); }\n",bounceSide:"\n 0%, 100% { transform: translateX(0); }\n 30% { transform: translateX(-20px); }\n 60% { transform: translateX(15px); }\n",bounceDiagonal:"\n 0%, 100% { transform: translate(0,0); }\n 30% { transform: translate(-15px,-20px); }\n 60% { transform: translate(12px,15px); }\n",bounceFlip:"\n 0% { transform: translateY(0) rotateY(0deg); }\n 40% { transform: translateY(-25px) rotateY(180deg); }\n 70% { transform: translateY(-10px) rotateY(360deg); }\n 100% { transform: translateY(0) rotateY(360deg); }\n",bounceFade:"\n 0% { opacity: 0; transform: translateY(0); }\n 40% { opacity: 1; transform: translateY(-20px); }\n 70% { transform: translateY(-10px); }\n 100% { opacity: 0; transform: translateY(0); }\n",bounceCrazy:"\n 0% { transform: translateY(0); }\n 20% { transform: translateY(-25px) rotate(-5deg); }\n 40% { transform: translateY(15px) rotate(5deg); }\n 60% { transform: translateY(-20px) rotate(-8deg); }\n 80% { transform: translateY(10px) rotate(6deg); }\n 100% { transform: translateY(0) rotate(0); }\n",bounceGlow:"\n 0%, 100% { transform: translateY(0); box-shadow: 0 0 0px rgba(255, 255, 0, 0); }\n 40% { transform: translateY(-20px); box-shadow: 0 0 20px rgba(255, 255, 0, 0.8); }\n 60% { transform: translateY(-10px); box-shadow: 0 0 10px rgba(255, 255, 0, 0.6); }\n",bounceFadeScale:"\n 0% { opacity: 0; transform: scale(0.5) translateY(0); }\n 40% { opacity: 1; transform: scale(1.2) translateY(-25px); }\n 70% { opacity: 0.8; transform: scale(0.9) translateY(-10px); }\n 100% { opacity: 0; transform: scale(0.5) translateY(0); }\n",bounceSparkle:"\n 0% { transform: translateY(0) scale(1); filter: brightness(1); }\n 30% { transform: translateY(-20px) scale(1.2); filter: brightness(1.6); }\n 60% { transform: translateY(-10px) scale(0.9); filter: brightness(1.2); }\n 100% { transform: translateY(0) scale(1); filter: brightness(1); }\n",bounceRainbow:"\n 0% { transform: translateY(0); color: red; }\n 25% { transform: translateY(-20px); color: orange; }\n 50% { transform: translateY(-10px); color: yellow; }\n 75% { transform: translateY(-15px); color: green; }\n 100% { transform: translateY(0); color: blue; }\n"},i="\n from { opacity: 0; transform: translateX(-100%); }\n to { opacity: 1; transform: translateX(0); }\n",m="\n from { opacity: 0; transform: translateX(100%); }\n to { opacity: 1; transform: translateX(0); }\n",c="\n from { opacity: 0; transform: translateY(-100%); }\n to { opacity: 1; transform: translateY(0); }\n",p="\n from { opacity: 0; transform: translateY(100%); }\n to { opacity: 1; transform: translateY(0); }\n",d={fadeIn:"\n from { opacity: 0; }\n to { opacity: 1; }\n",fadeOut:"\n from { opacity: 1; }\n to { opacity: 0; }\n",fadeInFromLeft:i,fadeInFromRight:m,fadeInFromTop:c,fadeInFromBottom:p,fadeOutToLeft:"\n from { opacity: 1; transform: translateX(0); }\n to { opacity: 0; transform: translateX(-100%); }\n",fadeOutToRight:"\n from { opacity: 1; transform: translateX(0); }\n to { opacity: 0; transform: translateX(100%); }\n",fadeOutToTop:"\n from { opacity: 1; transform: translateY(0); }\n to { opacity: 0; transform: translateY(-100%); }\n",fadeOutToBottom:"\n from { opacity: 1; transform: translateY(0); }\n to { opacity: 0; transform: translateY(100%); }\n",fadeInUp:p,fadeInDown:c,fadeInLeft:m,fadeInRight:i,fadeInZoom:"\n from { opacity: 0; transform: scale(0.5); }\n to { opacity: 1; transform: scale(1); }\n",fadeOutZoom:"\n from { opacity: 1; transform: scale(1); }\n to { opacity: 0; transform: scale(0.5); }\n",fadeInRotate:"\n from { opacity: 0; transform: rotate(-45deg); }\n to { opacity: 1; transform: rotate(0); }\n",fadeOutRotate:"\n from { opacity: 1; transform: rotate(0); }\n to { opacity: 0; transform: rotate(45deg); }\n",fadeInSkew:"\n from { opacity: 0; transform: skewX(-30deg); }\n to { opacity: 1; transform: skewX(0); }\n",fadeOutSkew:"\n from { opacity: 1; transform: skewX(0); }\n to { opacity: 0; transform: skewX(30deg); }\n",fadeInFlipX:"\n from { opacity: 0; transform: rotateX(90deg); }\n to { opacity: 1; transform: rotateX(0); }\n",fadeOutFlipX:"\n from { opacity: 1; transform: rotateX(0); }\n to { opacity: 0; transform: rotateX(-90deg); }\n",fadeInFlipY:"\n from { opacity: 0; transform: rotateY(90deg); }\n to { opacity: 1; transform: rotateY(0); }\n",fadeOutFlipY:"\n from { opacity: 1; transform: rotateY(0); }\n to { opacity: 0; transform: rotateY(-90deg); }\n",fadeInPerspective:"\n from { opacity: 0; transform: perspective(400px) translateZ(-200px); }\n to { opacity: 1; transform: perspective(400px) translateZ(0); }\n",fadeOutPerspective:"\n from { opacity: 1; transform: perspective(400px) translateZ(0); }\n to { opacity: 0; transform: perspective(400px) translateZ(-200px); }\n",fadeInBlur:"\n from { opacity: 0; filter: blur(10px); }\n to { opacity: 1; filter: blur(0); }\n",fadeOutBlur:"\n from { opacity: 1; filter: blur(0); }\n to { opacity: 0; filter: blur(10px); }\n",fadeInColor:"\n from { opacity: 0; filter: hue-rotate(180deg); }\n to { opacity: 1; filter: hue-rotate(0); }\n",fadeOutColor:"\n from { opacity: 1; filter: hue-rotate(0); }\n to { opacity: 0; filter: hue-rotate(180deg); }\n",fadePulse:"\n 0%, 100% { opacity: 0.4; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.05); }\n",fadeBounce:"\n 0% { opacity: 0; transform: translateY(20px); }\n 50% { opacity: 1; transform: translateY(-10px); }\n 70% { transform: translateY(5px); }\n 100% { transform: translateY(0); }\n",fadeSwing:"\n 0% { opacity: 0; transform: rotate(15deg); }\n 50% { opacity: 1; transform: rotate(-15deg); }\n 100% { opacity: 1; transform: rotate(0deg); }\n",fadeZoomRotate:"\n from { opacity: 0; transform: scale(0.5) rotate(-180deg); }\n to { opacity: 1; transform: scale(1) rotate(0); }\n",fadeElastic:"\n 0% { opacity: 0; transform: scale(0.5); }\n 60% { opacity: 1; transform: scale(1.2); }\n 80% { transform: scale(0.9); }\n 100% { transform: scale(1); }\n",fadeShine:"\n 0% { opacity: 0; background-position: -200%; }\n 100% { opacity: 1; background-position: 200%; }\n"},u={...l,...{effect3D:"\n to {\n text-shadow:\n 0 1px 0 #ccc,\n 0 2px 0 #c9c9c9,\n 0 3px 0 #bbb,\n 0 4px 0 #b9b9b9,\n 0 5px 0 #aaa,\n 0 6px 1px rgba(0, 0, 0, .1),\n 0 0 5px rgba(0, 0, 0, .1),\n 0 1px 3px rgba(0, 0, 0, .3),\n 0 3px 5px rgba(0, 0, 0, .2),\n 0 5px 10px rgba(0, 0, 0, .25);\n }\n",neonGlow:"\n from { text-shadow: none; }\n to {\n text-shadow:\n 0 0 5px #0ff,\n 0 0 10px #0ff,\n 0 0 20px #0ff,\n 0 0 40px #0ff,\n 0 0 80px #0ff;\n color: #fff;\n }\n",retro3D:"\n to {\n text-shadow:\n 2px 2px 0 #ff0040,\n 4px 4px 0 #00ffd5,\n 6px 6px 0 #000;\n }\n",emboss:"\n to {\n text-shadow:\n -1px -1px 1px #fff,\n 1px 1px 2px rgba(0,0,0,0.6);\n color: #555;\n }\n",fireGlow:"\n 0%, 100% {\n text-shadow:\n 0 0 5px #ff6600,\n 0 0 10px #ff3300,\n 0 0 20px #ff0000;\n }\n 50% {\n text-shadow:\n 0 0 10px #ff9933,\n 0 0 20px #ff6600,\n 0 0 30px #ff3300;\n }\n",iceGlow:"\n to {\n text-shadow:\n 0 0 5px #66ccff,\n 0 0 10px #33ccff,\n 0 0 20px #00aaff,\n 0 0 40px #0099ff;\n color: #e6f9ff;\n }\n",shine:"\n 0% { background-position: -200%; }\n 100% { background-position: 200%; }\n"},...f,...{flash:"\n 0%, 50%, 100% { opacity: 1; }\n 25%, 75% { opacity: 0; }\n",flashIrregular:"\n 0%, 40%, 80% { opacity: 1; }\n 20%, 60%, 100% { opacity: 0; }\n",flashFast:"\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0; }\n",flashSlow:"\n 0% { opacity: 1; }\n 45% { opacity: 0; }\n 55% { opacity: 0; }\n 100% { opacity: 1; }\n",flashPulse:"\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.3; }\n",flashGlow:"\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.4; transform: scale(1.05); }\n",flashColor:"\n 0%, 100% { opacity: 1; filter: hue-rotate(0deg); }\n 50% { opacity: 0.2; filter: hue-rotate(180deg); }\n",flashStrobe:"\n 0%, 20%, 40%, 60%, 80%, 100% { opacity: 1; }\n 10%, 30%, 50%, 70%, 90% { opacity: 0; }\n",flashSoft:"\n 0% { opacity: 1; }\n 50% { opacity: 0.6; }\n 100% { opacity: 1; }\n",flashReversePulse:"\n 0%, 100% { opacity: 0.3; }\n 50% { opacity: 1; }\n"},...{float:"\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n",floatSway:"\n 0% { transform: translate(2%, -10%) rotate(-1deg); }\n 100% { transform: translate(-2%, 5%) rotate(3deg); }\n",floatHorizontal:"\n 0%, 100% { transform: translateX(0); }\n 50% { transform: translateX(12px); }\n",floatCircular:"\n 0% { transform: translate(0, 0); }\n 25% { transform: translate(8px, -8px); }\n 50% { transform: translate(0, -12px); }\n 75% { transform: translate(-8px, -8px); }\n 100% { transform: translate(0, 0); }\n",floatWiggle:"\n 0%, 100% { transform: rotate(0deg); }\n 25% { transform: rotate(2deg); }\n 50% { transform: rotate(-2deg); }\n 75% { transform: rotate(1deg); }\n",floatPulse:"\n 0%, 100% { transform: translateY(0) scale(1); }\n 50% { transform: translateY(-8px) scale(1.05); }\n",floatDiagonal:"\n 0%, 100% { transform: translate(0, 0); }\n 50% { transform: translate(10px, -10px); }\n",floatSwing:"\n 0%, 100% { transform: rotate(0deg) translateY(0); }\n 25% { transform: rotate(3deg) translateY(-5px); }\n 50% { transform: rotate(-3deg) translateY(-10px); }\n 75% { transform: rotate(2deg) translateY(-5px); }\n",floatWave:"\n 0% { transform: translate(0, 0); }\n 25% { transform: translate(8px, -6px); }\n 50% { transform: translate(0, -12px); }\n 75% { transform: translate(-8px, -6px); }\n 100% { transform: translate(0, 0); }\n",floatDrift:"\n 0% { transform: translate(0, 0) rotate(0deg); }\n 25% { transform: translate(6px, -4px) rotate(1deg); }\n 50% { transform: translate(-4px, -8px) rotate(-1deg); }\n 75% { transform: translate(-6px, 6px) rotate(2deg); }\n 100% { transform: translate(0, 0) rotate(0deg); }\n"},...{glow:"\n 0% { box-shadow: 0 0 5px #ff00de; }\n 50% { box-shadow: 0 0 20px #ff00de; }\n 100% { box-shadow: 0 0 5px #ff00de; }\n",glowTextFlicker:"\n 0% { color: inherit; text-shadow: none; }\n 2%, 59%, 64%, 79% { color: #fff; }\n 3%, 59%, 63%, 78% {\n text-shadow:\n 0px 0px 60px,\n 0 0 22px,\n 0 0 1em inherit,\n 0 0 0.5em inherit,\n 0 0 .1em inherit,\n 0 10px 3px #000;\n }\n 60%, 75% { color: inherit; text-shadow: none; }\n",glowRainbow:"\n 0% { filter: hue-rotate(0deg); }\n 100% { filter: hue-rotate(360deg); }\n",glowBreathing:"\n 0%, 100% { text-shadow: 0 0 5px #00f, 0 0 10px #00f; }\n 50% { text-shadow: 0 0 20px #00f, 0 0 40px #00f; }\n",glowGlitch:"\n 0%, 100% { text-shadow: 0 0 5px #0ff, 0 0 10px #0ff; }\n 10% { text-shadow: none; }\n 20% { text-shadow: 0 0 15px #f0f, 0 0 30px #f0f; }\n 30% { text-shadow: none; }\n 40% { text-shadow: 0 0 25px #ff0, 0 0 50px #ff0; }\n 60% { text-shadow: none; }\n 80% { text-shadow: 0 0 15px #0ff, 0 0 35px #0ff; }\n"},...{jelly:"\n 0%, 100% { transform: scale(1, 1); }\n 25% { transform: scale(0.9, 1.1); }\n 50% { transform: scale(1.1, 0.9); }\n 75% { transform: scale(0.95, 1.05); }\n",jellyX:"\n 0% { transform: scaleX(1); }\n 20% { transform: scaleX(0.9); }\n 50% { transform: scaleX(1.25); }\n 85% { transform: scaleX(0.8); }\n 100% { transform: scaleX(1); }\n",jellyY:"\n 0% { transform: scaleY(1); }\n 20% { transform: scaleY(0.9); }\n 50% { transform: scaleY(1.25); }\n 85% { transform: scaleY(0.8); }\n 100% { transform: scaleY(1); }\n",jellyIn:"\n 0% { transform: scale(0.5); opacity: 0; }\n 50% { transform: scale(1.2); opacity: 1; }\n 70% { transform: scale(0.9); }\n 100% { transform: scale(1); }\n",jellyOut:"\n 0% { transform: scale(1); opacity: 1; }\n 20% { transform: scale(1.1); }\n 50% { transform: scale(0.5); opacity: 0.5; }\n 100% { transform: scale(0); opacity: 0; }\n"},...{shadow:"\n 0%, 100% { box-shadow: none; }\n 50% { box-shadow: 0 10px 20px rgba(0,0,0,0.2); }\n",shadowText:"\n 0% { text-shadow: 1px 1px 0px #333; }\n 50% { text-shadow: 3px 3px 2px #333; }\n 100% { text-shadow: 9px 10px 6px #999; }\n",shadowPulse:"\n 0%, 100% { box-shadow: 0 0 5px rgba(0,0,0,0.2); }\n 50% { box-shadow: 0 0 25px rgba(0,0,0,0.4); }\n",shadowNeon:"\n 0%, 100% { text-shadow: 0 0 5px #0ff, 0 0 10px #0ff; }\n 50% { text-shadow: 0 0 20px #0ff, 0 0 40px #0ff; }\n",spin:"\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n",spin3D:"\n from { transform: rotateY(0deg); }\n to { transform: rotateY(-360deg); }\n",spinX:"\n from { transform: rotateX(0deg); }\n to { transform: rotateX(360deg); }\n",spinBounce:"\n 0% { transform: rotateZ(0deg) scale(1); }\n 50% { transform: rotateZ(180deg) scale(1.2); }\n 100% { transform: rotateZ(360deg) scale(1); }\n",swing:"\n 20% { transform: rotate(15deg); }\n 40% { transform: rotate(-10deg); }\n 60% { transform: rotate(5deg); }\n 80% { transform: rotate(-5deg); }\n 100% { transform: rotate(0deg); }\n",swingPivot:"\n 0% { transform: rotateZ(0deg); transform-origin: center top; }\n 20% { transform: rotateZ(15deg); transform-origin: center top; }\n 40% { transform: rotateZ(-15deg); transform-origin: center top; }\n 60% { transform: rotateZ(7deg); transform-origin: center top; }\n 80% { transform: rotateZ(-7deg); transform-origin: center top; }\n 100% { transform: rotateZ(0deg); transform-origin: center top; }\n",swingX:"\n 15% { transform: translateX(-25%) rotate(-5deg); }\n 30% { transform: translateX(20%) rotate(3deg); }\n 45% { transform: translateX(-15%) rotate(-3deg); }\n 60% { transform: translateX(10%) rotate(2deg); }\n 75% { transform: translateX(-5%) rotate(-1deg); }\n 100% { transform: translateX(0); }\n",swingY:"\n 15% { transform: translateY(-25%) rotate(-3deg); }\n 30% { transform: translateY(20%) rotate(2deg); }\n 45% { transform: translateY(-15%) rotate(-2deg); }\n 60% { transform: translateY(10%) rotate(1deg); }\n 75% { transform: translateY(-5%) rotate(-1deg); }\n 100% { transform: translateY(0); }\n",orbit:"\n from { transform: rotate(0deg) translateX(20px) rotate(0deg); }\n to { transform: rotate(360deg) translateX(20px) rotate(-360deg); }\n",orbitEllipse:"\n from { transform: rotate(0deg) translateX(30px) translateY(10px) rotate(0deg); }\n to { transform: rotate(360deg) translateX(30px) translateY(10px) rotate(-360deg); }\n"},...{pulse:"\n from { transform: scale(1); }\n to { transform: scale(1.1); }\n",pulseInOut:"\n 0% { transform: scale(1); }\n 50% { transform: scale(1.15); }\n 100% { transform: scale(1); }\n",pulseFade:"\n 0%, 100% { transform: scale(1); opacity: 1; }\n 50% { transform: scale(1.2); opacity: 0.6; }\n",pulseFast:"\n 0%, 100% { transform: scale(1); }\n 25% { transform: scale(1.2); }\n 75% { transform: scale(0.9); }\n",pulseColor:"\n 0%, 100% { transform: scale(1); background-color: #ff69b4; }\n 50% { transform: scale(1.2); background-color: #ff1493; }\n"},...d,...{squeezeMix:"\n 0% { transform: scale3d(1, 1, 1); }\n 15% { transform: scale3d(0.95, 0.95, 1); }\n 30% { transform: scale3d(0.9, 0.9, 1); }\n 55% { transform: scale3d(0.75, 0.75, 1); }\n 70% { transform: scale3d(1.3, 1.3, 1); }\n 85% { transform: scale3d(0.95, 0.95, 1); }\n 100% { transform: scale3d(1, 1, 1); }\n",squeezeHorizontal:"\n 0% { transform: scaleX(1); }\n 15% { transform: scaleX(0.95); }\n 30% { transform: scaleX(0.9); }\n 55% { transform: scaleX(0.75); }\n 70% { transform: scaleX(1.3); }\n 85% { transform: scaleX(0.95); }\n 100% { transform: scaleX(1); }\n",squeezeVertical:"\n 0% { transform: scaleY(1); }\n 15% { transform: scaleY(0.95); }\n 30% { transform: scaleY(0.9); }\n 55% { transform: scaleY(0.75); }\n 70% { transform: scaleY(1.3); }\n 85% { transform: scaleY(0.95); }\n 100% { transform: scaleY(1); }\n",squeezeDiagonal:"\n 0% { transform: scale3d(1,1,1); }\n 25% { transform: scale3d(0.8,1.2,1); }\n 50% { transform: scale3d(1.1,0.9,1); }\n 75% { transform: scale3d(0.9,1.1,1); }\n 100% { transform: scale3d(1,1,1); }\n",squeezePulse:"\n 0%,100% { transform: scale3d(1,1,1); }\n 25% { transform: scale3d(0.9,0.9,1); }\n 50% { transform: scale3d(1.1,1.1,1); }\n 75% { transform: scale3d(0.95,0.95,1); }\n",squeezeBounce:"\n 0% { transform: scale3d(1,1,1); }\n 20% { transform: scale3d(0.7,0.7,1); }\n 50% { transform: scale3d(1.2,1.2,1); }\n 70% { transform: scale3d(0.9,0.9,1); }\n 100% { transform: scale3d(1,1,1); }\n",squeezeElastic:"\n 0% { transform: scale3d(1,1,1); }\n 25% { transform: scale3d(0.8,1.2,1); }\n 50% { transform: scale3d(1.2,0.8,1); }\n 75% { transform: scale3d(0.9,1.1,1); }\n 100% { transform: scale3d(1,1,1); }\n",squeezeFlash:"\n 0%,100% { transform: scale3d(1,1,1); opacity: 1; }\n 25% { transform: scale3d(0.8,0.8,1); opacity: 0.6; }\n 50% { transform: scale3d(1.2,1.2,1); opacity: 1; }\n 75% { transform: scale3d(0.9,0.9,1); opacity: 0.8; }\n",shakeMix:"\n 0% { transform: translate3d(2px, 1px, 0) rotate(0deg); }\n 10% { transform: translate3d(-1px, -2px, 0) rotate(-1deg); }\n 20% { transform: translate3d(-3px, 0px, 0) rotate(1deg); }\n 30% { transform: translate3d(0px, 2px, 0) rotate(0deg); }\n 40% { transform: translate3d(1px, -1px, 0) rotate(1deg); }\n 50% { transform: translate3d(-1px, 2px, 0) rotate(-1deg); }\n 60% { transform: translate3d(-3px, 1px, 0) rotate(0deg); }\n 70% { transform: translate3d(2px, 1px, 0) rotate(-1deg); }\n 80% { transform: translate3d(-1px, -1px, 0) rotate(1deg); }\n 90% { transform: translate3d(2px, 2px, 0) rotate(0deg); }\n 100% { transform: translate3d(1px, -2px, 0) rotate(-1deg); }\n",shakeHorizontal:"\n 0%, 100% { transform: translateX(0); }\n 10%, 30%, 50%, 70%, 90% { transform: translateX(6px); }\n 20%, 40%, 60%, 80% { transform: translateX(-4px); }\n",shakeVertical:"\n 0%, 100% { transform: translateY(0); }\n 10%, 30%, 50%, 70%, 90% { transform: translateY(6px); }\n 20%, 40%, 60%, 80% { transform: translateY(-4px); }\n",shakeDiagonal:"\n 0%,100% { transform: translate3d(0,0,0); }\n 20% { transform: translate3d(5px,5px,0); }\n 40% { transform: translate3d(-5px,-5px,0); }\n 60% { transform: translate3d(5px,-5px,0); }\n 80% { transform: translate3d(-5px,5px,0); }\n",shakeQuick:"\n 0%,100% { transform: translate3d(0,0,0); }\n 10%,30%,50%,70%,90% { transform: translate3d(3px,0,0); }\n 20%,40%,60%,80% { transform: translate3d(-3px,0,0); }\n",shakeRotate:"\n 0%,100% { transform: rotate(0deg); }\n 25% { transform: rotate(-5deg); }\n 50% { transform: rotate(5deg); }\n 75% { transform: rotate(-3deg); }\n",shakeSkew:"\n 0%,100% { transform: skew(0deg, 0deg); }\n 20% { transform: skew(-10deg, -5deg); }\n 40% { transform: skew(8deg, 3deg); }\n 60% { transform: skew(-6deg, -3deg); }\n 80% { transform: skew(4deg, 2deg); }\n",shakeBounce:"\n 0%,100% { transform: translateY(0); }\n 20% { transform: translateY(-6px); }\n 40% { transform: translateY(4px); }\n 60% { transform: translateY(-4px); }\n 80% { transform: translateY(2px); }\n",shakeCrazy:"\n 0% { transform: translate(0,0) rotate(0deg); }\n 20% { transform: translate(-4px,3px) rotate(-3deg); }\n 40% { transform: translate(5px,-2px) rotate(4deg); }\n 60% { transform: translate(-3px,2px) rotate(-4deg); }\n 80% { transform: translate(3px,-3px) rotate(2deg); }\n 100% { transform: translate(0,0) rotate(0deg); }\n",squeezeThenShakeX:"\n 0% { transform: scale3d(1,1,1); }\n 20% { transform: scale3d(0.7,0.7,1); }\n 40% { transform: scale3d(1.2,1.2,1); }\n 60% { transform: scale3d(0.9,0.9,1); }\n 70% { transform: translateX(0); }\n 80% { transform: translateX(-6px); }\n 90% { transform: translateX(6px); }\n 100% { transform: translateX(0); }\n",shakeYThenSqueeze:"\n 0% { transform: translateY(0); }\n 20% { transform: translateY(-6px); }\n 40% { transform: translateY(6px); }\n 60% { transform: translateY(-3px); }\n 70% { transform: scale3d(0.7,0.7,1); }\n 85% { transform: scale3d(1.2,1.2,1); }\n 100% { transform: scale3d(1,1,1); }\n",squeezeShakeCrazy:"\n 0% { transform: scale3d(1,1,1); }\n 20% { transform: scale3d(0.8,1.2,1); }\n 40% { transform: scale3d(1.2,0.8,1); }\n 50% { transform: translate(-4px,3px) rotate(-3deg); }\n 70% { transform: translate(5px,-2px) rotate(4deg); }\n 90% { transform: translate(-3px,2px) rotate(-4deg); }\n 100% { transform: scale3d(1,1,1) translate(0,0) rotate(0); }\n"},...{slideInFromLeft:"\n from { transform: translateX(-100%); opacity: 0; }\n to { transform: translateX(0); opacity: 1; }\n",slideInFromRight:"\n from { transform: translateX(100%); opacity: 0; }\n to { transform: translateX(0); opacity: 1; }\n",slideOutToLeft:"\n from { transform: translateX(0); opacity: 1; }\n to { transform: translateX(-100%); opacity: 0; }\n",slideOutToRight:"\n from { transform: translateX(0); opacity: 1; }\n to { transform: translateX(100%); opacity: 0; }\n",slideInFromTop:"\n from { transform: translateY(-100%); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n",slideInFromBottom:"\n from { transform: translateY(100%); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n",slideOutToTop:"\n from { transform: translateY(0); opacity: 1; }\n to { transform: translateY(-100%); opacity: 0; }\n",slideOutToBottom:"\n from { transform: translateY(0); opacity: 1; }\n to { transform: translateY(100%); opacity: 0; }\n",slideInFromLeftOvershoot:"\n 0% { transform: translateX(-100%); opacity: 0; }\n 60% { transform: translateX(20%); opacity: 1; }\n 100% { transform: translateX(0); opacity: 1; }\n",slideInFromRightOvershoot:"\n 0% { transform: translateX(100%); opacity: 0; }\n 60% { transform: translateX(-20%); opacity: 1; }\n 100% { transform: translateX(0); opacity: 1; }\n",slideOutToLeftOvershoot:"\n 0% { transform: translateX(0); opacity: 1; }\n 60% { transform: translateX(-120%); opacity: 0; }\n 100% { transform: translateX(-100%); opacity: 0; }\n",slideOutToRightOvershoot:"\n 0% { transform: translateX(0); opacity: 1; }\n 60% { transform: translateX(120%); opacity: 0; }\n 100% { transform: translateX(100%); opacity: 0; }\n",slideInFromTopOvershoot:"\n 0% { transform: translateY(-100%); opacity: 0; }\n 60% { transform: translateY(20%); opacity: 1; }\n 100% { transform: translateY(0); opacity: 1; }\n",slideInFromBottomOvershoot:"\n 0% { transform: translateY(100%); opacity: 0; }\n 60% { transform: translateY(-20%); opacity: 1; }\n 100% { transform: translateY(0); opacity: 1; }\n",slideOutToTopOvershoot:"\n 0% { transform: translateY(0); opacity: 1; }\n 60% { transform: translateY(-120%); opacity: 0; }\n 100% { transform: translateY(-100%); opacity: 0; }\n",slideOutToBottomOvershoot:"\n 0% { transform: translateY(0); opacity: 1; }\n 60% { transform: translateY(120%); opacity: 0; }\n 100% { transform: translateY(100%); opacity: 0; }\n"},...{flip:"from{transform:rotateY(0)}to{transform:rotateY(180deg)}",flipIn:"\n 0% { transform: rotateX(180deg); opacity: 0; }\n 35% { transform: rotateX(120deg); opacity: 0; }\n 65% { opacity: 0; }\n 100% { transform: rotateX(360deg); opacity: 1; }\n",flipOut:"\n 0% { transform: rotateX(0deg); opacity: 1; }\n 35% { transform: rotateX(-40deg); opacity: 1; }\n 65% { opacity: 0; }\n 100% { transform: rotateX(180deg); opacity: 0; }\n",flipSlowDown:"\n 0% { transform: rotateX(0deg); }\n 5% { transform: rotateX(1turn); }\n 10% { transform: rotateX(2turn); }\n 20% { transform: rotateX(3turn); }\n 40% { transform: rotateX(4turn); }\n 70%,100% { transform: rotateX(5turn); }\n",flipToLeft:"\n from { transform: rotateY(0); }\n to { transform: rotateY(-90deg); }\n",flipToRight:"\n from { transform: rotateY(0); }\n to { transform: rotateY(90deg); }\n",flipFromTop:"\n from { transform: rotateX(-90deg); }\n to { transform: rotateX(0); }\n",flipToTop:"\n from { transform: rotateX(0); }\n to { transform: rotateX(-90deg); }\n",flipToBottom:"\n from { transform: rotateX(0); }\n to { transform: rotateX(90deg); }\n",flipFromBottom:"\n from { transform: rotateX(90deg); }\n to { transform: rotateX(0); }\n",flipFromLeftToCenter:"\n from { transform: rotateY(-90deg); }\n to { transform: rotateY(0); }\n",flipFromRightToCenter:"\n from { transform: rotateY(90deg); }\n to { transform: rotateY(0); }\n",flipRich:"\n 0% { transform: perspective(1000px) rotateX(360deg); transform-origin: center; }\n 100% { transform: perspective(1000px) rotateX(0deg); transform-origin: center; }\n",flipToTopRich:"\n from { transform: rotateX(-90deg); transform-origin: center top; opacity: 1; }\n to { transform: rotateX(90deg); transform-origin: center top; opacity: 0; }\n",flipToBottomRich:"\n from { opacity: 1; transform-origin: 0% 0%; transform: rotateX(0deg) translateY(0); }\n to { opacity: 0; transform-origin: 0% 0%; transform: rotateX(-90deg) translateY(50px); }\n",flipToTopLeftRich:"\n from {\n opacity: 1;\n transform-origin: top left;\n transform: rotateX(0deg) rotateY(0deg);\n }\n to {\n opacity: 0;\n transform-origin: top left;\n transform: rotateX(-90deg) rotateY(-90deg);\n }\n",flipToRightRich:"\n from {\n opacity: 1;\n transform-origin: center right;\n transform: rotateY(0deg);\n }\n to {\n opacity: 0;\n transform-origin: center right;\n transform: rotateY(90deg);\n }\n",flipFromTopRich:"\n from { opacity: 0; transform-origin: 0% 0%; transform: rotateX(90deg); }\n to { opacity: 1; transform-origin: 0% 0%; transform: rotateX(0deg); }\n",flipFromBottomRich:"\n from { transform: rotateX(-90deg); transform-origin: 50% 0; opacity: 0; }\n to { transform: rotateX(0deg); transform-origin: 50% 0; opacity: 1; }\n",flipFromLeftToCenterRich:"\n 0% { transform: rotateY(-95deg) translateX(-200px); transform-origin: left; }\n 100% { transform: rotateY(0deg); transform-origin: left; }\n",flipFromRightToCenterRich:"\n 0% { transform: rotateY(95deg) translateX(200px); transform-origin: right; }\n 100% { transform: rotateY(0deg); transform-origin: right; }\n"},...{fold:"from { transform: scaleY(1); } to { transform: scaleY(0); }",unfold:"from { transform: scaleY(0); } to { transform: scaleY(1); }",foldDeep:"\n 0% { transform: scale3d(1, 1, 1); }\n 30% { transform: scale3d(1, 0.4, 1); }\n 60% { transform: scale3d(0.4, 0.4, 1); }\n 100% { opacity: 0; transform: scale3d(0.2, 0.2, 0.2); }\n",unfoldDeep:"\n 0% { opacity: 0; transform: scale3d(0, 0, 0); }\n 30% { opacity: 1; transform: scale3d(0.4, 0.4, 1); }\n 60% { transform: scale3d(0.4, 1, 1); }\n 100% { transform: scale3d(1, 1, 1); }\n",foldLeft:"\n from { transform: perspective(400px) rotateY(0); opacity: 1; }\n to { transform: perspective(400px) rotateY(-90deg); opacity: 0; }\n",unfoldLeft:"\n from { transform: perspective(400px) rotateY(-90deg); opacity: 0; }\n to { transform: perspective(400px) rotateY(0); opacity: 1; }\n",foldRight:"\n from { transform: perspective(400px) rotateY(0); opacity: 1; }\n to { transform: perspective(400px) rotateY(90deg); opacity: 0; }\n",unfoldRight:"\n from { transform: perspective(400px) rotateY(90deg); opacity: 0; }\n to { transform: perspective(400px) rotateY(0); opacity: 1; }\n",foldUp:"\n from { transform: perspective(400px) rotateX(0); opacity: 1; }\n to { transform: perspective(400px) rotateX(-90deg); opacity: 0; }\n",unfoldUp:"\n from { transform: perspective(400px) rotateX(-90deg); opacity: 0; }\n to { transform: perspective(400px) rotateX(0); opacity: 1; }\n",foldDown:"\n from { transform: perspective(400px) rotateX(0); opacity: 1; }\n to { transform: perspective(400px) rotateX(90deg); opacity: 0; }\n",unfoldDown:"\n from { transform: perspective(400px) rotateX(90deg); opacity: 0; }\n to { transform: perspective(400px) rotateX(0); opacity: 1; }\n"},...{hangOnLeft:"\n from { transform: rotate(0deg); }\n to { transform: rotate(-20deg); }\n",hangOnRight:"\n from { transform: rotate(0deg); }\n to { transform: rotate(20deg); }\n",hangOnTop:"\n from { transform: rotate(0deg); }\n to { transform: rotate(20deg); transform-origin: top; }\n",hangOnBottom:"\n from { transform: rotate(0deg); }\n to { transform: rotate(-20deg); transform-origin: bottom; }\n",hangOnLeftSwing:"\n 0% { transform-origin: left; transform: rotate(0deg); }\n 30% { transform: rotate(110deg); }\n 50% { transform: rotate(75deg); }\n 65% { transform: rotate(100deg); }\n 78% { transform: rotate(80deg); }\n 88% { transform: rotate(95deg); }\n 95% { transform: rotate(86deg); }\n 100% { transform: rotate(90deg); }\n",hangOnRightSwing:"\n 0% { transform-origin: right; transform: rotate(0deg); }\n 30% { transform: rotate(-110deg); }\n 50% { transform: rotate(-75deg); }\n 65% { transform: rotate(-100deg); }\n 78% { transform: rotate(-80deg); }\n 88% { transform: rotate(-95deg); }\n 95% { transform: rotate(-86deg); }\n 100% { transform: rotate(-90deg); }\n",hangOnTopSwing:"\n 0% { transform-origin: top; transform: rotate(0deg); }\n 30% { transform: rotate(-110deg); }\n 50% { transform: rotate(-75deg); }\n 65% { transform: rotate(-100deg); }\n 78% { transform: rotate(-80deg); }\n 88% { transform: rotate(-95deg); }\n 95% { transform: rotate(-86deg); }\n 100% { transform: rotate(-90deg); }\n",hangOnBottomSwing:"\n 0% { transform-origin: bottom; transform: rotate(0deg); }\n 30% { transform: rotate(110deg); }\n 50% { transform: rotate(75deg); }\n 65% { transform: rotate(100deg); }\n 78% { transform: rotate(80deg); }\n 88% { transform: rotate(95deg); }\n 95% { transform: rotate(86deg); }\n 100% { transform: rotate(90deg); }\n",hangOnOscillate:"\n 0% { transform: rotate(0deg); }\n 25% { transform: rotate(15deg); }\n 50% { transform: rotate(-15deg); }\n 75% { transform: rotate(10deg); }\n 100% { transform: rotate(0deg); }\n",hangOnDrop:"\n 0% { transform-origin: top; transform: rotate(0deg); opacity: 1; }\n 20% { transform: rotate(30deg); opacity: 1; }\n 40% { transform: rotate(-30deg); opacity: 1; }\n 60% { transform: rotate(15deg); opacity: 1; }\n 80% { transform: rotate(-15deg); opacity: 1; }\n 100% { transform: rotate(90deg) translateY(200%); opacity: 0; }\n"},...{zoomIn:"\n from { transform: scale(2); opacity: 0; }\n to { transform: scale(1); opacity: 1; }\n",zoomOut:"\n from { transform: scale(1); opacity: 1; }\n to { transform: scale(2); opacity: 0; }\n",zoomInFromLeft:"\n from { transform: scale(2) translateX(-100%); opacity: 0; }\n to { transform: scale(1) translateX(0); opacity: 1; }\n",zoomInFromRight:"\n from { transform: scale(2) translateX(100%); opacity: 0; }\n to { transform: scale(1) translateX(0); opacity: 1; }\n",zoomInFromTop:"\n from { transform: scale(2) translateY(-100%); opacity: 0; }\n to { transform: scale(1) translateY(0); opacity: 1; }\n",zoomInFromBottom:"\n from { transform: scale(2) translateY(100%); opacity: 0; }\n to { transform: scale(1) translateY(0); opacity: 1; }\n",zoomOutToLeft:"\n from { transform: scale(1) translateX(0); opacity: 1; }\n to { transform: scale(2) translateX(-100%); opacity: 0; }\n",zoomOutToRight:"\n from { transform: scale(1) translateX(0); opacity: 1; }\n to { transform: scale(2) translateX(100%); opacity: 0; }\n",zoomOutToTop:"\n from { transform: scale(1) translateY(0); opacity: 1; }\n to { transform: scale(2) translateY(-100%); opacity: 0; }\n",zoomOutToBottom:"\n from { transform: scale(1) translateY(0); opacity: 1; }\n to { transform: scale(2) translateY(100%); opacity: 0; }\n",zoomInRotate:"\n from { transform: scale(0) rotate(-180deg); opacity: 0; }\n to { transform: scale(1) rotate(0deg); opacity: 1; }\n",zoomOutRotate:"\n from { transform: scale(1) rotate(0deg); opacity: 1; }\n to { transform: scale(0) rotate(180deg); opacity: 0; }\n",zoomInFlipX:"\n from { transform: perspective(400px) scale(0.5) rotateX(90deg); opacity: 0; }\n to { transform: perspective(400px) scale(1) rotateX(0deg); opacity: 1; }\n",zoomOutFlipX:"\n from { transform: perspective(400px) scale(1) rotateX(0deg); opacity: 1; }\n to { transform: perspective(400px) scale(0.5) rotateX(90deg); opacity: 0; }\n",zoomInFlipY:"\n from { transform: perspective(400px) scale(0.5) rotateY(90deg); opacity: 0; }\n to { transform: perspective(400px) scale(1) rotateY(0deg); opacity: 1; }\n",zoomOutFlipY:"\n from { transform: perspective(400px) scale(1) rotateY(0deg); opacity: 1; }\n to { transform: perspective(400px) scale(0.5) rotateY(90deg); opacity: 0; }\n",zoomPulse:"\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n",zoomSwing:"\n 0% { transform: scale(0.3); opacity: 0; }\n 50% { transform: scale(1.2); opacity: 1; }\n 70% { transform: scale(0.9); }\n 100% { transform: scale(1); }\n"},...{rotateCW:"\n from {\n transform: rotateZ(0deg);\n transform-origin: center center;\n }\n to {\n transform: rotateZ(360deg);\n transform-origin: center center;\n }\n",rotateACW:"\n from {\n transform: rotateZ(0deg);\n transform-origin: center center;\n }\n to {\n transform: rotateZ(-360deg);\n transform-origin: center center;\n }\n",rotateSlowDown:"\n 0% { transform: rotateZ(0deg); transform-origin: center center; }\n 5% { transform: rotateZ(1turn); transform-origin: center center; }\n 10% { transform: rotateZ(2turn); transform-origin: center center; }\n 20% { transform: rotateZ(3turn); transform-origin: center center; }\n 40% { transform: rotateZ(4turn); transform-origin: center center; }\n 65%, 100% { transform: rotateZ(5turn); transform-origin: center center; }\n",rotateX:"\n from { transform: rotateX(0deg); transform-origin: center center; }\n to { transform: rotateX(360deg); transform-origin: center center; }\n",rotateY:"\n from { transform: rotateY(0deg); transform-origin: center center; }\n to { transform: rotateY(360deg); transform-origin: center center; }\n",rotateFromLeft:"\n from { transform: rotateY(-90deg); transform-origin: left center; }\n to { transform: rotateY(0deg); transform-origin: left center; }\n",rotateFromRight:"\n from { transform: rotateY(90deg); transform-origin: right center; }\n to { transform: rotateY(0deg); transform-origin: right center; }\n",rotateToLeft:"\n from { transform: rotateY(0deg); transform-origin: center center; }\n to { transform: rotateY(-90deg); transform-origin: center center; }\n",rotateToRight:"\n from { transform: rotateY(0deg); transform-origin: center center; }\n to { transform: rotateY(90deg); transform-origin: center center; }\n",rotateFromTop:"\n from { transform: rotateX(-90deg); transform-origin: center top; }\n to { transform: rotateX(0deg); transform-origin: center top; }\n",rotateFromBottom:"\n from { transform: rotateX(90deg); transform-origin: center bottom; }\n to { transform: rotateX(0deg); transform-origin: center bottom; }\n",rotateToTop:"\n from { transform: rotateX(0deg); transform-origin: center top; }\n to { transform: rotateX(-90deg); transform-origin: center top; }\n",rotateToBottom:"\n from { transform: rotateX(0deg); transform-origin: center bottom; }\n to { transform: rotateX(90deg); transform-origin: center bottom; }\n"},...{heartBeat:"\n 0%, 28%, 70%, 100% { transform: scale(1); }\n 14%, 42% { transform: scale(1.3); }\n",tada:"\n from { transform: scale3d(1, 1, 1); }\n 10%, 20% { transform: scale3d(.9, .9, .9) rotate(-3deg); }\n 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); }\n 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); }\n to { transform: scale3d(1, 1, 1); }\n",hinge:"\n 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }\n 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }\n 40%, 80% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }\n 100% { transform: translateY(700px); opacity: 0; }\n",lightSpeedInLeft:"\n from { transform: translateX(-100%) skewX(30deg); opacity: 0; }\n 60% { transform: skewX(-20deg); opacity: 1; }\n 80% { transform: skewX(5deg); }\n to { transform: none; }\n",lightSpeedOutRight:"\n from { opacity: 1; }\n to { transform: translateX(100%) skewX(-30deg); opacity: 0; }\n"},...{popIn:"\n from { opacity: 0; transform: scale3d(0.5,0.5,0.5); }\n to { opacity: 1; transform: scale3d(1,1,1); }\n",popOut:"\n from { opacity: 1; transform: scale3d(1,1,1); }\n to { opacity: 0; transform: scale3d(0.5,0.5,0.5); }\n",popBounceIn:"\n 0% { opacity: 0; transform: scale3d(0.3,0.3,0.3); }\n 50% { opacity: 1; transform: scale3d(1.05,1.05,1.05); }\n 70% { transform: scale3d(0.9,0.9,0.9); }\n 100% { transform: scale3d(1,1,1); }\n",popBounceOut:"\n 20% { transform: scale3d(0.9,0.9,0.9); }\n 50%,55% { opacity:1; transform: scale3d(1.1,1.1,1.1); }\n to { opacity:0; transform: scale3d(0.3,0.3,0.3); }\n",popUpIn:"\n from { opacity:0; transform: translateY(50%) scale3d(0.5,0.5,0.5); }\n to { opacity:1; transform: translateY(0) scale3d(1,1,1); }\n",popUpOut:"\n from { opacity:1; transform: translateY(0) scale3d(1,1,1); }\n to { opacity:0; transform: translateY(-50%) scale3d(0.5,0.5,0.5); }\n",popRotateIn:"\n from { opacity:0; transform: scale3d(0.5,0.5,0.5) rotate(-45deg); }\n to { opacity:1; transform: scale3d(1,1,1) rotate(0deg); }\n",popRotateOut:"\n from { opacity:1; transform: scale3d(1,1,1) rotate(0deg); }\n to { opacity:0; transform: scale3d(0.5,0.5,0.5) rotate(45deg); }\n",popBlurIn:"\n from { opacity:0; transform: scale3d(0.5,0.5,0.5); filter: blur(5px); }\n to { opacity:1; transform: scale3d(1,1,1); filter: blur(0); }\n",popBlurOut:"\n from { opacity:1; transform: scale3d(1,1,1); filter: blur(0); }\n to { opacity:0; transform: scale3d(0.5,0.5,0.5); filter: blur(5px); }\n",popLeftIn:"\n from { opacity: 0; transform: translateX(-50%) scale3d(0.5,0.5,0.5); }\n to { opacity: 1; transform: translateX(0) scale3d(1,1,1); }\n",popLeftOut:"\n from { opacity:1; transform: translateX(0) scale3d(1,1,1); }\n to { opacity:0; transform: translateX(-50%) scale3d(0.5,0.5,0.5); }\n",popRightIn:"\n from { opacity: 0; transform: translateX(50%) scale3d(0.5,0.5,0.5); }\n to { opacity: 1; transform: translateX(0) scale3d(1,1,1); }\n",popRightOut:"\n from { opacity:1; transform: translateX(0) scale3d(1,1,1); }\n to { opacity:0; transform: translateX(50%) scale3d(0.5,0.5,0.5); }\n"},...s},g=Object.keys(u),y=Object.fromEntries([{name:"🎾 Bounce",key:"bounce",prefix:"bounce"},{name:"✨ Text / Glow Effects",key:"text",prefix:"effect"},{name:"🌫 Blur",key:"blur",prefix:"blur"},{name:"⚡ Flash",key:"flash",prefix:"flash"},{name:"🎈 Float",key:"float",prefix:"float"},{name:"💡 Glow",key:"glow",prefix:"glow"},{name:"🍮 Jelly",key:"jelly",prefix:"jelly"},{name:"🌑 Shadow / Spin / Swing / Orbit",key:"motion",prefix:""},{name:"💓 Pulse",key:"pulse",prefix:"pulse"},{name:"🌫 Fade",key:"fade",prefix:"fade"},{name:"🤯 Squeeze / Shake",key:"shake",prefix:"shake"},{name:"📥 Slide",key:"slide",prefix:"slide"},{name:"🔄 Flip",key:"flip",prefix:"flip"},{name:"📂 Fold / Unfold",key:"fold",prefix:"fold"},{name:"🪝 Hang On",key:"hangOn",prefix:"hangOn"},{name:"🔍 Zoom",key:"zoom",prefix:"zoom"},{name:"🌀 Rotate",key:"rotate",prefix:"rotate"},{name:"🎉 Fun / Attention",key:"fun",prefix:""}].map((({key:t,prefix:r})=>[t,g.filter((t=>!r||t.startsWith(r)))]))),x=new Set;function h(t){const r=function(t){return t?"object"==typeof t&&"current"in t?t.current:t:null}(t);let n=null;function a(){r&&(r.style.animation="",r.style.removeProperty("animation-name"),r.style.removeProperty("animation-duration"),r.style.removeProperty("animation-timing-function"),r.style.removeProperty("animation-iteration-count"),r.style.removeProperty("animation-fill-mode"))}return{run:function(t,e={}){if(!r)return;n&&(n(),n=null);const s=u[t];s&&function(t,r){if(x.has(t))return;x.add(t);const n=document.createElement("style");n.setAttribute("data-az-keyframe",t),n.innerHTML=`\n@keyframes ${t} {\n${r}\n}\n `.trim(),document.head.appendChild(n)}(`az-${t}`,s);const f=e.duration??o[t]??"1s";if(r.style.animation="none",r.offsetHeight,r.style.animationName=`az-${t}`,r.style.animationDuration="number"==typeof f?`${f}ms`:f,r.style.animationTimingFunction=e.timing??"ease",r.style.animationIterationCount=String(e.iteration??1),r.style.animationFillMode="both",!e.keep){const t=e=>{e.target===r&&(a(),r.removeEventListener("animationend",t),n=null)};r.addEventListener("animationend",t),n=()=>{r.removeEventListener("animationend",t),a()}}},stop:function(){n&&n(),n=null,a()}}}const Y={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out"},b=["type","duration","timing","delay","iteration","direction","fillMode","tagName"],X=e.default("div").withConfig({shouldForwardProp:t=>!b.includes(t)})`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),r=require("react"),n=require("styled-components");function a(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var e=a(n);const o={bounce:"1s",bounceIn:"1s",bounceOut:"1s",bounceElastic:"1.2s",bounceSmall:"0.8s",bounceRotate:"1s",bounceJelly:"1.2s",jelly:"1s",jellyX:"1s",jellyY:"1s",jellyIn:"1s",jellyOut:"1s",shakeMix:"0.8s",shakeHorizontal:"0.8s",shakeVertical:"0.8s",shakeDiagonal:"0.8s",shakeQuick:"0.5s",pulse:"1s",pulseInOut:"1.2s",pulseFade:"1.2s",pulseFast:"0.6s",pulseColor:"1.2s",heartBeat:"1.3s",float:"2s",floatSway:"2.5s",floatHorizontal:"2.5s",floatCircular:"3s",floatWiggle:"2s",orbit:"3s",orbitEllipse:"3s",flash:"0.8s",flashIrregular:"1.2s",flashFast:"0.5s",flashSlow:"1.5s",flashPulse:"1s",glow:"1.5s",glowTextFlicker:"2s",glowRainbow:"3s",glowBreathing:"2.5s",glowGlitch:"1.2s",blurIn:"0.8s",blurOut:"0.8s",fadeIn:"0.8s",fadeOut:"0.8s",slideInFromLeft:"0.8s",slideInFromRight:"0.8s",slideOutToLeft:"0.8s",slideOutToRight:"0.8s",zoomIn:"1s",zoomOut:"1s",spin:"2s",spin3D:"2.5s",flip:"1s",flipIn:"1s",flipOut:"1s",typing:"2s",typingLoop:"2.5s",typeWriter:"3s",typeDelete:"1.5s",swing:"1s",tada:"1s",hinge:"2s"},s={rubberBand:"\n from { transform: scale3d(1,1,1); }\n 30% { transform: scale3d(1.25,.75,1); }\n 40% { transform: scale3d(.75,1.25,1); }\n 50% { transform: scale3d(1.15,.85,1); }\n 65% { transform: scale3d(.95,1.05,1); }\n 75% { transform: scale3d(1.05,.95,1); }\n to { transform: scale3d(1,1,1); }\n",jello:"\n from, 11.1%, to { transform: none; }\n 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg) scale3d(1,1,1); }\n 33.3% { transform: skewX(6.25deg) skewY(6.25deg) scale3d(1,1,1); }\n 44.4% { transform: skewX(-3.125deg) skewY(-3.125deg) scale3d(1,1,1); }\n 55.5% { transform: skewX(1.5625deg) skewY(1.5625deg) scale3d(1,1,1); }\n 66.6% { transform: skewX(-.78125deg) skewY(-.78125deg) scale3d(1,1,1); }\n 77.7% { transform: skewX(.390625deg) skewY(.390625deg) scale3d(1,1,1); }\n 88.8% { transform: skewX(-.1953125deg) skewY(-.1953125deg) scale3d(1,1,1); }\n",wobble:"\n from { transform: translate3d(0,0,0) scale3d(1,1,1); }\n 15% { transform: translate3d(-25%,0,0) rotate(-5deg) scale3d(1,1,1); }\n 30% { transform: translate3d(20%,0,0) rotate(3deg) scale3d(1,1,1); }\n 45% { transform: translate3d(-15%,0,0) rotate(-3deg) scale3d(1,1,1); }\n 60% { transform: translate3d(10%,0,0) rotate(2deg) scale3d(1,1,1); }\n 75% { transform: translate3d(-5%,0,0) rotate(-1deg) scale3d(1,1,1); }\n to { transform: translate3d(0,0,0) scale3d(1,1,1); }\n",rollIn:"\n from { opacity: 0; transform: translate3d(-100%,0,0) rotate(-120deg) scale3d(1,1,1); }\n to { opacity: 1; transform: translate3d(0,0,0) rotate(0deg) scale3d(1,1,1); }\n",jackInTheBox:"\n from { opacity: 0; transform: scale3d(.1,.1,.1) rotate(30deg); transform-origin: center bottom; }\n 50% { transform: rotate(-10deg) scale3d(.5,.5,.5); }\n 70% { transform: rotate(3deg) scale3d(.8,.8,.8); }\n to { opacity: 1; transform: scale3d(1,1,1); }\n"},f={blurIn:"\n from { filter: blur(5px); opacity: 0; }\n to { filter: blur(0); opacity: 1; }\n",blurInZoom:"\n from { opacity: 0; transform: scale(0.9); filter: blur(6px); }\n to { opacity: 1; transform: scale(1); filter: blur(0); }\n",blurInScale:"\n from { opacity: 0; transform: scale(1.1); filter: blur(6px); }\n to { opacity: 1; transform: scale(1); filter: blur(0); }\n",blurInUp:"\n from { opacity: 0; transform: translateY(40px); filter: blur(6px); }\n to { opacity: 1; transform: translateY(0); filter: blur(0); }\n",blurInRotate:"\n from { opacity: 0; transform: rotate(-10deg) scale(0.95); filter: blur(6px); }\n to { opacity: 1; transform: rotate(0deg) scale(1); filter: blur(0); }\n",blurOut:"\n from { filter: blur(0); opacity: 1; }\n to { filter: blur(6px); opacity: 0; }\n",blurOutZoom:"\n from { opacity: 1; transform: scale(1); filter: blur(0); }\n to { opacity: 0; transform: scale(0.9); filter: blur(6px); }\n",blurOutScale:"\n from { opacity: 1; transform: scale(1); filter: blur(0); }\n to { opacity: 0; transform: scale(1.1); filter: blur(6px); }\n",blurOutDown:"\n from { opacity: 1; transform: translateY(0); filter: blur(0); }\n to { opacity: 0; transform: translateY(40px); filter: blur(6px); }\n",blurOutRotate:"\n from { opacity: 1; transform: rotate(0deg) scale(1); filter: blur(0); }\n to { opacity: 0; transform: rotate(10deg) scale(0.95); filter: blur(6px); }\n"},i={bounce:"\n 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }\n 40% { transform: translateY(-30px); }\n 60% { transform: translateY(-15px); }\n",bounceIn:"\n 0% { opacity: 0; transform: scale(.3); }\n 50% { opacity: 1; transform: scale(1.05); }\n 70% { transform: scale(.9); }\n 100% { transform: scale(1); }\n",bounceOut:"\n 20% { transform: scale(.9); }\n 50%, 55% { opacity: 1; transform: scale(1.1); }\n to { opacity: 0; transform: scale(.3); }\n",bounceElastic:"\n 10% { transform: scaleY(0.9) translateY(5%); }\n 45% { transform: scaleY(1.2) translateY(-100%); }\n 65% { transform: scaleY(0.95) translateY(0); }\n 75% { transform: scaleY(1.05) translateY(-25%); }\n 85%, 100% { transform: scaleY(1) translateY(0); }\n",bounceSmall:"\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-6px); }\n",bounceRotate:"\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 40% { transform: translateY(-20px) rotate(-5deg); }\n 60% { transform: translateY(-10px) rotate(5deg); }\n",bounceJelly:"\n 0%, 100% { transform: scale(1, 1); }\n 30% { transform: scale(1.25, 0.75); }\n 40% { transform: scale(0.75, 1.25); }\n 50% { transform: scale(1.15, 0.85); }\n 65% { transform: scale(0.95, 1.05); }\n 75% { transform: scale(1.05, 0.95); }\n",bounceSide:"\n 0%, 100% { transform: translateX(0); }\n 30% { transform: translateX(-20px); }\n 60% { transform: translateX(15px); }\n",bounceDiagonal:"\n 0%, 100% { transform: translate(0,0); }\n 30% { transform: translate(-15px,-20px); }\n 60% { transform: translate(12px,15px); }\n",bounceFlip:"\n 0% { transform: translateY(0) rotateY(0deg); }\n 40% { transform: translateY(-25px) rotateY(180deg); }\n 70% { transform: translateY(-10px) rotateY(360deg); }\n 100% { transform: translateY(0) rotateY(360deg); }\n",bounceFade:"\n 0% { opacity: 0; transform: translateY(0); }\n 40% { opacity: 1; transform: translateY(-20px); }\n 70% { transform: translateY(-10px); }\n 100% { opacity: 0; transform: translateY(0); }\n",bounceCrazy:"\n 0% { transform: translateY(0); }\n 20% { transform: translateY(-25px) rotate(-5deg); }\n 40% { transform: translateY(15px) rotate(5deg); }\n 60% { transform: translateY(-20px) rotate(-8deg); }\n 80% { transform: translateY(10px) rotate(6deg); }\n 100% { transform: translateY(0) rotate(0); }\n",bounceGlow:"\n 0%, 100% { transform: translateY(0); box-shadow: 0 0 0px rgba(255, 255, 0, 0); }\n 40% { transform: translateY(-20px); box-shadow: 0 0 20px rgba(255, 255, 0, 0.8); }\n 60% { transform: translateY(-10px); box-shadow: 0 0 10px rgba(255, 255, 0, 0.6); }\n",bounceFadeScale:"\n 0% { opacity: 0; transform: scale(0.5) translateY(0); }\n 40% { opacity: 1; transform: scale(1.2) translateY(-25px); }\n 70% { opacity: 0.8; transform: scale(0.9) translateY(-10px); }\n 100% { opacity: 0; transform: scale(0.5) translateY(0); }\n",bounceSparkle:"\n 0% { transform: translateY(0) scale(1); filter: brightness(1); }\n 30% { transform: translateY(-20px) scale(1.2); filter: brightness(1.6); }\n 60% { transform: translateY(-10px) scale(0.9); filter: brightness(1.2); }\n 100% { transform: translateY(0) scale(1); filter: brightness(1); }\n",bounceRainbow:"\n 0% { transform: translateY(0); color: red; }\n 25% { transform: translateY(-20px); color: orange; }\n 50% { transform: translateY(-10px); color: yellow; }\n 75% { transform: translateY(-15px); color: green; }\n 100% { transform: translateY(0); color: blue; }\n"},l="\n from { opacity: 0; transform: translateX(-100%); }\n to { opacity: 1; transform: translateX(0); }\n",m="\n from { opacity: 0; transform: translateX(100%); }\n to { opacity: 1; transform: translateX(0); }\n",c="\n from { opacity: 0; transform: translateY(-100%); }\n to { opacity: 1; transform: translateY(0); }\n",p="\n from { opacity: 0; transform: translateY(100%); }\n to { opacity: 1; transform: translateY(0); }\n",d={fadeIn:"\n from { opacity: 0; }\n to { opacity: 1; }\n",fadeOut:"\n from { opacity: 1; }\n to { opacity: 0; }\n",fadeInFromLeft:l,fadeInFromRight:m,fadeInFromTop:c,fadeInFromBottom:p,fadeOutToLeft:"\n from { opacity: 1; transform: translateX(0); }\n to { opacity: 0; transform: translateX(-100%); }\n",fadeOutToRight:"\n from { opacity: 1; transform: translateX(0); }\n to { opacity: 0; transform: translateX(100%); }\n",fadeOutToTop:"\n from { opacity: 1; transform: translateY(0); }\n to { opacity: 0; transform: translateY(-100%); }\n",fadeOutToBottom:"\n from { opacity: 1; transform: translateY(0); }\n to { opacity: 0; transform: translateY(100%); }\n",fadeInUp:p,fadeInDown:c,fadeInLeft:m,fadeInRight:l,fadeInZoom:"\n from { opacity: 0; transform: scale(0.5); }\n to { opacity: 1; transform: scale(1); }\n",fadeOutZoom:"\n from { opacity: 1; transform: scale(1); }\n to { opacity: 0; transform: scale(0.5); }\n",fadeInRotate:"\n from { opacity: 0; transform: rotate(-45deg); }\n to { opacity: 1; transform: rotate(0); }\n",fadeOutRotate:"\n from { opacity: 1; transform: rotate(0); }\n to { opacity: 0; transform: rotate(45deg); }\n",fadeInSkew:"\n from { opacity: 0; transform: skewX(-30deg); }\n to { opacity: 1; transform: skewX(0); }\n",fadeOutSkew:"\n from { opacity: 1; transform: skewX(0); }\n to { opacity: 0; transform: skewX(30deg); }\n",fadeInFlipX:"\n from { opacity: 0; transform: rotateX(90deg); }\n to { opacity: 1; transform: rotateX(0); }\n",fadeOutFlipX:"\n from { opacity: 1; transform: rotateX(0); }\n to { opacity: 0; transform: rotateX(-90deg); }\n",fadeInFlipY:"\n from { opacity: 0; transform: rotateY(90deg); }\n to { opacity: 1; transform: rotateY(0); }\n",fadeOutFlipY:"\n from { opacity: 1; transform: rotateY(0); }\n to { opacity: 0; transform: rotateY(-90deg); }\n",fadeInPerspective:"\n from { opacity: 0; transform: perspective(400px) translateZ(-200px); }\n to { opacity: 1; transform: perspective(400px) translateZ(0); }\n",fadeOutPerspective:"\n from { opacity: 1; transform: perspective(400px) translateZ(0); }\n to { opacity: 0; transform: perspective(400px) translateZ(-200px); }\n",fadeInBlur:"\n from { opacity: 0; filter: blur(10px); }\n to { opacity: 1; filter: blur(0); }\n",fadeOutBlur:"\n from { opacity: 1; filter: blur(0); }\n to { opacity: 0; filter: blur(10px); }\n",fadeInColor:"\n from { opacity: 0; filter: hue-rotate(180deg); }\n to { opacity: 1; filter: hue-rotate(0); }\n",fadeOutColor:"\n from { opacity: 1; filter: hue-rotate(0); }\n to { opacity: 0; filter: hue-rotate(180deg); }\n",fadePulse:"\n 0%, 100% { opacity: 0.4; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.05); }\n",fadeBounce:"\n 0% { opacity: 0; transform: translateY(20px); }\n 50% { opacity: 1; transform: translateY(-10px); }\n 70% { transform: translateY(5px); }\n 100% { transform: translateY(0); }\n",fadeSwing:"\n 0% { opacity: 0; transform: rotate(15deg); }\n 50% { opacity: 1; transform: rotate(-15deg); }\n 100% { opacity: 1; transform: rotate(0deg); }\n",fadeZoomRotate:"\n from { opacity: 0; transform: scale(0.5) rotate(-180deg); }\n to { opacity: 1; transform: scale(1) rotate(0); }\n",fadeElastic:"\n 0% { opacity: 0; transform: scale(0.5); }\n 60% { opacity: 1; transform: scale(1.2); }\n 80% { transform: scale(0.9); }\n 100% { transform: scale(1); }\n",fadeShine:"\n 0% { opacity: 0; background-position: -200%; }\n 100% { opacity: 1; background-position: 200%; }\n"},u={...i,...{effect3D:"\n to {\n text-shadow:\n 0 1px 0 #ccc,\n 0 2px 0 #c9c9c9,\n 0 3px 0 #bbb,\n 0 4px 0 #b9b9b9,\n 0 5px 0 #aaa,\n 0 6px 1px rgba(0, 0, 0, .1),\n 0 0 5px rgba(0, 0, 0, .1),\n 0 1px 3px rgba(0, 0, 0, .3),\n 0 3px 5px rgba(0, 0, 0, .2),\n 0 5px 10px rgba(0, 0, 0, .25);\n }\n",neonGlow:"\n from { text-shadow: none; }\n to {\n text-shadow:\n 0 0 5px #0ff,\n 0 0 10px #0ff,\n 0 0 20px #0ff,\n 0 0 40px #0ff,\n 0 0 80px #0ff;\n color: #fff;\n }\n",retro3D:"\n to {\n text-shadow:\n 2px 2px 0 #ff0040,\n 4px 4px 0 #00ffd5,\n 6px 6px 0 #000;\n }\n",emboss:"\n to {\n text-shadow:\n -1px -1px 1px #fff,\n 1px 1px 2px rgba(0,0,0,0.6);\n color: #555;\n }\n",fireGlow:"\n 0%, 100% {\n text-shadow:\n 0 0 5px #ff6600,\n 0 0 10px #ff3300,\n 0 0 20px #ff0000;\n }\n 50% {\n text-shadow:\n 0 0 10px #ff9933,\n 0 0 20px #ff6600,\n 0 0 30px #ff3300;\n }\n",iceGlow:"\n to {\n text-shadow:\n 0 0 5px #66ccff,\n 0 0 10px #33ccff,\n 0 0 20px #00aaff,\n 0 0 40px #0099ff;\n color: #e6f9ff;\n }\n",shine:"\n 0% { background-position: -200%; }\n 100% { background-position: 200%; }\n"},...f,...{flash:"\n 0%, 50%, 100% { opacity: 1; }\n 25%, 75% { opacity: 0; }\n",flashIrregular:"\n 0%, 40%, 80% { opacity: 1; }\n 20%, 60%, 100% { opacity: 0; }\n",flashFast:"\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0; }\n",flashSlow:"\n 0% { opacity: 1; }\n 45% { opacity: 0; }\n 55% { opacity: 0; }\n 100% { opacity: 1; }\n",flashPulse:"\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.3; }\n",flashGlow:"\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.4; transform: scale(1.05); }\n",flashColor:"\n 0%, 100% { opacity: 1; filter: hue-rotate(0deg); }\n 50% { opacity: 0.2; filter: hue-rotate(180deg); }\n",flashStrobe:"\n 0%, 20%, 40%, 60%, 80%, 100% { opacity: 1; }\n 10%, 30%, 50%, 70%, 90% { opacity: 0; }\n",flashSoft:"\n 0% { opacity: 1; }\n 50% { opacity: 0.6; }\n 100% { opacity: 1; }\n",flashReversePulse:"\n 0%, 100% { opacity: 0.3; }\n 50% { opacity: 1; }\n"},...{float:"\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n",floatSway:"\n 0% { transform: translate(2%, -10%) rotate(-1deg); }\n 100% { transform: translate(-2%, 5%) rotate(3deg); }\n",floatHorizontal:"\n 0%, 100% { transform: translateX(0); }\n 50% { transform: translateX(12px); }\n",floatCircular:"\n 0% { transform: translate(0, 0); }\n 25% { transform: translate(8px, -8px); }\n 50% { transform: translate(0, -12px); }\n 75% { transform: translate(-8px, -8px); }\n 100% { transform: translate(0, 0); }\n",floatWiggle:"\n 0%, 100% { transform: rotate(0deg); }\n 25% { transform: rotate(2deg); }\n 50% { transform: rotate(-2deg); }\n 75% { transform: rotate(1deg); }\n",floatPulse:"\n 0%, 100% { transform: translateY(0) scale(1); }\n 50% { transform: translateY(-8px) scale(1.05); }\n",floatDiagonal:"\n 0%, 100% { transform: translate(0, 0); }\n 50% { transform: translate(10px, -10px); }\n",floatSwing:"\n 0%, 100% { transform: rotate(0deg) translateY(0); }\n 25% { transform: rotate(3deg) translateY(-5px); }\n 50% { transform: rotate(-3deg) translateY(-10px); }\n 75% { transform: rotate(2deg) translateY(-5px); }\n",floatWave:"\n 0% { transform: translate(0, 0); }\n 25% { transform: translate(8px, -6px); }\n 50% { transform: translate(0, -12px); }\n 75% { transform: translate(-8px, -6px); }\n 100% { transform: translate(0, 0); }\n",floatDrift:"\n 0% { transform: translate(0, 0) rotate(0deg); }\n 25% { transform: translate(6px, -4px) rotate(1deg); }\n 50% { transform: translate(-4px, -8px) rotate(-1deg); }\n 75% { transform: translate(-6px, 6px) rotate(2deg); }\n 100% { transform: translate(0, 0) rotate(0deg); }\n"},...{glow:"\n 0% { box-shadow: 0 0 5px #ff00de; }\n 50% { box-shadow: 0 0 20px #ff00de; }\n 100% { box-shadow: 0 0 5px #ff00de; }\n",glowTextFlicker:"\n 0% { color: inherit; text-shadow: none; }\n 2%, 59%, 64%, 79% { color: #fff; }\n 3%, 59%, 63%, 78% {\n text-shadow:\n 0px 0px 60px,\n 0 0 22px,\n 0 0 1em inherit,\n 0 0 0.5em inherit,\n 0 0 .1em inherit,\n 0 10px 3px #000;\n }\n 60%, 75% { color: inherit; text-shadow: none; }\n",glowRainbow:"\n 0% { filter: hue-rotate(0deg); }\n 100% { filter: hue-rotate(360deg); }\n",glowBreathing:"\n 0%, 100% { text-shadow: 0 0 5px #00f, 0 0 10px #00f; }\n 50% { text-shadow: 0 0 20px #00f, 0 0 40px #00f; }\n",glowGlitch:"\n 0%, 100% { text-shadow: 0 0 5px #0ff, 0 0 10px #0ff; }\n 10% { text-shadow: none; }\n 20% { text-shadow: 0 0 15px #f0f, 0 0 30px #f0f; }\n 30% { text-shadow: none; }\n 40% { text-shadow: 0 0 25px #ff0, 0 0 50px #ff0; }\n 60% { text-shadow: none; }\n 80% { text-shadow: 0 0 15px #0ff, 0 0 35px #0ff; }\n"},...{jelly:"\n 0%, 100% { transform: scale(1, 1); }\n 25% { transform: scale(0.9, 1.1); }\n 50% { transform: scale(1.1, 0.9); }\n 75% { transform: scale(0.95, 1.05); }\n",jellyX:"\n 0% { transform: scaleX(1); }\n 20% { transform: scaleX(0.9); }\n 50% { transform: scaleX(1.25); }\n 85% { transform: scaleX(0.8); }\n 100% { transform: scaleX(1); }\n",jellyY:"\n 0% { transform: scaleY(1); }\n 20% { transform: scaleY(0.9); }\n 50% { transform: scaleY(1.25); }\n 85% { transform: scaleY(0.8); }\n 100% { transform: scaleY(1); }\n",jellyIn:"\n 0% { transform: scale(0.5); opacity: 0; }\n 50% { transform: scale(1.2); opacity: 1; }\n 70% { transform: scale(0.9); }\n 100% { transform: scale(1); }\n",jellyOut:"\n 0% { transform: scale(1); opacity: 1; }\n 20% { transform: scale(1.1); }\n 50% { transform: scale(0.5); opacity: 0.5; }\n 100% { transform: scale(0); opacity: 0; }\n"},...{shadow:"\n 0%, 100% { box-shadow: none; }\n 50% { box-shadow: 0 10px 20px rgba(0,0,0,0.2); }\n",shadowText:"\n 0% { text-shadow: 1px 1px 0px #333; }\n 50% { text-shadow: 3px 3px 2px #333; }\n 100% { text-shadow: 9px 10px 6px #999; }\n",shadowPulse:"\n 0%, 100% { box-shadow: 0 0 5px rgba(0,0,0,0.2); }\n 50% { box-shadow: 0 0 25px rgba(0,0,0,0.4); }\n",shadowNeon:"\n 0%, 100% { text-shadow: 0 0 5px #0ff, 0 0 10px #0ff; }\n 50% { text-shadow: 0 0 20px #0ff, 0 0 40px #0ff; }\n",spin:"\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n",spin3D:"\n from { transform: rotateY(0deg); }\n to { transform: rotateY(-360deg); }\n",spinX:"\n from { transform: rotateX(0deg); }\n to { transform: rotateX(360deg); }\n",spinBounce:"\n 0% { transform: rotateZ(0deg) scale(1); }\n 50% { transform: rotateZ(180deg) scale(1.2); }\n 100% { transform: rotateZ(360deg) scale(1); }\n",swing:"\n 20% { transform: rotate(15deg); }\n 40% { transform: rotate(-10deg); }\n 60% { transform: rotate(5deg); }\n 80% { transform: rotate(-5deg); }\n 100% { transform: rotate(0deg); }\n",swingPivot:"\n 0% { transform: rotateZ(0deg); transform-origin: center top; }\n 20% { transform: rotateZ(15deg); transform-origin: center top; }\n 40% { transform: rotateZ(-15deg); transform-origin: center top; }\n 60% { transform: rotateZ(7deg); transform-origin: center top; }\n 80% { transform: rotateZ(-7deg); transform-origin: center top; }\n 100% { transform: rotateZ(0deg); transform-origin: center top; }\n",swingX:"\n 15% { transform: translateX(-25%) rotate(-5deg); }\n 30% { transform: translateX(20%) rotate(3deg); }\n 45% { transform: translateX(-15%) rotate(-3deg); }\n 60% { transform: translateX(10%) rotate(2deg); }\n 75% { transform: translateX(-5%) rotate(-1deg); }\n 100% { transform: translateX(0); }\n",swingY:"\n 15% { transform: translateY(-25%) rotate(-3deg); }\n 30% { transform: translateY(20%) rotate(2deg); }\n 45% { transform: translateY(-15%) rotate(-2deg); }\n 60% { transform: translateY(10%) rotate(1deg); }\n 75% { transform: translateY(-5%) rotate(-1deg); }\n 100% { transform: translateY(0); }\n",orbit:"\n from { transform: rotate(0deg) translateX(20px) rotate(0deg); }\n to { transform: rotate(360deg) translateX(20px) rotate(-360deg); }\n",orbitEllipse:"\n from { transform: rotate(0deg) translateX(30px) translateY(10px) rotate(0deg); }\n to { transform: rotate(360deg) translateX(30px) translateY(10px) rotate(-360deg); }\n"},...{pulse:"\n from { transform: scale(1); }\n to { transform: scale(1.1); }\n",pulseInOut:"\n 0% { transform: scale(1); }\n 50% { transform: scale(1.15); }\n 100% { transform: scale(1); }\n",pulseFade:"\n 0%, 100% { transform: scale(1); opacity: 1; }\n 50% { transform: scale(1.2); opacity: 0.6; }\n",pulseFast:"\n 0%, 100% { transform: scale(1); }\n 25% { transform: scale(1.2); }\n 75% { transform: scale(0.9); }\n",pulseColor:"\n 0%, 100% { transform: scale(1); background-color: #ff69b4; }\n 50% { transform: scale(1.2); background-color: #ff1493; }\n"},...d,...{squeezeMix:"\n 0% { transform: scale3d(1, 1, 1); }\n 15% { transform: scale3d(0.95, 0.95, 1); }\n 30% { transform: scale3d(0.9, 0.9, 1); }\n 55% { transform: scale3d(0.75, 0.75, 1); }\n 70% { transform: scale3d(1.3, 1.3, 1); }\n 85% { transform: scale3d(0.95, 0.95, 1); }\n 100% { transform: scale3d(1, 1, 1); }\n",squeezeHorizontal:"\n 0% { transform: scaleX(1); }\n 15% { transform: scaleX(0.95); }\n 30% { transform: scaleX(0.9); }\n 55% { transform: scaleX(0.75); }\n 70% { transform: scaleX(1.3); }\n 85% { transform: scaleX(0.95); }\n 100% { transform: scaleX(1); }\n",squeezeVertical:"\n 0% { transform: scaleY(1); }\n 15% { transform: scaleY(0.95); }\n 30% { transform: scaleY(0.9); }\n 55% { transform: scaleY(0.75); }\n 70% { transform: scaleY(1.3); }\n 85% { transform: scaleY(0.95); }\n 100% { transform: scaleY(1); }\n",squeezeDiagonal:"\n 0% { transform: scale3d(1,1,1); }\n 25% { transform: scale3d(0.8,1.2,1); }\n 50% { transform: scale3d(1.1,0.9,1); }\n 75% { transform: scale3d(0.9,1.1,1); }\n 100% { transform: scale3d(1,1,1); }\n",squeezePulse:"\n 0%,100% { transform: scale3d(1,1,1); }\n 25% { transform: scale3d(0.9,0.9,1); }\n 50% { transform: scale3d(1.1,1.1,1); }\n 75% { transform: scale3d(0.95,0.95,1); }\n",squeezeBounce:"\n 0% { transform: scale3d(1,1,1); }\n 20% { transform: scale3d(0.7,0.7,1); }\n 50% { transform: scale3d(1.2,1.2,1); }\n 70% { transform: scale3d(0.9,0.9,1); }\n 100% { transform: scale3d(1,1,1); }\n",squeezeElastic:"\n 0% { transform: scale3d(1,1,1); }\n 25% { transform: scale3d(0.8,1.2,1); }\n 50% { transform: scale3d(1.2,0.8,1); }\n 75% { transform: scale3d(0.9,1.1,1); }\n 100% { transform: scale3d(1,1,1); }\n",squeezeFlash:"\n 0%,100% { transform: scale3d(1,1,1); opacity: 1; }\n 25% { transform: scale3d(0.8,0.8,1); opacity: 0.6; }\n 50% { transform: scale3d(1.2,1.2,1); opacity: 1; }\n 75% { transform: scale3d(0.9,0.9,1); opacity: 0.8; }\n",shakeMix:"\n 0% { transform: translate3d(2px, 1px, 0) rotate(0deg); }\n 10% { transform: translate3d(-1px, -2px, 0) rotate(-1deg); }\n 20% { transform: translate3d(-3px, 0px, 0) rotate(1deg); }\n 30% { transform: translate3d(0px, 2px, 0) rotate(0deg); }\n 40% { transform: translate3d(1px, -1px, 0) rotate(1deg); }\n 50% { transform: translate3d(-1px, 2px, 0) rotate(-1deg); }\n 60% { transform: translate3d(-3px, 1px, 0) rotate(0deg); }\n 70% { transform: translate3d(2px, 1px, 0) rotate(-1deg); }\n 80% { transform: translate3d(-1px, -1px, 0) rotate(1deg); }\n 90% { transform: translate3d(2px, 2px, 0) rotate(0deg); }\n 100% { transform: translate3d(1px, -2px, 0) rotate(-1deg); }\n",shakeHorizontal:"\n 0%, 100% { transform: translateX(0); }\n 10%, 30%, 50%, 70%, 90% { transform: translateX(6px); }\n 20%, 40%, 60%, 80% { transform: translateX(-4px); }\n",shakeVertical:"\n 0%, 100% { transform: translateY(0); }\n 10%, 30%, 50%, 70%, 90% { transform: translateY(6px); }\n 20%, 40%, 60%, 80% { transform: translateY(-4px); }\n",shakeDiagonal:"\n 0%,100% { transform: translate3d(0,0,0); }\n 20% { transform: translate3d(5px,5px,0); }\n 40% { transform: translate3d(-5px,-5px,0); }\n 60% { transform: translate3d(5px,-5px,0); }\n 80% { transform: translate3d(-5px,5px,0); }\n",shakeQuick:"\n 0%,100% { transform: translate3d(0,0,0); }\n 10%,30%,50%,70%,90% { transform: translate3d(3px,0,0); }\n 20%,40%,60%,80% { transform: translate3d(-3px,0,0); }\n",shakeRotate:"\n 0%,100% { transform: rotate(0deg); }\n 25% { transform: rotate(-5deg); }\n 50% { transform: rotate(5deg); }\n 75% { transform: rotate(-3deg); }\n",shakeSkew:"\n 0%,100% { transform: skew(0deg, 0deg); }\n 20% { transform: skew(-10deg, -5deg); }\n 40% { transform: skew(8deg, 3deg); }\n 60% { transform: skew(-6deg, -3deg); }\n 80% { transform: skew(4deg, 2deg); }\n",shakeBounce:"\n 0%,100% { transform: translateY(0); }\n 20% { transform: translateY(-6px); }\n 40% { transform: translateY(4px); }\n 60% { transform: translateY(-4px); }\n 80% { transform: translateY(2px); }\n",shakeCrazy:"\n 0% { transform: translate(0,0) rotate(0deg); }\n 20% { transform: translate(-4px,3px) rotate(-3deg); }\n 40% { transform: translate(5px,-2px) rotate(4deg); }\n 60% { transform: translate(-3px,2px) rotate(-4deg); }\n 80% { transform: translate(3px,-3px) rotate(2deg); }\n 100% { transform: translate(0,0) rotate(0deg); }\n",squeezeThenShakeX:"\n 0% { transform: scale3d(1,1,1); }\n 20% { transform: scale3d(0.7,0.7,1); }\n 40% { transform: scale3d(1.2,1.2,1); }\n 60% { transform: scale3d(0.9,0.9,1); }\n 70% { transform: translateX(0); }\n 80% { transform: translateX(-6px); }\n 90% { transform: translateX(6px); }\n 100% { transform: translateX(0); }\n",shakeYThenSqueeze:"\n 0% { transform: translateY(0); }\n 20% { transform: translateY(-6px); }\n 40% { transform: translateY(6px); }\n 60% { transform: translateY(-3px); }\n 70% { transform: scale3d(0.7,0.7,1); }\n 85% { transform: scale3d(1.2,1.2,1); }\n 100% { transform: scale3d(1,1,1); }\n",squeezeShakeCrazy:"\n 0% { transform: scale3d(1,1,1); }\n 20% { transform: scale3d(0.8,1.2,1); }\n 40% { transform: scale3d(1.2,0.8,1); }\n 50% { transform: translate(-4px,3px) rotate(-3deg); }\n 70% { transform: translate(5px,-2px) rotate(4deg); }\n 90% { transform: translate(-3px,2px) rotate(-4deg); }\n 100% { transform: scale3d(1,1,1) translate(0,0) rotate(0); }\n"},...{slideInFromLeft:"\n from { transform: translateX(-100%); opacity: 0; }\n to { transform: translateX(0); opacity: 1; }\n",slideInFromRight:"\n from { transform: translateX(100%); opacity: 0; }\n to { transform: translateX(0); opacity: 1; }\n",slideOutToLeft:"\n from { transform: translateX(0); opacity: 1; }\n to { transform: translateX(-100%); opacity: 0; }\n",slideOutToRight:"\n from { transform: translateX(0); opacity: 1; }\n to { transform: translateX(100%); opacity: 0; }\n",slideInFromTop:"\n from { transform: translateY(-100%); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n",slideInFromBottom:"\n from { transform: translateY(100%); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n",slideOutToTop:"\n from { transform: translateY(0); opacity: 1; }\n to { transform: translateY(-100%); opacity: 0; }\n",slideOutToBottom:"\n from { transform: translateY(0); opacity: 1; }\n to { transform: translateY(100%); opacity: 0; }\n",slideInFromLeftOvershoot:"\n 0% { transform: translateX(-100%); opacity: 0; }\n 60% { transform: translateX(20%); opacity: 1; }\n 100% { transform: translateX(0); opacity: 1; }\n",slideInFromRightOvershoot:"\n 0% { transform: translateX(100%); opacity: 0; }\n 60% { transform: translateX(-20%); opacity: 1; }\n 100% { transform: translateX(0); opacity: 1; }\n",slideOutToLeftOvershoot:"\n 0% { transform: translateX(0); opacity: 1; }\n 60% { transform: translateX(-120%); opacity: 0; }\n 100% { transform: translateX(-100%); opacity: 0; }\n",slideOutToRightOvershoot:"\n 0% { transform: translateX(0); opacity: 1; }\n 60% { transform: translateX(120%); opacity: 0; }\n 100% { transform: translateX(100%); opacity: 0; }\n",slideInFromTopOvershoot:"\n 0% { transform: translateY(-100%); opacity: 0; }\n 60% { transform: translateY(20%); opacity: 1; }\n 100% { transform: translateY(0); opacity: 1; }\n",slideInFromBottomOvershoot:"\n 0% { transform: translateY(100%); opacity: 0; }\n 60% { transform: translateY(-20%); opacity: 1; }\n 100% { transform: translateY(0); opacity: 1; }\n",slideOutToTopOvershoot:"\n 0% { transform: translateY(0); opacity: 1; }\n 60% { transform: translateY(-120%); opacity: 0; }\n 100% { transform: translateY(-100%); opacity: 0; }\n",slideOutToBottomOvershoot:"\n 0% { transform: translateY(0); opacity: 1; }\n 60% { transform: translateY(120%); opacity: 0; }\n 100% { transform: translateY(100%); opacity: 0; }\n"},...{flip:"from{transform:rotateY(0)}to{transform:rotateY(180deg)}",flipIn:"\n 0% { transform: rotateX(180deg); opacity: 0; }\n 35% { transform: rotateX(120deg); opacity: 0; }\n 65% { opacity: 0; }\n 100% { transform: rotateX(360deg); opacity: 1; }\n",flipOut:"\n 0% { transform: rotateX(0deg); opacity: 1; }\n 35% { transform: rotateX(-40deg); opacity: 1; }\n 65% { opacity: 0; }\n 100% { transform: rotateX(180deg); opacity: 0; }\n",flipSlowDown:"\n 0% { transform: rotateX(0deg); }\n 5% { transform: rotateX(1turn); }\n 10% { transform: rotateX(2turn); }\n 20% { transform: rotateX(3turn); }\n 40% { transform: rotateX(4turn); }\n 70%,100% { transform: rotateX(5turn); }\n",flipToLeft:"\n from { transform: rotateY(0); }\n to { transform: rotateY(-90deg); }\n",flipToRight:"\n from { transform: rotateY(0); }\n to { transform: rotateY(90deg); }\n",flipFromTop:"\n from { transform: rotateX(-90deg); }\n to { transform: rotateX(0); }\n",flipToTop:"\n from { transform: rotateX(0); }\n to { transform: rotateX(-90deg); }\n",flipToBottom:"\n from { transform: rotateX(0); }\n to { transform: rotateX(90deg); }\n",flipFromBottom:"\n from { transform: rotateX(90deg); }\n to { transform: rotateX(0); }\n",flipFromLeftToCenter:"\n from { transform: rotateY(-90deg); }\n to { transform: rotateY(0); }\n",flipFromRightToCenter:"\n from { transform: rotateY(90deg); }\n to { transform: rotateY(0); }\n",flipRich:"\n 0% { transform: perspective(1000px) rotateX(360deg); transform-origin: center; }\n 100% { transform: perspective(1000px) rotateX(0deg); transform-origin: center; }\n",flipToTopRich:"\n from { transform: rotateX(-90deg); transform-origin: center top; opacity: 1; }\n to { transform: rotateX(90deg); transform-origin: center top; opacity: 0; }\n",flipToBottomRich:"\n from { opacity: 1; transform-origin: 0% 0%; transform: rotateX(0deg) translateY(0); }\n to { opacity: 0; transform-origin: 0% 0%; transform: rotateX(-90deg) translateY(50px); }\n",flipToTopLeftRich:"\n from {\n opacity: 1;\n transform-origin: top left;\n transform: rotateX(0deg) rotateY(0deg);\n }\n to {\n opacity: 0;\n transform-origin: top left;\n transform: rotateX(-90deg) rotateY(-90deg);\n }\n",flipToRightRich:"\n from {\n opacity: 1;\n transform-origin: center right;\n transform: rotateY(0deg);\n }\n to {\n opacity: 0;\n transform-origin: center right;\n transform: rotateY(90deg);\n }\n",flipFromTopRich:"\n from { opacity: 0; transform-origin: 0% 0%; transform: rotateX(90deg); }\n to { opacity: 1; transform-origin: 0% 0%; transform: rotateX(0deg); }\n",flipFromBottomRich:"\n from { transform: rotateX(-90deg); transform-origin: 50% 0; opacity: 0; }\n to { transform: rotateX(0deg); transform-origin: 50% 0; opacity: 1; }\n",flipFromLeftToCenterRich:"\n 0% { transform: rotateY(-95deg) translateX(-200px); transform-origin: left; }\n 100% { transform: rotateY(0deg); transform-origin: left; }\n",flipFromRightToCenterRich:"\n 0% { transform: rotateY(95deg) translateX(200px); transform-origin: right; }\n 100% { transform: rotateY(0deg); transform-origin: right; }\n"},...{fold:"from { transform: scaleY(1); } to { transform: scaleY(0); }",unfold:"from { transform: scaleY(0); } to { transform: scaleY(1); }",foldDeep:"\n 0% { transform: scale3d(1, 1, 1); }\n 30% { transform: scale3d(1, 0.4, 1); }\n 60% { transform: scale3d(0.4, 0.4, 1); }\n 100% { opacity: 0; transform: scale3d(0.2, 0.2, 0.2); }\n",unfoldDeep:"\n 0% { opacity: 0; transform: scale3d(0, 0, 0); }\n 30% { opacity: 1; transform: scale3d(0.4, 0.4, 1); }\n 60% { transform: scale3d(0.4, 1, 1); }\n 100% { transform: scale3d(1, 1, 1); }\n",foldLeft:"\n from { transform: perspective(400px) rotateY(0); opacity: 1; }\n to { transform: perspective(400px) rotateY(-90deg); opacity: 0; }\n",unfoldLeft:"\n from { transform: perspective(400px) rotateY(-90deg); opacity: 0; }\n to { transform: perspective(400px) rotateY(0); opacity: 1; }\n",foldRight:"\n from { transform: perspective(400px) rotateY(0); opacity: 1; }\n to { transform: perspective(400px) rotateY(90deg); opacity: 0; }\n",unfoldRight:"\n from { transform: perspective(400px) rotateY(90deg); opacity: 0; }\n to { transform: perspective(400px) rotateY(0); opacity: 1; }\n",foldUp:"\n from { transform: perspective(400px) rotateX(0); opacity: 1; }\n to { transform: perspective(400px) rotateX(-90deg); opacity: 0; }\n",unfoldUp:"\n from { transform: perspective(400px) rotateX(-90deg); opacity: 0; }\n to { transform: perspective(400px) rotateX(0); opacity: 1; }\n",foldDown:"\n from { transform: perspective(400px) rotateX(0); opacity: 1; }\n to { transform: perspective(400px) rotateX(90deg); opacity: 0; }\n",unfoldDown:"\n from { transform: perspective(400px) rotateX(90deg); opacity: 0; }\n to { transform: perspective(400px) rotateX(0); opacity: 1; }\n"},...{hangOnLeft:"\n from { transform: rotate(0deg); }\n to { transform: rotate(-20deg); }\n",hangOnRight:"\n from { transform: rotate(0deg); }\n to { transform: rotate(20deg); }\n",hangOnTop:"\n from { transform: rotate(0deg); }\n to { transform: rotate(20deg); transform-origin: top; }\n",hangOnBottom:"\n from { transform: rotate(0deg); }\n to { transform: rotate(-20deg); transform-origin: bottom; }\n",hangOnLeftSwing:"\n 0% { transform-origin: left; transform: rotate(0deg); }\n 30% { transform: rotate(110deg); }\n 50% { transform: rotate(75deg); }\n 65% { transform: rotate(100deg); }\n 78% { transform: rotate(80deg); }\n 88% { transform: rotate(95deg); }\n 95% { transform: rotate(86deg); }\n 100% { transform: rotate(90deg); }\n",hangOnRightSwing:"\n 0% { transform-origin: right; transform: rotate(0deg); }\n 30% { transform: rotate(-110deg); }\n 50% { transform: rotate(-75deg); }\n 65% { transform: rotate(-100deg); }\n 78% { transform: rotate(-80deg); }\n 88% { transform: rotate(-95deg); }\n 95% { transform: rotate(-86deg); }\n 100% { transform: rotate(-90deg); }\n",hangOnTopSwing:"\n 0% { transform-origin: top; transform: rotate(0deg); }\n 30% { transform: rotate(-110deg); }\n 50% { transform: rotate(-75deg); }\n 65% { transform: rotate(-100deg); }\n 78% { transform: rotate(-80deg); }\n 88% { transform: rotate(-95deg); }\n 95% { transform: rotate(-86deg); }\n 100% { transform: rotate(-90deg); }\n",hangOnBottomSwing:"\n 0% { transform-origin: bottom; transform: rotate(0deg); }\n 30% { transform: rotate(110deg); }\n 50% { transform: rotate(75deg); }\n 65% { transform: rotate(100deg); }\n 78% { transform: rotate(80deg); }\n 88% { transform: rotate(95deg); }\n 95% { transform: rotate(86deg); }\n 100% { transform: rotate(90deg); }\n",hangOnOscillate:"\n 0% { transform: rotate(0deg); }\n 25% { transform: rotate(15deg); }\n 50% { transform: rotate(-15deg); }\n 75% { transform: rotate(10deg); }\n 100% { transform: rotate(0deg); }\n",hangOnDrop:"\n 0% { transform-origin: top; transform: rotate(0deg); opacity: 1; }\n 20% { transform: rotate(30deg); opacity: 1; }\n 40% { transform: rotate(-30deg); opacity: 1; }\n 60% { transform: rotate(15deg); opacity: 1; }\n 80% { transform: rotate(-15deg); opacity: 1; }\n 100% { transform: rotate(90deg) translateY(200%); opacity: 0; }\n"},...{zoomIn:"\n from { transform: scale(2); opacity: 0; }\n to { transform: scale(1); opacity: 1; }\n",zoomOut:"\n from { transform: scale(1); opacity: 1; }\n to { transform: scale(2); opacity: 0; }\n",zoomInFromLeft:"\n from { transform: scale(2) translateX(-100%); opacity: 0; }\n to { transform: scale(1) translateX(0); opacity: 1; }\n",zoomInFromRight:"\n from { transform: scale(2) translateX(100%); opacity: 0; }\n to { transform: scale(1) translateX(0); opacity: 1; }\n",zoomInFromTop:"\n from { transform: scale(2) translateY(-100%); opacity: 0; }\n to { transform: scale(1) translateY(0); opacity: 1; }\n",zoomInFromBottom:"\n from { transform: scale(2) translateY(100%); opacity: 0; }\n to { transform: scale(1) translateY(0); opacity: 1; }\n",zoomOutToLeft:"\n from { transform: scale(1) translateX(0); opacity: 1; }\n to { transform: scale(2) translateX(-100%); opacity: 0; }\n",zoomOutToRight:"\n from { transform: scale(1) translateX(0); opacity: 1; }\n to { transform: scale(2) translateX(100%); opacity: 0; }\n",zoomOutToTop:"\n from { transform: scale(1) translateY(0); opacity: 1; }\n to { transform: scale(2) translateY(-100%); opacity: 0; }\n",zoomOutToBottom:"\n from { transform: scale(1) translateY(0); opacity: 1; }\n to { transform: scale(2) translateY(100%); opacity: 0; }\n",zoomInRotate:"\n from { transform: scale(0) rotate(-180deg); opacity: 0; }\n to { transform: scale(1) rotate(0deg); opacity: 1; }\n",zoomOutRotate:"\n from { transform: scale(1) rotate(0deg); opacity: 1; }\n to { transform: scale(0) rotate(180deg); opacity: 0; }\n",zoomInFlipX:"\n from { transform: perspective(400px) scale(0.5) rotateX(90deg); opacity: 0; }\n to { transform: perspective(400px) scale(1) rotateX(0deg); opacity: 1; }\n",zoomOutFlipX:"\n from { transform: perspective(400px) scale(1) rotateX(0deg); opacity: 1; }\n to { transform: perspective(400px) scale(0.5) rotateX(90deg); opacity: 0; }\n",zoomInFlipY:"\n from { transform: perspective(400px) scale(0.5) rotateY(90deg); opacity: 0; }\n to { transform: perspective(400px) scale(1) rotateY(0deg); opacity: 1; }\n",zoomOutFlipY:"\n from { transform: perspective(400px) scale(1) rotateY(0deg); opacity: 1; }\n to { transform: perspective(400px) scale(0.5) rotateY(90deg); opacity: 0; }\n",zoomPulse:"\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n",zoomSwing:"\n 0% { transform: scale(0.3); opacity: 0; }\n 50% { transform: scale(1.2); opacity: 1; }\n 70% { transform: scale(0.9); }\n 100% { transform: scale(1); }\n"},...{rotateCW:"\n from {\n transform: rotateZ(0deg);\n transform-origin: center center;\n }\n to {\n transform: rotateZ(360deg);\n transform-origin: center center;\n }\n",rotateACW:"\n from {\n transform: rotateZ(0deg);\n transform-origin: center center;\n }\n to {\n transform: rotateZ(-360deg);\n transform-origin: center center;\n }\n",rotateSlowDown:"\n 0% { transform: rotateZ(0deg); transform-origin: center center; }\n 5% { transform: rotateZ(1turn); transform-origin: center center; }\n 10% { transform: rotateZ(2turn); transform-origin: center center; }\n 20% { transform: rotateZ(3turn); transform-origin: center center; }\n 40% { transform: rotateZ(4turn); transform-origin: center center; }\n 65%, 100% { transform: rotateZ(5turn); transform-origin: center center; }\n",rotateX:"\n from { transform: rotateX(0deg); transform-origin: center center; }\n to { transform: rotateX(360deg); transform-origin: center center; }\n",rotateY:"\n from { transform: rotateY(0deg); transform-origin: center center; }\n to { transform: rotateY(360deg); transform-origin: center center; }\n",rotateFromLeft:"\n from { transform: rotateY(-90deg); transform-origin: left center; }\n to { transform: rotateY(0deg); transform-origin: left center; }\n",rotateFromRight:"\n from { transform: rotateY(90deg); transform-origin: right center; }\n to { transform: rotateY(0deg); transform-origin: right center; }\n",rotateToLeft:"\n from { transform: rotateY(0deg); transform-origin: center center; }\n to { transform: rotateY(-90deg); transform-origin: center center; }\n",rotateToRight:"\n from { transform: rotateY(0deg); transform-origin: center center; }\n to { transform: rotateY(90deg); transform-origin: center center; }\n",rotateFromTop:"\n from { transform: rotateX(-90deg); transform-origin: center top; }\n to { transform: rotateX(0deg); transform-origin: center top; }\n",rotateFromBottom:"\n from { transform: rotateX(90deg); transform-origin: center bottom; }\n to { transform: rotateX(0deg); transform-origin: center bottom; }\n",rotateToTop:"\n from { transform: rotateX(0deg); transform-origin: center top; }\n to { transform: rotateX(-90deg); transform-origin: center top; }\n",rotateToBottom:"\n from { transform: rotateX(0deg); transform-origin: center bottom; }\n to { transform: rotateX(90deg); transform-origin: center bottom; }\n"},...{heartBeat:"\n 0%, 28%, 70%, 100% { transform: scale(1); }\n 14%, 42% { transform: scale(1.3); }\n",tada:"\n from { transform: scale3d(1, 1, 1); }\n 10%, 20% { transform: scale3d(.9, .9, .9) rotate(-3deg); }\n 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); }\n 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); }\n to { transform: scale3d(1, 1, 1); }\n",hinge:"\n 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }\n 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }\n 40%, 80% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }\n 100% { transform: translateY(700px); opacity: 0; }\n",lightSpeedInLeft:"\n from { transform: translateX(-100%) skewX(30deg); opacity: 0; }\n 60% { transform: skewX(-20deg); opacity: 1; }\n 80% { transform: skewX(5deg); }\n to { transform: none; }\n",lightSpeedOutRight:"\n from { opacity: 1; }\n to { transform: translateX(100%) skewX(-30deg); opacity: 0; }\n"},...{popIn:"\n from { opacity: 0; transform: scale3d(0.5,0.5,0.5); }\n to { opacity: 1; transform: scale3d(1,1,1); }\n",popOut:"\n from { opacity: 1; transform: scale3d(1,1,1); }\n to { opacity: 0; transform: scale3d(0.5,0.5,0.5); }\n",popBounceIn:"\n 0% { opacity: 0; transform: scale3d(0.3,0.3,0.3); }\n 50% { opacity: 1; transform: scale3d(1.05,1.05,1.05); }\n 70% { transform: scale3d(0.9,0.9,0.9); }\n 100% { transform: scale3d(1,1,1); }\n",popBounceOut:"\n 20% { transform: scale3d(0.9,0.9,0.9); }\n 50%,55% { opacity:1; transform: scale3d(1.1,1.1,1.1); }\n to { opacity:0; transform: scale3d(0.3,0.3,0.3); }\n",popUpIn:"\n from { opacity:0; transform: translateY(50%) scale3d(0.5,0.5,0.5); }\n to { opacity:1; transform: translateY(0) scale3d(1,1,1); }\n",popUpOut:"\n from { opacity:1; transform: translateY(0) scale3d(1,1,1); }\n to { opacity:0; transform: translateY(-50%) scale3d(0.5,0.5,0.5); }\n",popRotateIn:"\n from { opacity:0; transform: scale3d(0.5,0.5,0.5) rotate(-45deg); }\n to { opacity:1; transform: scale3d(1,1,1) rotate(0deg); }\n",popRotateOut:"\n from { opacity:1; transform: scale3d(1,1,1) rotate(0deg); }\n to { opacity:0; transform: scale3d(0.5,0.5,0.5) rotate(45deg); }\n",popBlurIn:"\n from { opacity:0; transform: scale3d(0.5,0.5,0.5); filter: blur(5px); }\n to { opacity:1; transform: scale3d(1,1,1); filter: blur(0); }\n",popBlurOut:"\n from { opacity:1; transform: scale3d(1,1,1); filter: blur(0); }\n to { opacity:0; transform: scale3d(0.5,0.5,0.5); filter: blur(5px); }\n",popLeftIn:"\n from { opacity: 0; transform: translateX(-50%) scale3d(0.5,0.5,0.5); }\n to { opacity: 1; transform: translateX(0) scale3d(1,1,1); }\n",popLeftOut:"\n from { opacity:1; transform: translateX(0) scale3d(1,1,1); }\n to { opacity:0; transform: translateX(-50%) scale3d(0.5,0.5,0.5); }\n",popRightIn:"\n from { opacity: 0; transform: translateX(50%) scale3d(0.5,0.5,0.5); }\n to { opacity: 1; transform: translateX(0) scale3d(1,1,1); }\n",popRightOut:"\n from { opacity:1; transform: translateX(0) scale3d(1,1,1); }\n to { opacity:0; transform: translateX(50%) scale3d(0.5,0.5,0.5); }\n"},...s},g=Object.keys(u),y=Object.fromEntries([{name:"🎾 Bounce",key:"bounce",prefix:"bounce"},{name:"✨ Text / Glow Effects",key:"text",prefix:"effect"},{name:"🌫 Blur",key:"blur",prefix:"blur"},{name:"⚡ Flash",key:"flash",prefix:"flash"},{name:"🎈 Float",key:"float",prefix:"float"},{name:"💡 Glow",key:"glow",prefix:"glow"},{name:"🍮 Jelly",key:"jelly",prefix:"jelly"},{name:"🌑 Shadow / Spin / Swing / Orbit",key:"motion",prefix:""},{name:"💓 Pulse",key:"pulse",prefix:"pulse"},{name:"🌫 Fade",key:"fade",prefix:"fade"},{name:"🤯 Squeeze / Shake",key:"shake",prefix:"shake"},{name:"📥 Slide",key:"slide",prefix:"slide"},{name:"🔄 Flip",key:"flip",prefix:"flip"},{name:"📂 Fold / Unfold",key:"fold",prefix:"fold"},{name:"🪝 Hang On",key:"hangOn",prefix:"hangOn"},{name:"🔍 Zoom",key:"zoom",prefix:"zoom"},{name:"🌀 Rotate",key:"rotate",prefix:"rotate"},{name:"🎉 Fun / Attention",key:"fun",prefix:""}].map((({key:t,prefix:r})=>[t,g.filter((t=>!r||t.startsWith(r)))]))),x=new Set;function h(t){const r=function(t){return t?"object"==typeof t&&"current"in t?t.current:t:null}(t);let n=null;function a(){r&&(r.style.animation="",r.style.removeProperty("animation-name"),r.style.removeProperty("animation-duration"),r.style.removeProperty("animation-timing-function"),r.style.removeProperty("animation-iteration-count"),r.style.removeProperty("animation-fill-mode"))}return{run:function(t,e={}){if(!r)return;n&&(n(),n=null);const s=u[t];s&&function(t,r){if(x.has(t))return;x.add(t);const n=document.createElement("style");n.setAttribute("data-az-keyframe",t),n.innerHTML=`\n@keyframes ${t} {\n${r}\n}\n `.trim(),document.head.appendChild(n)}(`az-${t}`,s);const f=e.duration??o[t]??"1s";if(r.style.animation="none",r.offsetHeight,r.style.animationName=`az-${t}`,r.style.animationDuration="number"==typeof f?`${f}ms`:f,r.style.animationTimingFunction=e.timing??"ease",r.style.animationIterationCount=String(e.iteration??1),r.style.animationFillMode="both",!e.keep){const t=e=>{e.target===r&&(a(),r.removeEventListener("animationend",t),n=null)};r.addEventListener("animationend",t),n=()=>{r.removeEventListener("animationend",t),a()}}},stop:function(){n&&n(),n=null,a()}}}const Y={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out"},b=["type","duration","timing","delay","iteration","direction","fillMode","tagName"],X={};const w=e.default("div").withConfig({shouldForwardProp:t=>!b.includes(t)})`
2
2
  margin: 0;
3
3
  padding: 0;
4
4
 
5
- ${({type:t,duration:r,timing:a,delay:e,iteration:o,direction:s,fillMode:f})=>n.css`
6
- animation:
7
- ${t&&`${n.css`${u[t]}`}`}
8
- ${"number"==typeof r?`${r}ms`:r}
9
- ${a?Y[a]:""}
10
- ${"number"==typeof e?`${e}ms`:e}
11
- ${o??""}
12
- ${s??""}
13
- ${f??""};
14
- `}
15
- `,w=r.forwardRef((function({tagName:r="div",children:n,className:a,type:e="blurIn",duration:s,timing:f="ease",delay:l="0s",direction:i="alternate",fillMode:m="forwards",...c},p){const d=s??o[e]??"1s",u="number"==typeof d?`${d}ms`:d;return t.jsx(X,{as:r,ref:p,className:a,type:e,duration:u,timing:f,delay:l,iteration:c.iteration??1,direction:i,fillMode:m,...c,children:n})}));var k=w;const O=r.forwardRef((function({as:r,children:n,...a},e){return t.jsx(k,{...a,tagName:r,ref:e,children:n})}));function I(t){return new Promise((r=>setTimeout(r,t)))}function T(){return new Promise((t=>requestAnimationFrame((()=>t()))))}class v{constructor(t){this.chain=Promise.resolve(),this.run=t}variant(t){return this.currentVariant=t,this}animate(t,r){return this.chain=this.chain.then(T).then((()=>(this.run(t,r),I("number"==typeof r?.duration?r.duration:300)))),this}wait(t){return this.chain=this.chain.then((()=>I(t))),this}parallel(t,r=0){return this.chain=this.chain.then(T).then((()=>{const n=t.map((t=>new Promise((r=>{t({animate:(t,n)=>{this.run(t,n,this.currentVariant),setTimeout(r,n?.duration??300)}})}))));return Promise.all(n).then((()=>I(r)))})),this}}function R(){const t=r.useRef(null),n=r.useCallback(((r,n)=>{t.current&&h(t.current).run(r,n)}),[]),a=r.useCallback(((t,r)=>{n(t,r)}),[n]),e=r.useCallback((()=>{t.current&&h(t.current).stop()}),[]),o=r.useCallback((()=>new v(n)),[n]);return{ref:t,run:n,play:a,reset:e,sequence:o}}const F={delay:"0s",direction:"normal",timing:"ease",iteration:1,fillMode:"forwards"},S=(t,r)=>({...F,type:t,duration:r??o[t??"blurIn"]??"1s"}),z=n.keyframes`
5
+ ${({type:t,duration:r=1e3,timing:a,delay:e,iteration:o,direction:s,fillMode:f})=>{const i=function(t){if(t)return X[t]||(X[t]=n.keyframes`${u[t]}`),X[t]}(t);return i?n.css`
6
+ animation-name: ${i};
7
+ animation-duration: ${"number"==typeof r?`${r}ms`:r};
8
+ animation-timing-function: ${a?Y[a]:"ease"};
9
+ animation-delay: ${"number"==typeof e?`${e}ms`:e||"0ms"};
10
+ animation-iteration-count: ${o??1};
11
+ animation-direction: ${s??"normal"};
12
+ animation-fill-mode: ${f??"both"};
13
+ `:""}}
14
+ `,k=r.forwardRef((function({tagName:r="div",children:n,className:a,type:e="blurIn",duration:s,timing:f="ease",delay:i="0s",direction:l="alternate",fillMode:m="forwards",iteration:c,...p},d){const u=s??o[e]??"1s",g="number"==typeof u?`${u}ms`:u;return t.jsx(w,{as:r,ref:d,className:a,type:e,duration:g,timing:f,delay:i,iteration:c??1,direction:l,fillMode:m,...p,children:n})}));var O=k;const I=r.forwardRef((function({as:r,children:n,...a},e){return t.jsx(O,{...a,tagName:r,ref:e,children:n})}));function T(t){return new Promise((r=>setTimeout(r,t)))}function v(){return new Promise((t=>requestAnimationFrame((()=>t()))))}class R{constructor(t){this.chain=Promise.resolve(),this.run=t}variant(t){return this.currentVariant=t,this}animate(t,r){return this.chain=this.chain.then(v).then((()=>(this.run(t,r),T("number"==typeof r?.duration?r.duration:300)))),this}wait(t){return this.chain=this.chain.then((()=>T(t))),this}parallel(t,r=0){return this.chain=this.chain.then(v).then((()=>{const n=t.map((t=>new Promise((r=>{t({animate:(t,n)=>{this.run(t,n,this.currentVariant),setTimeout(r,n?.duration??300)}})}))));return Promise.all(n).then((()=>T(r)))})),this}}function F(){const t=r.useRef(null),n=r.useCallback(((r,n)=>{t.current&&h(t.current).run(r,n)}),[]),a=r.useCallback(((t,r)=>{n(t,r)}),[n]),e=r.useCallback((()=>{t.current&&h(t.current).stop()}),[]),o=r.useCallback((()=>new R(n)),[n]);return{ref:t,run:n,play:a,reset:e,sequence:o}}const S={delay:"0s",direction:"normal",timing:"ease",iteration:1,fillMode:"forwards"},z=(t,r)=>({...S,type:t,duration:r??o[t??"blurIn"]??"1s"}),B=n.keyframes`
16
15
  50% { border-color: transparent; }
17
- `,B=e.default.span`
16
+ `,C=e.default.span`
18
17
  margin-left: 2px;
19
18
  border-left: 3px solid ${({cursorColor:t})=>t||"#000"};
20
- animation: ${z} 0.7s steps(1) infinite;
21
- `;const C="pulse",D="shakeMix",A="float",L="flash";function M({text:t,speed:n=50,loop:a=!1}){const[e,o]=r.useState(""),[s,f]=r.useState(0),[l,i]=r.useState(!1);return r.useEffect((()=>{if(s>=t.length){if(i(!0),!a)return;const t=setTimeout((()=>{f(0),o(""),i(!1)}),800);return()=>clearTimeout(t)}const r=setTimeout((()=>{o((r=>r+t[s])),f((t=>t+1))}),n);return()=>clearTimeout(r)}),[s,t,n,a]),{output:e,isDone:l,reset:()=>{f(0),o(""),i(!1)}}}const j={idle:"fadeIn",loading:"float",success:"pulse",error:"shakeMix",warning:"flash"};const E={bounce:o.bounce,bounceIn:o.bounceIn,bounceOut:o.bounceOut,bounceElastic:o.bounceElastic,bounceJelly:o.bounceJelly},Z={shakeMix:o.shakeMix,shakeHorizontal:o.shakeHorizontal,shakeVertical:o.shakeVertical,shakeQuick:o.shakeQuick},P={fadeIn:o.fadeIn,fadeOut:o.fadeOut,blurIn:o.blurIn,blurOut:o.blurOut},q={typing:o.typing,typingLoop:o.typingLoop,typeWriter:o.typeWriter,typeDelete:o.typeDelete},$=o.fadeIn,N=o.fadeOut,H=o.shakeMix,G=o.float;exports.Animate=w,exports.AnimateGroup=({type:n,stagger:a=80,children:e,className:o})=>{const[s,f]=r.useState(0),l=r.Children.toArray(e);return r.useEffect((()=>{if(!a)return void f(l.length);let t=0;const r=setInterval((()=>{t++,f(t),t>=l.length&&clearInterval(r)}),a);return()=>clearInterval(r)}),[a,l.length]),t.jsx("div",{className:o,children:l.map(((a,e)=>r.isValidElement(a)?e>=s?null:t.jsx(k,{type:n,children:r.cloneElement(a)},e):a))})},exports.AnimateHost=O,exports.AnimateOn=function({when:t,value:n,anim:a,options:e,children:o}){const s=R(),f=r.useRef(t);return r.useEffect((()=>{let r=!1;if(r=void 0===n?t!==f.current:t===n&&f.current!==n,r)if(Array.isArray(a)){const t=s.sequence();a.forEach((r=>{t.animate(r,e)}))}else s.play(a,e);f.current=t}),[t,n,a,e,s]),r.cloneElement(o,{ref:t=>{s.ref.current=t;const r=o.ref;"function"==typeof r?r(t):r&&"current"in r&&(r.current=t)}})},exports.AnimatePresence=({show:t,enter:n,exit:a,duration:e=300,children:o})=>{const s=R(),[f,l]=r.useState(t),i=r.useRef(t);return r.useEffect((()=>{if(t&&!i.current&&l(!0),!t&&i.current){s.play(a);const t=setTimeout((()=>{l(!1)}),e);return()=>clearTimeout(t)}i.current=t}),[t,n,a,e]),r.useEffect((()=>{f&&t&&s.play(n)}),[f,t,n]),f?r.cloneElement(o,{ref:t=>{s.ref.current=t;const r=o.ref;"function"==typeof r?r(t):r&&(r.current=t)}}):null},exports.AnimateTyping=({heading:n,dataText:a,className:e,cursorColor:o="#000",typingSpeed:s=120,deletingSpeed:f=40,pauseTime:l=500,children:i})=>{const[m,c]=r.useState(""),[p,d]=r.useState(!1),[u,g]=r.useState(0),y=r.useMemo((()=>Array.isArray(a)?a:"string"==typeof a?[a]:"string"==typeof i?[i]:Array.isArray(i)&&i.every((t=>"string"==typeof t))?i:[]),[a,i]),x=r.useRef();return r.useEffect((()=>{if(!y.length)return;const t=u%y.length,r=y[t],n=p?r.substring(0,m.length-1):r.substring(0,m.length+1),a=!p&&n===r,e=p&&""===n;return x.current=window.setTimeout((()=>{c(n),a&&setTimeout((()=>d(!0)),l),e&&(d(!1),g((t=>t+1)))}),p?f:s),()=>{x.current&&clearTimeout(x.current)}}),[m,p,u,y,s,f,l]),t.jsxs("div",{className:e,children:[n&&t.jsxs(t.Fragment,{children:[t.jsx("span",{children:n})," "]}),t.jsx("span",{children:m}),t.jsx(B,{cursorColor:o})]})},exports.TypingText=function({text:r,speed:n,loop:a,as:e="span"}){const{output:o}=M({text:r,speed:n,loop:a});return t.jsx(e,{children:o})},exports.UXDuration={instant:"0.2s",fast:"0.5s",normal:"0.8s",slow:"1.2s",dramatic:"2s"},exports.WrapperAnimate=({children:r,tagName:n,type:a,duration:e,...o})=>t.jsx(w,{...S(a,e),tagName:n,...o,children:r}),exports.animGroups=y,exports.animNames=g,exports.animate=h,exports.bounceDurations=E,exports.default=k,exports.defaultAttentionDuration=H,exports.defaultDurationMap=o,exports.defaultEnterDuration=$,exports.defaultExitDuration=N,exports.defaultLoopDuration=G,exports.fadeDurations=P,exports.shakeDurations=Z,exports.timingMap={linear:"linear",ease:"ease",easeIn:"ease-in","ease-in":"ease-in",easeOut:"ease-out","ease-out":"ease-out",easeInOut:"ease-in-out","ease-in-out":"ease-in-out"},exports.typingDurations=q,exports.useAnimate=R,exports.useAnimateController=function(t={}){const n=R(),a=r.useCallback(((r,a)=>{const e=r??t.initial;e&&n.play(e,a)}),[n.play,t.initial]);r.useEffect((()=>{t.initial&&a(t.initial)}),[t.initial,a]);const e=r.useMemo((()=>{if(t.recipe)return function(t,r){const n={};return Object.keys(r).forEach((a=>{n[a]=n=>{const e=r[a];if(!e)return;const o="function"==typeof e?e(n):e;t(o,n)}})),n.run=(n,a)=>{const e=r[n];if(!e)return;const o="function"==typeof e?e(a):e;t(o,a)},n}(n.run,t.recipe)}),[n.run,t.recipe]);return{...n,play:a,recipe:e}},exports.useAnimateSequence=function(t){const n=r.useCallback(((r,n)=>{t.current&&h(t.current).run(r,n)}),[t]);return r.useMemo((()=>new v(n)),[n])},exports.useAttention=function(){const t=R();return{...t,success:()=>t.play(C),error:()=>t.play(D),loading:()=>t.play(A),warning:()=>t.play(L)}},exports.useAutoAnimate=function(t,n){const a=R(),e=r.useRef(t);return r.useEffect((()=>{e.current!==t&&(a.play(n.change),e.current=t)}),[t,n.change,a]),a},exports.useFocusAnimate=function(t){const r=R();return{...r,bind:{ref:r.ref,onFocus:()=>t.focus&&r.play(t.focus),onBlur:()=>t.blur&&r.play(t.blur)}}},exports.useHoverAnimate=function(t){const r=R();return{...r,bind:{ref:r.ref,onMouseEnter:()=>t.enter&&r.play(t.enter),onMouseLeave:()=>t.leave&&r.play(t.leave)}}},exports.usePairedAnimate=function(t){const{ref:n,sequence:a,play:e}=R();return{ref:n,show:r.useCallback((()=>{a().animate(t.enter).wait(t.visibleDuration??1e3).animate(t.leave)}),[a,t]),play:e}},exports.useRandomAnimate=function(t,n){return r.useCallback((r=>{if(!n.length)return;const a=n[Math.floor(Math.random()*n.length)];t(a,r)}),[t,n])},exports.useRandomAnimateByIntensity=function(t,n){return r.useCallback((r=>{const a=n[r?.intensity??"medium"];if(!a?.length)return;const e=a[Math.floor(Math.random()*a.length)];t(e,r)}),[t,n])},exports.useRandomAnimateNoRepeat=function(t,n){const a=r.useRef(null);return r.useCallback((r=>{if(!n.length)return;let e;do{e=n[Math.floor(Math.random()*n.length)]}while(n.length>1&&e===a.current);a.current=e,t(e,r)}),[t,n])},exports.useRecipe=function(t){const{map:n=j,autoReset:a=!0,resetDelay:e=600}=t||{},o=R(),s=r.useRef(),f=r.useCallback((t=>{const r=n[t];r&&(o.play(r),a&&"loading"!==t&&(clearTimeout(s.current),s.current=window.setTimeout(o.reset,e)))}),[n,a,e,o]);return{...o,play:f}},exports.useTypingAnimate=M,exports.useWeightedRandomAnimate=function(t,n){const a=r.useMemo((()=>n.reduce(((t,r)=>t+Math.max(0,r.weight)),0)),[n]);return r.useCallback((r=>{if(!n.length||a<=0)return;let e=Math.random()*a;for(const a of n){if(e-=Math.max(0,a.weight),e<=0)return void t(a.name,r)}}),[t,n,a])};
19
+ animation: ${B} 0.7s steps(1) infinite;
20
+ `;const D="pulse",M="shakeMix",A="float",L="flash";function j({text:t,speed:n=50,loop:a=!1}){const[e,o]=r.useState(""),[s,f]=r.useState(0),[i,l]=r.useState(!1);return r.useEffect((()=>{if(s>=t.length){if(l(!0),!a)return;const t=setTimeout((()=>{f(0),o(""),l(!1)}),800);return()=>clearTimeout(t)}const r=setTimeout((()=>{o((r=>r+t[s])),f((t=>t+1))}),n);return()=>clearTimeout(r)}),[s,t,n,a]),{output:e,isDone:i,reset:()=>{f(0),o(""),l(!1)}}}const E={idle:"fadeIn",loading:"float",success:"pulse",error:"shakeMix",warning:"flash"};const Z={bounce:o.bounce,bounceIn:o.bounceIn,bounceOut:o.bounceOut,bounceElastic:o.bounceElastic,bounceJelly:o.bounceJelly},P={shakeMix:o.shakeMix,shakeHorizontal:o.shakeHorizontal,shakeVertical:o.shakeVertical,shakeQuick:o.shakeQuick},q={fadeIn:o.fadeIn,fadeOut:o.fadeOut,blurIn:o.blurIn,blurOut:o.blurOut},$={typing:o.typing,typingLoop:o.typingLoop,typeWriter:o.typeWriter,typeDelete:o.typeDelete},N=o.fadeIn,H=o.fadeOut,G=o.shakeMix,W=o.float;exports.Animate=k,exports.AnimateGroup=({type:n,stagger:a=80,children:e,className:o})=>{const[s,f]=r.useState(0),i=r.Children.toArray(e);return r.useEffect((()=>{if(!a)return void f(i.length);let t=0;const r=setInterval((()=>{t++,f(t),t>=i.length&&clearInterval(r)}),a);return()=>clearInterval(r)}),[a,i.length]),t.jsx("div",{className:o,children:i.map(((a,e)=>r.isValidElement(a)?e>=s?null:t.jsx(O,{type:n,children:r.cloneElement(a)},e):a))})},exports.AnimateHost=I,exports.AnimateOn=function({when:t,value:n,anim:a,options:e,children:o}){const s=F(),f=r.useRef(t);return r.useEffect((()=>{let r=!1;if(r=void 0===n?t!==f.current:t===n&&f.current!==n,r)if(Array.isArray(a)){const t=s.sequence();a.forEach((r=>{t.animate(r,e)}))}else s.play(a,e);f.current=t}),[t,n,a,e,s]),r.cloneElement(o,{ref:t=>{s.ref.current=t;const r=o.ref;"function"==typeof r?r(t):r&&"current"in r&&(r.current=t)}})},exports.AnimatePresence=({show:t,enter:n,exit:a,duration:e=300,children:o})=>{const s=F(),[f,i]=r.useState(t),l=r.useRef(t);return r.useEffect((()=>{if(t&&!l.current&&i(!0),!t&&l.current){if(!s.ref.current)return;const t=s.play(a)??e,r=setTimeout((()=>{i(!1)}),t);return()=>clearTimeout(r)}l.current=t}),[t,n,a,e]),r.useEffect((()=>{f&&t&&s.play(n)}),[f,t,n]),f?r.cloneElement(o,{ref:t=>{s.ref.current=t;const r=o.ref;"function"==typeof r?r(t):r&&(r.current=t)}}):null},exports.AnimateTyping=({heading:n,dataText:a,className:e,cursorColor:o="#000",typingSpeed:s=120,deletingSpeed:f=40,pauseTime:i=500,children:l})=>{const[m,c]=r.useState(""),[p,d]=r.useState(!1),[u,g]=r.useState(0),y=r.useMemo((()=>Array.isArray(a)?a:"string"==typeof a?[a]:"string"==typeof l?[l]:Array.isArray(l)&&l.every((t=>"string"==typeof t))?l:[]),[a,l]),x=r.useRef();return r.useEffect((()=>{if(!y.length)return;const t=u%y.length,r=y[t],n=p?r.substring(0,m.length-1):r.substring(0,m.length+1),a=!p&&n===r,e=p&&""===n;return x.current=window.setTimeout((()=>{c(n),a&&setTimeout((()=>d(!0)),i),e&&(d(!1),g((t=>t+1)))}),p?f:s),()=>{x.current&&clearTimeout(x.current)}}),[m,p,u,y,s,f,i]),t.jsxs("div",{className:e,children:[n&&t.jsxs(t.Fragment,{children:[t.jsx("span",{children:n})," "]}),t.jsx("span",{children:m}),t.jsx(C,{cursorColor:o})]})},exports.TypingText=function({text:r,speed:n,loop:a,as:e="span"}){const{output:o}=j({text:r,speed:n,loop:a});return t.jsx(e,{children:o})},exports.UXDuration={instant:"0.2s",fast:"0.5s",normal:"0.8s",slow:"1.2s",dramatic:"2s"},exports.WrapperAnimate=({children:r,tagName:n,type:a,duration:e,...o})=>t.jsx(k,{...z(a,e),tagName:n,...o,children:r}),exports.animFramesMaps=u,exports.animGroups=y,exports.animNames=g,exports.animate=h,exports.bounceDurations=Z,exports.default=O,exports.defaultAttentionDuration=G,exports.defaultDurationMap=o,exports.defaultEnterDuration=N,exports.defaultExitDuration=H,exports.defaultLoopDuration=W,exports.fadeDurations=q,exports.shakeDurations=P,exports.timingMap={linear:"linear",ease:"ease",easeIn:"ease-in","ease-in":"ease-in",easeOut:"ease-out","ease-out":"ease-out",easeInOut:"ease-in-out","ease-in-out":"ease-in-out"},exports.typingDurations=$,exports.useAnimate=F,exports.useAnimateController=function(t={}){const n=F(),a=r.useCallback(((r,a)=>{const e=r??t.initial;e&&n.play(e,a)}),[n.play,t.initial]);r.useEffect((()=>{t.initial&&a(t.initial)}),[t.initial,a]);const e=r.useMemo((()=>{if(t.recipe)return function(t,r){const n={};return Object.keys(r).forEach((a=>{n[a]=n=>{const e=r[a];if(!e)return;const o="function"==typeof e?e(n):e;t(o,n)}})),n.run=(n,a)=>{const e=r[n];if(!e)return;const o="function"==typeof e?e(a):e;t(o,a)},n}(n.run,t.recipe)}),[n.run,t.recipe]);return{...n,play:a,recipe:e}},exports.useAnimateSequence=function(t){const n=r.useCallback(((r,n)=>{t.current&&h(t.current).run(r,n)}),[t]);return r.useMemo((()=>new R(n)),[n])},exports.useAttention=function(){const t=F();return{...t,success:()=>t.play(D),error:()=>t.play(M),loading:()=>t.play(A),warning:()=>t.play(L)}},exports.useAutoAnimate=function(t,n){const a=F(),e=r.useRef(t);return r.useEffect((()=>{e.current!==t&&(a.play(n.change),e.current=t)}),[t,n.change,a]),a},exports.useFocusAnimate=function(t){const r=F();return{...r,bind:{ref:r.ref,onFocus:()=>t.focus&&r.play(t.focus),onBlur:()=>t.blur&&r.play(t.blur)}}},exports.useHoverAnimate=function(t){const r=F();return{...r,bind:{ref:r.ref,onMouseEnter:()=>t.enter&&r.play(t.enter),onMouseLeave:()=>t.leave&&r.play(t.leave)}}},exports.usePairedAnimate=function(t){const{ref:n,sequence:a,play:e}=F();return{ref:n,show:r.useCallback((()=>{a().animate(t.enter).wait(t.visibleDuration??1e3).animate(t.leave)}),[a,t]),play:e}},exports.useRandomAnimate=function(t,n){return r.useCallback((r=>{if(!n.length)return;const a=n[Math.floor(Math.random()*n.length)];t(a,r)}),[t,n])},exports.useRandomAnimateByIntensity=function(t,n){return r.useCallback((r=>{const a=n[r?.intensity??"medium"];if(!a?.length)return;const e=a[Math.floor(Math.random()*a.length)];t(e,r)}),[t,n])},exports.useRandomAnimateNoRepeat=function(t,n){const a=r.useRef(null);return r.useCallback((r=>{if(!n.length)return;let e;do{e=n[Math.floor(Math.random()*n.length)]}while(n.length>1&&e===a.current);a.current=e,t(e,r)}),[t,n])},exports.useRecipe=function(t){const{map:n=E,autoReset:a=!0,resetDelay:e=600}=t||{},o=F(),s=r.useRef(),f=r.useCallback((t=>{const r=n[t];r&&(o.play(r),a&&"loading"!==t&&(clearTimeout(s.current),s.current=window.setTimeout(o.reset,e)))}),[n,a,e,o]);return{...o,play:f}},exports.useTypingAnimate=j,exports.useWeightedRandomAnimate=function(t,n){const a=r.useMemo((()=>n.reduce(((t,r)=>t+Math.max(0,r.weight)),0)),[n]);return r.useCallback((r=>{if(!n.length||a<=0)return;let e=Math.random()*a;for(const a of n){if(e-=Math.max(0,a.weight),e<=0)return void t(a.name,r)}}),[t,n,a])};
22
21
  //# sourceMappingURL=index.cjs.js.map