├── .gitignore ├── dist ├── animations │ ├── specials.d.ts │ ├── back_entrances.d.ts │ ├── back_exits.d.ts │ ├── sliding_entrances.d.ts │ ├── sliding_exist.d.ts │ ├── lightSpeed.d.ts │ ├── flippers.d.ts │ ├── zooming_entrances.d.ts │ ├── zooming_exits.d.ts │ ├── bouncing_entrances.d.ts │ ├── bouncing_exits.d.ts │ ├── rotating_entraces.d.ts │ ├── rotating_exits.d.ts │ ├── index.d.ts │ ├── attention_seekers.d.ts │ ├── fading_entrances.d.ts │ └── fading_exits.d.ts ├── index.d.ts ├── index.cjs.js └── index.es.js ├── tsconfig.json ├── src ├── animations │ ├── index.ts │ ├── sliding_exist.ts │ ├── sliding_entrances.ts │ ├── rotating_exits.ts │ ├── lightSpeed.ts │ ├── rotating_entraces.ts │ ├── back_entrances.ts │ ├── back_exits.ts │ ├── specials.ts │ ├── bouncing_exits.ts │ ├── zooming_exits.ts │ ├── zooming_entrances.ts │ ├── fading_exits.ts │ ├── flippers.ts │ ├── fading_entrances.ts │ ├── bouncing_entrances.ts │ └── attention_seekers.ts ├── __tests__ │ └── function.test.tsx └── index.tsx ├── vite.config.ts ├── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | yarn.lock 3 | package-lock.json 4 | .cache 5 | .storybook 6 | stories 7 | storybook-static 8 | /coverage 9 | /demo/dist 10 | /es 11 | /lib 12 | /node_modules 13 | /umd 14 | npm-debug.log* -------------------------------------------------------------------------------- /dist/animations/specials.d.ts: -------------------------------------------------------------------------------- 1 | export declare const rollIn: import('styled-components/dist/models/Keyframes').default; 2 | export declare const rollOut: import('styled-components/dist/models/Keyframes').default; 3 | export declare const hinge: import('styled-components/dist/models/Keyframes').default; 4 | export declare const jackInTheBox: import('styled-components/dist/models/Keyframes').default; 5 | -------------------------------------------------------------------------------- /dist/animations/back_entrances.d.ts: -------------------------------------------------------------------------------- 1 | export declare const backInDown: import('styled-components/dist/models/Keyframes').default; 2 | export declare const backInLeft: import('styled-components/dist/models/Keyframes').default; 3 | export declare const backInRight: import('styled-components/dist/models/Keyframes').default; 4 | export declare const backInUp: import('styled-components/dist/models/Keyframes').default; 5 | -------------------------------------------------------------------------------- /dist/animations/back_exits.d.ts: -------------------------------------------------------------------------------- 1 | export declare const backOutDown: import('styled-components/dist/models/Keyframes').default; 2 | export declare const backOutLeft: import('styled-components/dist/models/Keyframes').default; 3 | export declare const backOutRight: import('styled-components/dist/models/Keyframes').default; 4 | export declare const backOutUp: import('styled-components/dist/models/Keyframes').default; 5 | -------------------------------------------------------------------------------- /dist/animations/sliding_entrances.d.ts: -------------------------------------------------------------------------------- 1 | export declare const slideInDown: import('styled-components/dist/models/Keyframes').default; 2 | export declare const slideInLeft: import('styled-components/dist/models/Keyframes').default; 3 | export declare const slideInRight: import('styled-components/dist/models/Keyframes').default; 4 | export declare const slideInUp: import('styled-components/dist/models/Keyframes').default; 5 | -------------------------------------------------------------------------------- /dist/animations/sliding_exist.d.ts: -------------------------------------------------------------------------------- 1 | export declare const slideOutDown: import('styled-components/dist/models/Keyframes').default; 2 | export declare const slideOutLeft: import('styled-components/dist/models/Keyframes').default; 3 | export declare const slideOutRight: import('styled-components/dist/models/Keyframes').default; 4 | export declare const slideOutUp: import('styled-components/dist/models/Keyframes').default; 5 | -------------------------------------------------------------------------------- /dist/animations/lightSpeed.d.ts: -------------------------------------------------------------------------------- 1 | export declare const lightSpeedInLeft: import('styled-components/dist/models/Keyframes').default; 2 | export declare const lightSpeedInRight: import('styled-components/dist/models/Keyframes').default; 3 | export declare const lightSpeedOutLeft: import('styled-components/dist/models/Keyframes').default; 4 | export declare const lightSpeedOutRight: import('styled-components/dist/models/Keyframes').default; 5 | -------------------------------------------------------------------------------- /dist/animations/flippers.d.ts: -------------------------------------------------------------------------------- 1 | export declare const flip: import('styled-components/dist/models/Keyframes').default; 2 | export declare const flipInX: import('styled-components/dist/models/Keyframes').default; 3 | export declare const flipInY: import('styled-components/dist/models/Keyframes').default; 4 | export declare const flipOutX: import('styled-components/dist/models/Keyframes').default; 5 | export declare const flipOutY: import('styled-components/dist/models/Keyframes').default; 6 | -------------------------------------------------------------------------------- /dist/animations/zooming_entrances.d.ts: -------------------------------------------------------------------------------- 1 | export declare const zoomIn: import('styled-components/dist/models/Keyframes').default; 2 | export declare const zoomInDown: import('styled-components/dist/models/Keyframes').default; 3 | export declare const zoomInLeft: import('styled-components/dist/models/Keyframes').default; 4 | export declare const zoomInRight: import('styled-components/dist/models/Keyframes').default; 5 | export declare const zoomInUp: import('styled-components/dist/models/Keyframes').default; 6 | -------------------------------------------------------------------------------- /dist/animations/zooming_exits.d.ts: -------------------------------------------------------------------------------- 1 | export declare const zoomOut: import('styled-components/dist/models/Keyframes').default; 2 | export declare const zoomOutDown: import('styled-components/dist/models/Keyframes').default; 3 | export declare const zoomOutLeft: import('styled-components/dist/models/Keyframes').default; 4 | export declare const zoomOutRight: import('styled-components/dist/models/Keyframes').default; 5 | export declare const zoomOutUp: import('styled-components/dist/models/Keyframes').default; 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true, 6 | "esModuleInterop": true, 7 | "module": "ESNext", 8 | "moduleResolution": "Node", 9 | "target": "ES2015", 10 | "jsx": "react-jsx", 11 | "declaration": true, 12 | "sourceMap": true, 13 | "skipLibCheck": true 14 | }, 15 | "include": ["src"], 16 | "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx", "__tests__"] 17 | } 18 | -------------------------------------------------------------------------------- /dist/animations/bouncing_entrances.d.ts: -------------------------------------------------------------------------------- 1 | export declare const bounceIn: import('styled-components/dist/models/Keyframes').default; 2 | export declare const bounceInDown: import('styled-components/dist/models/Keyframes').default; 3 | export declare const bounceInLeft: import('styled-components/dist/models/Keyframes').default; 4 | export declare const bounceInRight: import('styled-components/dist/models/Keyframes').default; 5 | export declare const bounceInUp: import('styled-components/dist/models/Keyframes').default; 6 | -------------------------------------------------------------------------------- /dist/animations/bouncing_exits.d.ts: -------------------------------------------------------------------------------- 1 | export declare const bounceOut: import('styled-components/dist/models/Keyframes').default; 2 | export declare const bounceOutDown: import('styled-components/dist/models/Keyframes').default; 3 | export declare const bounceOutLeft: import('styled-components/dist/models/Keyframes').default; 4 | export declare const bounceOutRight: import('styled-components/dist/models/Keyframes').default; 5 | export declare const bounceOutUp: import('styled-components/dist/models/Keyframes').default; 6 | -------------------------------------------------------------------------------- /dist/animations/rotating_entraces.d.ts: -------------------------------------------------------------------------------- 1 | export declare const rotateIn: import('styled-components/dist/models/Keyframes').default; 2 | export declare const rotateInDownLeft: import('styled-components/dist/models/Keyframes').default; 3 | export declare const rotateInDownRight: import('styled-components/dist/models/Keyframes').default; 4 | export declare const rotateInUpLeft: import('styled-components/dist/models/Keyframes').default; 5 | export declare const rotateInUpRight: import('styled-components/dist/models/Keyframes').default; 6 | -------------------------------------------------------------------------------- /dist/animations/rotating_exits.d.ts: -------------------------------------------------------------------------------- 1 | export declare const rotateOut: import('styled-components/dist/models/Keyframes').default; 2 | export declare const rotateOutDownLeft: import('styled-components/dist/models/Keyframes').default; 3 | export declare const rotateOutDownRight: import('styled-components/dist/models/Keyframes').default; 4 | export declare const rotateOutUpLeft: import('styled-components/dist/models/Keyframes').default; 5 | export declare const rotateOutUpRight: import('styled-components/dist/models/Keyframes').default; 6 | -------------------------------------------------------------------------------- /src/animations/index.ts: -------------------------------------------------------------------------------- 1 | export * from './attention_seekers'; 2 | export * from './back_entrances'; 3 | export * from './back_exits'; 4 | export * from './bouncing_entrances'; 5 | export * from './bouncing_exits'; 6 | export * from './fading_entrances'; 7 | export * from './fading_exits'; 8 | export * from './flippers'; 9 | export * from './lightSpeed'; 10 | export * from './rotating_entraces'; 11 | export * from './rotating_exits'; 12 | export * from './sliding_entrances'; 13 | export * from './sliding_exist'; 14 | export * from './specials'; 15 | export * from './zooming_entrances'; 16 | export * from './zooming_exits'; 17 | -------------------------------------------------------------------------------- /dist/animations/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from './attention_seekers'; 2 | export * from './back_entrances'; 3 | export * from './back_exits'; 4 | export * from './bouncing_entrances'; 5 | export * from './bouncing_exits'; 6 | export * from './fading_entrances'; 7 | export * from './fading_exits'; 8 | export * from './flippers'; 9 | export * from './lightSpeed'; 10 | export * from './rotating_entraces'; 11 | export * from './rotating_exits'; 12 | export * from './sliding_entrances'; 13 | export * from './sliding_exist'; 14 | export * from './specials'; 15 | export * from './zooming_entrances'; 16 | export * from './zooming_exits'; 17 | -------------------------------------------------------------------------------- /src/__tests__/function.test.tsx: -------------------------------------------------------------------------------- 1 | import "@testing-library/jest-dom"; 2 | import { render } from "@testing-library/react"; 3 | import React from "react"; 4 | import { describe, expect, test } from "vitest"; 5 | import { AnimateStyled } from "../index"; 6 | 7 | describe("AnimateStyled Component", () => { 8 | test("renders children correctly", () => { 9 | const { getByText } = render( 10 | Test Animation 11 | ); 12 | const child = getByText("Test Animation"); 13 | expect(child).toBeInTheDocument(); 14 | }); 15 | 16 | test("Component should show 'red' text 'Hello World'", () => { 17 | const { getByText } = render( 18 | 19 | ); 20 | const textElement = getByText("Hello World"); 21 | expect(textElement).toBeInTheDocument(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /src/animations/sliding_exist.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const slideOutDown = keyframes` 4 | from { 5 | transform: translate3d(0, 0, 0); 6 | } 7 | 8 | to { 9 | visibility: hidden; 10 | transform: translate3d(0, 100%, 0); 11 | } 12 | `; 13 | 14 | export const slideOutLeft = keyframes` 15 | from { 16 | transform: translate3d(0, 0, 0); 17 | } 18 | 19 | to { 20 | visibility: hidden; 21 | transform: translate3d(-100%, 0, 0); 22 | } 23 | `; 24 | 25 | export const slideOutRight = keyframes` 26 | from { 27 | transform: translate3d(0, 0, 0); 28 | } 29 | 30 | to { 31 | visibility: hidden; 32 | transform: translate3d(100%, 0, 0); 33 | } 34 | `; 35 | 36 | export const slideOutUp = keyframes` 37 | from { 38 | transform: translate3d(0, 0, 0); 39 | } 40 | 41 | to { 42 | visibility: hidden; 43 | transform: translate3d(0, -100%, 0); 44 | } 45 | `; 46 | -------------------------------------------------------------------------------- /src/animations/sliding_entrances.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const slideInDown = keyframes` 4 | from { 5 | transform: translate3d(0, -100%, 0); 6 | visibility: visible; 7 | } 8 | 9 | to { 10 | transform: translate3d(0, 0, 0); 11 | } 12 | `; 13 | 14 | export const slideInLeft = keyframes` 15 | from { 16 | transform: translate3d(-100%, 0, 0); 17 | visibility: visible; 18 | } 19 | 20 | to { 21 | transform: translate3d(0, 0, 0); 22 | } 23 | `; 24 | 25 | export const slideInRight = keyframes` 26 | from { 27 | transform: translate3d(100%, 0, 0); 28 | visibility: visible; 29 | } 30 | 31 | to { 32 | transform: translate3d(0, 0, 0); 33 | } 34 | `; 35 | 36 | export const slideInUp = keyframes` 37 | from { 38 | transform: translate3d(0, 100%, 0); 39 | visibility: visible; 40 | } 41 | 42 | to { 43 | transform: translate3d(0, 0, 0); 44 | } 45 | `; 46 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import react from "@vitejs/plugin-react"; 3 | import { resolve } from "node:path"; 4 | import { defineConfig } from "vite"; 5 | import dts from "vite-plugin-dts"; 6 | 7 | export default defineConfig({ 8 | plugins: [ 9 | react(), 10 | dts({ 11 | outDir: "dist", 12 | exclude: ["**/__tests__/**", "**/*.test.*"], 13 | }), 14 | ], 15 | build: { 16 | lib: { 17 | entry: resolve(__dirname, "src/index.tsx"), 18 | name: "AnimateStyled", 19 | formats: ["es", "cjs"], 20 | fileName: (format) => `index.${format}.js`, 21 | }, 22 | rollupOptions: { 23 | external: ["react", "styled-components"], 24 | input: { 25 | main: resolve(__dirname, "src/index.tsx"), 26 | }, 27 | output: { 28 | globals: { 29 | react: "React", 30 | "styled-components": "styled", 31 | }, 32 | }, 33 | }, 34 | }, 35 | test: { 36 | environment: "jsdom", 37 | globals: true, 38 | }, 39 | }); 40 | -------------------------------------------------------------------------------- /src/animations/rotating_exits.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const rotateOut = keyframes` 4 | from { 5 | opacity: 1; 6 | } 7 | 8 | to { 9 | transform: rotate3d(0, 0, 1, 200deg); 10 | opacity: 0; 11 | } 12 | `; 13 | 14 | export const rotateOutDownLeft = keyframes` 15 | from { 16 | opacity: 1; 17 | } 18 | 19 | to { 20 | transform: rotate3d(0, 0, 1, 45deg); 21 | opacity: 0; 22 | } 23 | `; 24 | 25 | export const rotateOutDownRight = keyframes` 26 | from { 27 | opacity: 1; 28 | } 29 | 30 | to { 31 | transform: rotate3d(0, 0, 1, -45deg); 32 | opacity: 0; 33 | } 34 | `; 35 | 36 | export const rotateOutUpLeft = keyframes` 37 | from { 38 | opacity: 1; 39 | } 40 | 41 | to { 42 | transform: rotate3d(0, 0, 1, -45deg); 43 | opacity: 0; 44 | } 45 | `; 46 | 47 | export const rotateOutUpRight = keyframes` 48 | from { 49 | opacity: 1; 50 | } 51 | 52 | to { 53 | transform: rotate3d(0, 0, 1, 90deg); 54 | opacity: 0; 55 | } 56 | `; 57 | -------------------------------------------------------------------------------- /dist/animations/attention_seekers.d.ts: -------------------------------------------------------------------------------- 1 | export declare const bounce: import('styled-components/dist/models/Keyframes').default; 2 | export declare const flash: import('styled-components/dist/models/Keyframes').default; 3 | export declare const headShake: import('styled-components/dist/models/Keyframes').default; 4 | export declare const heartBeat: import('styled-components/dist/models/Keyframes').default; 5 | export declare const jello: import('styled-components/dist/models/Keyframes').default; 6 | export declare const pulse: import('styled-components/dist/models/Keyframes').default; 7 | export declare const rubberBand: import('styled-components/dist/models/Keyframes').default; 8 | export declare const shake: import('styled-components/dist/models/Keyframes').default; 9 | export declare const shakeX: import('styled-components/dist/models/Keyframes').default; 10 | export declare const shakeY: import('styled-components/dist/models/Keyframes').default; 11 | export declare const swing: import('styled-components/dist/models/Keyframes').default; 12 | export declare const tada: import('styled-components/dist/models/Keyframes').default; 13 | export declare const wobble: import('styled-components/dist/models/Keyframes').default; 14 | -------------------------------------------------------------------------------- /src/animations/lightSpeed.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const lightSpeedInLeft = keyframes` 4 | from { 5 | transform: translate3d(-100%, 0, 0) skewX(30deg); 6 | opacity: 0; 7 | } 8 | 9 | 60% { 10 | transform: skewX(-20deg); 11 | opacity: 1; 12 | } 13 | 14 | 80% { 15 | transform: skewX(5deg); 16 | } 17 | 18 | to { 19 | transform: translate3d(0, 0, 0); 20 | } 21 | `; 22 | 23 | export const lightSpeedInRight = keyframes` 24 | from { 25 | transform: translate3d(100%, 0, 0) skewX(-30deg); 26 | opacity: 0; 27 | } 28 | 29 | 60% { 30 | transform: skewX(20deg); 31 | opacity: 1; 32 | } 33 | 34 | 80% { 35 | transform: skewX(-5deg); 36 | } 37 | 38 | to { 39 | transform: translate3d(0, 0, 0); 40 | } 41 | `; 42 | 43 | export const lightSpeedOutLeft = keyframes` 44 | from { 45 | opacity: 1; 46 | } 47 | 48 | to { 49 | transform: translate3d(-100%, 0, 0) skewX(-30deg); 50 | opacity: 0; 51 | } 52 | `; 53 | 54 | export const lightSpeedOutRight = keyframes` 55 | from { 56 | opacity: 1; 57 | } 58 | 59 | to { 60 | transform: translate3d(100%, 0, 0) skewX(30deg); 61 | opacity: 0; 62 | } 63 | `; 64 | -------------------------------------------------------------------------------- /src/animations/rotating_entraces.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const rotateIn = keyframes` 4 | from { 5 | transform: rotate3d(0, 0, 1, -200deg); 6 | opacity: 0; 7 | } 8 | 9 | to { 10 | transform: translate3d(0, 0, 0); 11 | opacity: 1; 12 | } 13 | `; 14 | 15 | export const rotateInDownLeft = keyframes` 16 | from { 17 | transform: rotate3d(0, 0, 1, -45deg); 18 | opacity: 0; 19 | } 20 | 21 | to { 22 | transform: translate3d(0, 0, 0); 23 | opacity: 1; 24 | } 25 | `; 26 | 27 | export const rotateInDownRight = keyframes` 28 | from { 29 | transform: rotate3d(0, 0, 1, 45deg); 30 | opacity: 0; 31 | } 32 | 33 | to { 34 | transform: translate3d(0, 0, 0); 35 | opacity: 1; 36 | } 37 | `; 38 | 39 | export const rotateInUpLeft = keyframes` 40 | from { 41 | transform: rotate3d(0, 0, 1, 45deg); 42 | opacity: 0; 43 | } 44 | 45 | to { 46 | transform: translate3d(0, 0, 0); 47 | opacity: 1; 48 | } 49 | `; 50 | 51 | export const rotateInUpRight = keyframes` 52 | from { 53 | transform: rotate3d(0, 0, 1, -90deg); 54 | opacity: 0; 55 | } 56 | 57 | to { 58 | transform: translate3d(0, 0, 0); 59 | opacity: 1; 60 | } 61 | `; 62 | -------------------------------------------------------------------------------- /dist/animations/fading_entrances.d.ts: -------------------------------------------------------------------------------- 1 | export declare const fadeIn: import('styled-components/dist/models/Keyframes').default; 2 | export declare const fadeInBottomLeft: import('styled-components/dist/models/Keyframes').default; 3 | export declare const fadeInBottomRight: import('styled-components/dist/models/Keyframes').default; 4 | export declare const fadeInDown: import('styled-components/dist/models/Keyframes').default; 5 | export declare const fadeInDownBig: import('styled-components/dist/models/Keyframes').default; 6 | export declare const fadeInLeft: import('styled-components/dist/models/Keyframes').default; 7 | export declare const fadeInLeftBig: import('styled-components/dist/models/Keyframes').default; 8 | export declare const fadeInRight: import('styled-components/dist/models/Keyframes').default; 9 | export declare const fadeInRightBig: import('styled-components/dist/models/Keyframes').default; 10 | export declare const fadeInTopLeft: import('styled-components/dist/models/Keyframes').default; 11 | export declare const fadeInTopRight: import('styled-components/dist/models/Keyframes').default; 12 | export declare const fadeInUp: import('styled-components/dist/models/Keyframes').default; 13 | export declare const fadeInUpBig: import('styled-components/dist/models/Keyframes').default; 14 | -------------------------------------------------------------------------------- /dist/animations/fading_exits.d.ts: -------------------------------------------------------------------------------- 1 | export declare const fadeOut: import('styled-components/dist/models/Keyframes').default; 2 | export declare const fadeOutBottomLeft: import('styled-components/dist/models/Keyframes').default; 3 | export declare const fadeOutBottomRight: import('styled-components/dist/models/Keyframes').default; 4 | export declare const fadeOutDown: import('styled-components/dist/models/Keyframes').default; 5 | export declare const fadeOutDownBig: import('styled-components/dist/models/Keyframes').default; 6 | export declare const fadeOutLeft: import('styled-components/dist/models/Keyframes').default; 7 | export declare const fadeOutLeftBig: import('styled-components/dist/models/Keyframes').default; 8 | export declare const fadeOutRight: import('styled-components/dist/models/Keyframes').default; 9 | export declare const fadeOutRightBig: import('styled-components/dist/models/Keyframes').default; 10 | export declare const fadeOutTopLeft: import('styled-components/dist/models/Keyframes').default; 11 | export declare const fadeOutTopRight: import('styled-components/dist/models/Keyframes').default; 12 | export declare const fadeOutUp: import('styled-components/dist/models/Keyframes').default; 13 | export declare const fadeOutUpBig: import('styled-components/dist/models/Keyframes').default; 14 | -------------------------------------------------------------------------------- /src/animations/back_entrances.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const backInDown = keyframes` 4 | 0% { 5 | transform: translateY(-1200px) scale(0.7); 6 | opacity: 0.7; 7 | } 8 | 9 | 80% { 10 | transform: translateY(0px) scale(0.7); 11 | opacity: 0.7; 12 | } 13 | 14 | 100% { 15 | transform: scale(1); 16 | opacity: 1; 17 | } 18 | `; 19 | 20 | export const backInLeft = keyframes` 21 | 0% { 22 | transform: translateX(-2000px) scale(0.7); 23 | opacity: 0.7; 24 | } 25 | 26 | 80% { 27 | transform: translateX(0px) scale(0.7); 28 | opacity: 0.7; 29 | } 30 | 31 | 100% { 32 | transform: scale(1); 33 | opacity: 1; 34 | } 35 | `; 36 | 37 | export const backInRight = keyframes` 38 | 0% { 39 | transform: translateX(2000px) scale(0.7); 40 | opacity: 0.7; 41 | } 42 | 43 | 80% { 44 | transform: translateX(0px) scale(0.7); 45 | opacity: 0.7; 46 | } 47 | 48 | 100% { 49 | transform: scale(1); 50 | opacity: 1; 51 | } 52 | `; 53 | 54 | export const backInUp = keyframes` 55 | 0% { 56 | transform: translateY(1200px) scale(0.7); 57 | opacity: 0.7; 58 | } 59 | 60 | 80% { 61 | transform: translateY(0px) scale(0.7); 62 | opacity: 0.7; 63 | } 64 | 65 | 100% { 66 | transform: scale(1); 67 | opacity: 1; 68 | } 69 | `; 70 | -------------------------------------------------------------------------------- /src/animations/back_exits.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const backOutDown = keyframes` 4 | 0% { 5 | transform: scale(1); 6 | opacity: 1; 7 | } 8 | 9 | 20% { 10 | transform: translateY(0px) scale(0.7); 11 | opacity: 0.7; 12 | } 13 | 14 | 100% { 15 | transform: translateY(700px) scale(0.7); 16 | opacity: 0.7; 17 | } 18 | `; 19 | 20 | export const backOutLeft = keyframes` 21 | 0% { 22 | transform: scale(1); 23 | opacity: 1; 24 | } 25 | 26 | 20% { 27 | transform: translateX(0px) scale(0.7); 28 | opacity: 0.7; 29 | } 30 | 31 | 100% { 32 | transform: translateX(-2000px) scale(0.7); 33 | opacity: 0.7; 34 | } 35 | `; 36 | 37 | export const backOutRight = keyframes` 38 | 0% { 39 | transform: scale(1); 40 | opacity: 1; 41 | } 42 | 43 | 20% { 44 | transform: translateX(0px) scale(0.7); 45 | opacity: 0.7; 46 | } 47 | 48 | 100% { 49 | transform: translateX(2000px) scale(0.7); 50 | opacity: 0.7; 51 | } 52 | `; 53 | 54 | export const backOutUp = keyframes` 55 | 0% { 56 | transform: scale(1); 57 | opacity: 1; 58 | } 59 | 60 | 20% { 61 | transform: translateY(0px) scale(0.7); 62 | opacity: 0.7; 63 | } 64 | 65 | 100% { 66 | transform: translateY(-700px) scale(0.7); 67 | opacity: 0.7; 68 | } 69 | `; 70 | -------------------------------------------------------------------------------- /src/animations/specials.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const rollIn = keyframes` 4 | from { 5 | opacity: 0; 6 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 7 | } 8 | 9 | to { 10 | opacity: 1; 11 | transform: translate3d(0, 0, 0); 12 | } 13 | `; 14 | 15 | export const rollOut = keyframes` 16 | from { 17 | opacity: 1; 18 | } 19 | 20 | to { 21 | opacity: 0; 22 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 23 | } 24 | `; 25 | 26 | export const hinge = keyframes` 27 | 0% { 28 | animation-timing-function: ease-in-out; 29 | } 30 | 31 | 20%, 32 | 60% { 33 | transform: rotate3d(0, 0, 1, 80deg); 34 | animation-timing-function: ease-in-out; 35 | } 36 | 37 | 40%, 38 | 80% { 39 | transform: rotate3d(0, 0, 1, 60deg); 40 | animation-timing-function: ease-in-out; 41 | opacity: 1; 42 | } 43 | 44 | to { 45 | transform: translate3d(0, 700px, 0); 46 | opacity: 0; 47 | } 48 | `; 49 | 50 | export const jackInTheBox = keyframes` 51 | from { 52 | opacity: 0; 53 | transform: scale(0.1) rotate(30deg); 54 | transform-origin: center bottom; 55 | } 56 | 57 | 50% { 58 | transform: rotate(-10deg); 59 | } 60 | 61 | 70% { 62 | transform: rotate(3deg); 63 | } 64 | 65 | to { 66 | opacity: 1; 67 | transform: scale(1); 68 | } 69 | `; 70 | -------------------------------------------------------------------------------- /src/animations/bouncing_exits.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const bounceOut = keyframes` 4 | 20% { 5 | transform: scale3d(0.9, 0.9, 0.9); 6 | } 7 | 8 | 50%, 9 | 55% { 10 | opacity: 1; 11 | transform: scale3d(1.1, 1.1, 1.1); 12 | } 13 | 14 | to { 15 | opacity: 0; 16 | transform: scale3d(0.3, 0.3, 0.3); 17 | } 18 | `; 19 | 20 | export const bounceOutDown = keyframes` 21 | 20% { 22 | transform: translate3d(0, 10px, 0) scaleY(0.985); 23 | } 24 | 25 | 40%, 26 | 45% { 27 | opacity: 1; 28 | transform: translate3d(0, -20px, 0) scaleY(0.9); 29 | } 30 | 31 | to { 32 | opacity: 0; 33 | transform: translate3d(0, 2000px, 0) scaleY(3); 34 | } 35 | `; 36 | 37 | export const bounceOutLeft = keyframes` 38 | 20% { 39 | opacity: 1; 40 | transform: translate3d(20px, 0, 0) scaleX(0.9); 41 | } 42 | 43 | to { 44 | opacity: 0; 45 | transform: translate3d(-2000px, 0, 0) scaleX(2); 46 | } 47 | `; 48 | 49 | export const bounceOutRight = keyframes` 50 | 20% { 51 | opacity: 1; 52 | transform: translate3d(-20px, 0, 0) scaleX(0.9); 53 | } 54 | 55 | to { 56 | opacity: 0; 57 | transform: translate3d(2000px, 0, 0) scaleX(2); 58 | } 59 | `; 60 | 61 | export const bounceOutUp = keyframes` 62 | 20% { 63 | transform: translate3d(0, -10px, 0) scaleY(0.985); 64 | } 65 | 66 | 40%, 67 | 45% { 68 | opacity: 1; 69 | transform: translate3d(0, 20px, 0) scaleY(0.9); 70 | } 71 | 72 | to { 73 | opacity: 0; 74 | transform: translate3d(0, -2000px, 0) scaleY(3); 75 | } 76 | `; 77 | -------------------------------------------------------------------------------- /src/animations/zooming_exits.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const zoomOut = keyframes` 4 | from { 5 | opacity: 1; 6 | } 7 | 8 | 50% { 9 | opacity: 0; 10 | transform: scale3d(0.3, 0.3, 0.3); 11 | } 12 | 13 | to { 14 | opacity: 0; 15 | } 16 | `; 17 | 18 | export const zoomOutDown = keyframes` 19 | 40% { 20 | opacity: 1; 21 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 22 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 23 | } 24 | 25 | to { 26 | opacity: 0; 27 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); 28 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 29 | } 30 | `; 31 | 32 | export const zoomOutLeft = keyframes` 33 | 40% { 34 | opacity: 1; 35 | transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); 36 | } 37 | 38 | to { 39 | opacity: 0; 40 | transform: scale(0.1) translate3d(-2000px, 0, 0); 41 | } 42 | `; 43 | 44 | export const zoomOutRight = keyframes` 45 | 40% { 46 | opacity: 1; 47 | transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); 48 | } 49 | 50 | to { 51 | opacity: 0; 52 | transform: scale(0.1) translate3d(2000px, 0, 0); 53 | } 54 | `; 55 | 56 | export const zoomOutUp = keyframes` 57 | 40% { 58 | opacity: 1; 59 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 60 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 61 | } 62 | 63 | to { 64 | opacity: 0; 65 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); 66 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 67 | } 68 | `; 69 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate-styled", 3 | "version": "3.0.3", 4 | "description": "library for animations CSS in react with styled-components", 5 | "type": "module", 6 | "files": [ 7 | "dist" 8 | ], 9 | "main": "./dist/index.cjs.js", 10 | "module": "./dist/index.es.js", 11 | "types": "./dist/index.d.ts", 12 | "exports": { 13 | ".": { 14 | "require": "./dist/index.cjs.js", 15 | "import": "./dist/index.es.js", 16 | "types": "./dist/index.d.ts" 17 | } 18 | }, 19 | "scripts": { 20 | "build": "vite build", 21 | "test": "vitest" 22 | }, 23 | "peerDependencies": { 24 | "react": "18.x", 25 | "styled-components": "6.x" 26 | }, 27 | "devDependencies": { 28 | "@testing-library/jest-dom": "^6.5.0", 29 | "@testing-library/react": "16.0.1", 30 | "@types/react": "18.3.8", 31 | "@types/react-dom": "18.3.0", 32 | "@types/styled-components": "5.1.34", 33 | "@vitejs/plugin-react": "^4.3.1", 34 | "jsdom": "^25.0.1", 35 | "react": "18.3.1", 36 | "react-dom": "18.3.1", 37 | "styled-components": "6.1.13", 38 | "typescript": "5.6.2", 39 | "vite": "^5.4.7", 40 | "vite-plugin-dts": "^4.2.1", 41 | "vitest": "^2.1.1" 42 | }, 43 | "author": "Carlos Manotas (https://carlosmanotas.com/)", 44 | "repository": { 45 | "type": "git", 46 | "url": "https://github.com/CarlosManotas/animate-styled.git" 47 | }, 48 | "bugs": { 49 | "url": "https://github.com/CarlosManotas/animate-styled.git/issues" 50 | }, 51 | "homepage": "https://github.com/CarlosManotas/animate-styled.git/#readme", 52 | "license": "MIT", 53 | "keywords": [ 54 | "react-component", 55 | "react", 56 | "styled-components", 57 | "css", 58 | "animation", 59 | "animate" 60 | ], 61 | "packageManager": "pnpm@9.11.0+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b" 62 | } 63 | -------------------------------------------------------------------------------- /src/animations/zooming_entrances.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const zoomIn = keyframes` 4 | from { 5 | opacity: 0; 6 | transform: scale3d(0.3, 0.3, 0.3); 7 | } 8 | 9 | 50% { 10 | opacity: 1; 11 | } 12 | `; 13 | 14 | export const zoomInDown = keyframes` 15 | from { 16 | opacity: 0; 17 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); 18 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 19 | } 20 | 21 | 60% { 22 | opacity: 1; 23 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 24 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 25 | } 26 | `; 27 | 28 | export const zoomInLeft = keyframes` 29 | from { 30 | opacity: 0; 31 | transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); 32 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 33 | } 34 | 35 | 60% { 36 | opacity: 1; 37 | transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); 38 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 39 | } 40 | `; 41 | 42 | export const zoomInRight = keyframes` 43 | from { 44 | opacity: 0; 45 | transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); 46 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 47 | } 48 | 49 | 60% { 50 | opacity: 1; 51 | transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); 52 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 53 | } 54 | `; 55 | 56 | export const zoomInUp = keyframes` 57 | from { 58 | opacity: 0; 59 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); 60 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 61 | } 62 | 63 | 60% { 64 | opacity: 1; 65 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 66 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 67 | } 68 | `; 69 | -------------------------------------------------------------------------------- /src/animations/fading_exits.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const fadeOut = keyframes` 4 | from { 5 | opacity: 1; 6 | } 7 | 8 | to { 9 | opacity: 0; 10 | } 11 | `; 12 | 13 | export const fadeOutBottomLeft = keyframes` 14 | from { 15 | opacity: 1; 16 | transform: translate3d(0, 0, 0); 17 | } 18 | to { 19 | opacity: 0; 20 | transform: translate3d(-100%, 100%, 0); 21 | } 22 | `; 23 | 24 | export const fadeOutBottomRight = keyframes` 25 | from { 26 | opacity: 1; 27 | transform: translate3d(0, 0, 0); 28 | } 29 | to { 30 | opacity: 0; 31 | transform: translate3d(100%, 100%, 0); 32 | } 33 | `; 34 | 35 | export const fadeOutDown = keyframes` 36 | from { 37 | opacity: 1; 38 | } 39 | 40 | to { 41 | opacity: 0; 42 | transform: translate3d(0, 100%, 0); 43 | } 44 | `; 45 | 46 | export const fadeOutDownBig = keyframes` 47 | from { 48 | opacity: 1; 49 | } 50 | 51 | to { 52 | opacity: 0; 53 | transform: translate3d(0, 2000px, 0); 54 | } 55 | `; 56 | 57 | export const fadeOutLeft = keyframes` 58 | from { 59 | opacity: 1; 60 | } 61 | 62 | to { 63 | opacity: 0; 64 | transform: translate3d(-100%, 0, 0); 65 | } 66 | `; 67 | 68 | export const fadeOutLeftBig = keyframes` 69 | from { 70 | opacity: 1; 71 | } 72 | 73 | to { 74 | opacity: 0; 75 | transform: translate3d(-2000px, 0, 0); 76 | } 77 | `; 78 | 79 | export const fadeOutRight = keyframes` 80 | from { 81 | opacity: 1; 82 | } 83 | 84 | to { 85 | opacity: 0; 86 | transform: translate3d(100%, 0, 0); 87 | } 88 | `; 89 | 90 | export const fadeOutRightBig = keyframes` 91 | from { 92 | opacity: 1; 93 | } 94 | 95 | to { 96 | opacity: 0; 97 | transform: translate3d(2000px, 0, 0); 98 | } 99 | `; 100 | 101 | export const fadeOutTopLeft = keyframes` 102 | from { 103 | opacity: 1; 104 | transform: translate3d(0, 0, 0); 105 | } 106 | to { 107 | opacity: 0; 108 | transform: translate3d(-100%, -100%, 0); 109 | } 110 | `; 111 | 112 | export const fadeOutTopRight = keyframes` 113 | from { 114 | opacity: 1; 115 | transform: translate3d(0, 0, 0); 116 | } 117 | to { 118 | opacity: 0; 119 | transform: translate3d(100%, -100%, 0); 120 | } 121 | `; 122 | 123 | export const fadeOutUp = keyframes` 124 | from { 125 | opacity: 1; 126 | } 127 | 128 | to { 129 | opacity: 0; 130 | transform: translate3d(0, -100%, 0); 131 | } 132 | `; 133 | 134 | export const fadeOutUpBig = keyframes` 135 | from { 136 | opacity: 1; 137 | } 138 | 139 | to { 140 | opacity: 0; 141 | transform: translate3d(0, -2000px, 0); 142 | } 143 | `; 144 | -------------------------------------------------------------------------------- /src/animations/flippers.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const flip = keyframes` 4 | from { 5 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); 6 | animation-timing-function: ease-out; 7 | } 8 | 9 | 40% { 10 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) 11 | rotate3d(0, 1, 0, -190deg); 12 | animation-timing-function: ease-out; 13 | } 14 | 15 | 50% { 16 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) 17 | rotate3d(0, 1, 0, -170deg); 18 | animation-timing-function: ease-in; 19 | } 20 | 21 | 80% { 22 | transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) 23 | rotate3d(0, 1, 0, 0deg); 24 | animation-timing-function: ease-in; 25 | } 26 | 27 | to { 28 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); 29 | animation-timing-function: ease-in; 30 | } 31 | `; 32 | 33 | export const flipInX = keyframes` 34 | from { 35 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 36 | animation-timing-function: ease-in; 37 | opacity: 0; 38 | } 39 | 40 | 40% { 41 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 42 | animation-timing-function: ease-in; 43 | } 44 | 45 | 60% { 46 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 47 | opacity: 1; 48 | } 49 | 50 | 80% { 51 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 52 | } 53 | 54 | to { 55 | transform: perspective(400px); 56 | } 57 | `; 58 | 59 | export const flipInY = keyframes` 60 | from { 61 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 62 | animation-timing-function: ease-in; 63 | opacity: 0; 64 | } 65 | 66 | 40% { 67 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 68 | animation-timing-function: ease-in; 69 | } 70 | 71 | 60% { 72 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 73 | opacity: 1; 74 | } 75 | 76 | 80% { 77 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 78 | } 79 | 80 | to { 81 | transform: perspective(400px); 82 | } 83 | `; 84 | 85 | export const flipOutX = keyframes` 86 | from { 87 | transform: perspective(400px); 88 | } 89 | 90 | 30% { 91 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 92 | opacity: 1; 93 | } 94 | 95 | to { 96 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 97 | opacity: 0; 98 | } 99 | `; 100 | 101 | export const flipOutY = keyframes` 102 | from { 103 | transform: perspective(400px); 104 | } 105 | 106 | 30% { 107 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 108 | opacity: 1; 109 | } 110 | 111 | to { 112 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 113 | opacity: 0; 114 | } 115 | `; 116 | -------------------------------------------------------------------------------- /src/animations/fading_entrances.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const fadeIn = keyframes` 4 | from { 5 | opacity: 0; 6 | } 7 | 8 | to { 9 | opacity: 1; 10 | } 11 | `; 12 | 13 | export const fadeInBottomLeft = keyframes` 14 | from { 15 | opacity: 0; 16 | transform: translate3d(-100%, 100%, 0); 17 | } 18 | to { 19 | opacity: 1; 20 | transform: translate3d(0, 0, 0); 21 | } 22 | `; 23 | 24 | export const fadeInBottomRight = keyframes` 25 | from { 26 | opacity: 0; 27 | transform: translate3d(100%, 100%, 0); 28 | } 29 | to { 30 | opacity: 1; 31 | transform: translate3d(0, 0, 0); 32 | } 33 | `; 34 | 35 | export const fadeInDown = keyframes` 36 | from { 37 | opacity: 0; 38 | transform: translate3d(0, -100%, 0); 39 | } 40 | 41 | to { 42 | opacity: 1; 43 | transform: translate3d(0, 0, 0); 44 | } 45 | `; 46 | 47 | export const fadeInDownBig = keyframes` 48 | from { 49 | opacity: 0; 50 | transform: translate3d(0, -2000px, 0); 51 | } 52 | 53 | to { 54 | opacity: 1; 55 | transform: translate3d(0, 0, 0); 56 | } 57 | `; 58 | 59 | export const fadeInLeft = keyframes` 60 | from { 61 | opacity: 0; 62 | transform: translate3d(-100%, 0, 0); 63 | } 64 | 65 | to { 66 | opacity: 1; 67 | transform: translate3d(0, 0, 0); 68 | } 69 | `; 70 | 71 | export const fadeInLeftBig = keyframes` 72 | from { 73 | opacity: 0; 74 | transform: translate3d(-2000px, 0, 0); 75 | } 76 | 77 | to { 78 | opacity: 1; 79 | transform: translate3d(0, 0, 0); 80 | } 81 | `; 82 | 83 | export const fadeInRight = keyframes` 84 | from { 85 | opacity: 0; 86 | transform: translate3d(100%, 0, 0); 87 | } 88 | 89 | to { 90 | opacity: 1; 91 | transform: translate3d(0, 0, 0); 92 | } 93 | `; 94 | 95 | export const fadeInRightBig = keyframes` 96 | from { 97 | opacity: 0; 98 | transform: translate3d(2000px, 0, 0); 99 | } 100 | 101 | to { 102 | opacity: 1; 103 | transform: translate3d(0, 0, 0); 104 | } 105 | `; 106 | 107 | export const fadeInTopLeft = keyframes` 108 | from { 109 | opacity: 0; 110 | transform: translate3d(-100%, -100%, 0); 111 | } 112 | to { 113 | opacity: 1; 114 | transform: translate3d(0, 0, 0); 115 | } 116 | `; 117 | 118 | export const fadeInTopRight = keyframes` 119 | from { 120 | opacity: 0; 121 | transform: translate3d(100%, -100%, 0); 122 | } 123 | to { 124 | opacity: 1; 125 | transform: translate3d(0, 0, 0); 126 | } 127 | `; 128 | 129 | export const fadeInUp = keyframes` 130 | from { 131 | opacity: 0; 132 | transform: translate3d(0, 100%, 0); 133 | } 134 | 135 | to { 136 | opacity: 1; 137 | transform: translate3d(0, 0, 0); 138 | } 139 | `; 140 | 141 | export const fadeInUpBig = keyframes` 142 | from { 143 | opacity: 0; 144 | transform: translate3d(0, 2000px, 0); 145 | } 146 | 147 | to { 148 | opacity: 1; 149 | transform: translate3d(0, 0, 0); 150 | } 151 | `; 152 | -------------------------------------------------------------------------------- /dist/index.d.ts: -------------------------------------------------------------------------------- 1 | import type * as React from "react"; 2 | /** 3 | * @keyframes duration 4 | * | timing-function 5 | * | delay 6 | * | iteration-count 7 | * | direction 8 | * | fill-mode 9 | * | play-state 10 | * | name 11 | */ 12 | type AttentionSeekers = "bounce" | "flash" | "headShake" | "heartBeat" | "jello" | "pulse" | "rubberBand" | "shake" | "shakeX" | "shakeY" | "swing" | "tada" | "wobble"; 13 | type BackEntrances = "backInDown" | "backInLeft" | "backInRight" | "backInUp"; 14 | type BackExits = "backOutDown" | "backOutLeft" | "backOutRight" | "backOutUp"; 15 | type BouncingEntrances = "bounceIn" | "bounceInDown" | "bounceInLeft" | "bounceInRight" | "bounceInUp"; 16 | type BouncingExits = "bounceOut" | "bounceOutDown" | "bounceOutLeft" | "bounceOutRight" | "bounceOutUp"; 17 | type FadingEntrances = "fadeIn" | "fadeInBottomLeft" | "fadeInBottomRight" | "fadeInDown" | "fadeInDownBig" | "fadeInLeft" | "fadeInLeftBig" | "fadeInRight" | "fadeInRightBig" | "fadeInTopLeft" | "fadeInTopRight" | "fadeInUp" | "fadeInUpBig"; 18 | type FadingExits = "fadeOut" | "fadeOutBottomLeft" | "fadeOutBottomRight" | "fadeOutDown" | "fadeOutDownBig" | "fadeOutLeft" | "fadeOutLeftBig" | "fadeOutRight" | "fadeOutRightBig" | "fadeOutTopLeft" | "fadeOutTopRight" | "fadeOutUp" | "fadeOutUpBig"; 19 | type Flippers = "flip" | "flipInX" | "flipInY" | "flipOutX" | "flipOutY"; 20 | type LightSpeed = "lightSpeedInLeft" | "lightSpeedInRight" | "lightSpeedOutLeft" | "lightSpeedOutRight"; 21 | type RotatingEntrances = "rotateIn" | "rotateInDownLeft" | "rotateInDownRight" | "rotateInUpLeft" | "rotateInUpRight"; 22 | type RotatingExits = "rotateOut" | "rotateOutDownLeft" | "rotateOutDownRight" | "rotateOutUpLeft" | "rotateOutUpRight"; 23 | type SlidingEntrances = "slideInDown" | "slideInLeft" | "slideInRight" | "slideInUp"; 24 | type SlidingExits = "slideOutDown" | "slideOutLeft" | "slideOutRight" | "slideOutUp"; 25 | type Specials = "hinge" | "jackInTheBox" | "rollIn" | "rollOut"; 26 | type ZoomingEntrances = "zoomIn" | "zoomInDown" | "zoomInLeft" | "zoomInRight" | "zoomInUp"; 27 | type ZoomingExits = "zoomOut" | "zoomOutDown" | "zoomOutLeft" | "zoomOutRight" | "zoomOutUp"; 28 | type NamesAnimation = AttentionSeekers | BackEntrances | BackExits | BouncingEntrances | BouncingExits | FadingEntrances | FadingExits | Flippers | LightSpeed | RotatingEntrances | RotatingExits | SlidingEntrances | SlidingExits | Specials | ZoomingEntrances | ZoomingExits; 29 | type TimingFuctionValues = "ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | "step-start" | "step-end"; 30 | interface AnimationProps { 31 | name: NamesAnimation; 32 | duration?: string; 33 | timingFunction?: TimingFuctionValues | string; 34 | delay?: string; 35 | iterationCount?: number | "infinite"; 36 | direction?: string; 37 | fillMode?: string; 38 | playState?: string; 39 | } 40 | interface AnimateStyledProps extends AnimationProps { 41 | transformOrigin?: string; 42 | backfaceVisibility?: string; 43 | opacity?: number; 44 | } 45 | interface AllAnimateProps extends AnimateStyledProps { 46 | style?: React.CSSProperties; 47 | children: React.ReactNode; 48 | } 49 | export declare function AnimateStyled({ name, duration, timingFunction, delay, iterationCount, direction, fillMode, playState, transformOrigin, backfaceVisibility, opacity, children, style, }: AllAnimateProps): import("react/jsx-runtime").JSX.Element; 50 | export {}; 51 | -------------------------------------------------------------------------------- /src/animations/bouncing_entrances.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const bounceIn = keyframes` 4 | from, 5 | 20%, 6 | 40%, 7 | 60%, 8 | 80%, 9 | to { 10 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 11 | } 12 | 13 | 0% { 14 | opacity: 0; 15 | transform: scale3d(0.3, 0.3, 0.3); 16 | } 17 | 18 | 20% { 19 | transform: scale3d(1.1, 1.1, 1.1); 20 | } 21 | 22 | 40% { 23 | transform: scale3d(0.9, 0.9, 0.9); 24 | } 25 | 26 | 60% { 27 | opacity: 1; 28 | transform: scale3d(1.03, 1.03, 1.03); 29 | } 30 | 31 | 80% { 32 | transform: scale3d(0.97, 0.97, 0.97); 33 | } 34 | 35 | to { 36 | opacity: 1; 37 | transform: scale3d(1, 1, 1); 38 | } 39 | `; 40 | 41 | export const bounceInDown = keyframes` 42 | from, 43 | 60%, 44 | 75%, 45 | 90%, 46 | to { 47 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 48 | } 49 | 50 | 0% { 51 | opacity: 0; 52 | transform: translate3d(0, -3000px, 0) scaleY(3); 53 | } 54 | 55 | 60% { 56 | opacity: 1; 57 | transform: translate3d(0, 25px, 0) scaleY(0.9); 58 | } 59 | 60 | 75% { 61 | transform: translate3d(0, -10px, 0) scaleY(0.95); 62 | } 63 | 64 | 90% { 65 | transform: translate3d(0, 5px, 0) scaleY(0.985); 66 | } 67 | 68 | to { 69 | transform: translate3d(0, 0, 0); 70 | } 71 | `; 72 | 73 | export const bounceInLeft = keyframes` 74 | from, 75 | 60%, 76 | 75%, 77 | 90%, 78 | to { 79 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 80 | } 81 | 82 | 0% { 83 | opacity: 0; 84 | transform: translate3d(-3000px, 0, 0) scaleX(3); 85 | } 86 | 87 | 60% { 88 | opacity: 1; 89 | transform: translate3d(25px, 0, 0) scaleX(1); 90 | } 91 | 92 | 75% { 93 | transform: translate3d(-10px, 0, 0) scaleX(0.98); 94 | } 95 | 96 | 90% { 97 | transform: translate3d(5px, 0, 0) scaleX(0.995); 98 | } 99 | 100 | to { 101 | transform: translate3d(0, 0, 0); 102 | } 103 | `; 104 | 105 | export const bounceInRight = keyframes` 106 | from, 107 | 60%, 108 | 75%, 109 | 90%, 110 | to { 111 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 112 | } 113 | 114 | from { 115 | opacity: 0; 116 | transform: translate3d(3000px, 0, 0) scaleX(3); 117 | } 118 | 119 | 60% { 120 | opacity: 1; 121 | transform: translate3d(-25px, 0, 0) scaleX(1); 122 | } 123 | 124 | 75% { 125 | transform: translate3d(10px, 0, 0) scaleX(0.98); 126 | } 127 | 128 | 90% { 129 | transform: translate3d(-5px, 0, 0) scaleX(0.995); 130 | } 131 | 132 | to { 133 | transform: translate3d(0, 0, 0); 134 | } 135 | `; 136 | 137 | export const bounceInUp = keyframes` 138 | from, 139 | 60%, 140 | 75%, 141 | 90%, 142 | to { 143 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 144 | } 145 | 146 | from { 147 | opacity: 0; 148 | transform: translate3d(0, 3000px, 0) scaleY(5); 149 | } 150 | 151 | 60% { 152 | opacity: 1; 153 | transform: translate3d(0, -20px, 0) scaleY(0.9); 154 | } 155 | 156 | 75% { 157 | transform: translate3d(0, 10px, 0) scaleY(0.95); 158 | } 159 | 160 | 90% { 161 | transform: translate3d(0, -5px, 0) scaleY(0.985); 162 | } 163 | 164 | to { 165 | transform: translate3d(0, 0, 0); 166 | } 167 | `; 168 | -------------------------------------------------------------------------------- /src/animations/attention_seekers.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const bounce = keyframes` 4 | from, 5 | 20%, 6 | 53%, 7 | to { 8 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 9 | transform: translate3d(0, 0, 0); 10 | } 11 | 12 | 40%, 13 | 43% { 14 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 15 | transform: translate3d(0, -30px, 0) scaleY(1.1); 16 | } 17 | 18 | 70% { 19 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 20 | transform: translate3d(0, -15px, 0) scaleY(1.05); 21 | } 22 | 23 | 80% { 24 | transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 25 | transform: translate3d(0, 0, 0) scaleY(0.95); 26 | } 27 | 28 | 90% { 29 | transform: translate3d(0, -4px, 0) scaleY(1.02); 30 | } 31 | 32 | `; 33 | 34 | export const flash = keyframes` 35 | from, 50%, to { 36 | opacity: 1; 37 | } 38 | 39 | 25%, 75% { 40 | opacity: 0; 41 | } 42 | `; 43 | 44 | export const headShake = keyframes` 45 | 0% { 46 | transform: translateX(0); 47 | } 48 | 49 | 6.5% { 50 | transform: translateX(-6px) rotateY(-9deg); 51 | } 52 | 53 | 18.5% { 54 | transform: translateX(5px) rotateY(7deg); 55 | } 56 | 57 | 31.5% { 58 | transform: translateX(-3px) rotateY(-5deg); 59 | } 60 | 61 | 43.5% { 62 | transform: translateX(2px) rotateY(3deg); 63 | } 64 | 65 | 50% { 66 | transform: translateX(0); 67 | } 68 | `; 69 | 70 | export const heartBeat = keyframes` 71 | 0% { 72 | transform: scale(1); 73 | } 74 | 75 | 14% { 76 | transform: scale(1.3); 77 | } 78 | 79 | 28% { 80 | transform: scale(1); 81 | } 82 | 83 | 42% { 84 | transform: scale(1.3); 85 | } 86 | 87 | 70% { 88 | transform: scale(1); 89 | } 90 | `; 91 | 92 | export const jello = keyframes` 93 | from, 11.1%, to { 94 | transform: none; 95 | } 96 | 97 | 22.2% { 98 | transform: skewX(-12.5deg) skewY(-12.5deg); 99 | } 100 | 101 | 33.3% { 102 | transform: skewX(6.25deg) skewY(6.25deg); 103 | } 104 | 105 | 44.4% { 106 | transform: skewX(-3.125deg) skewY(-3.125deg); 107 | } 108 | 109 | 55.5% { 110 | transform: skewX(1.5625deg) skewY(1.5625deg); 111 | } 112 | 113 | 66.6% { 114 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 115 | } 116 | 117 | 77.7% { 118 | transform: skewX(0.390625deg) skewY(0.390625deg); 119 | } 120 | 121 | 88.8% { 122 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 123 | } 124 | `; 125 | 126 | export const pulse = keyframes` 127 | from { 128 | transform: scale3d(1, 1, 1); 129 | } 130 | 131 | 50% { 132 | transform: scale3d(1.05, 1.05, 1.05); 133 | } 134 | 135 | to { 136 | transform: scale3d(1, 1, 1); 137 | } 138 | `; 139 | 140 | export const rubberBand = keyframes` 141 | from { 142 | transform: scale3d(1, 1, 1); 143 | } 144 | 145 | 30% { 146 | transform: scale3d(1.25, 0.75, 1); 147 | } 148 | 149 | 40% { 150 | transform: scale3d(0.75, 1.25, 1); 151 | } 152 | 153 | 50% { 154 | transform: scale3d(1.15, 0.85, 1); 155 | } 156 | 157 | 65% { 158 | transform: scale3d(.95, 1.05, 1); 159 | } 160 | 161 | 75% { 162 | transform: scale3d(1.05, .95, 1); 163 | } 164 | 165 | to { 166 | transform: scale3d(1, 1, 1); 167 | } 168 | `; 169 | 170 | export const shake = keyframes` 171 | from, to { 172 | transform: translate3d(0, 0, 0); 173 | } 174 | 175 | 10%, 30%, 50%, 70%, 90% { 176 | transform: translate3d(-10px, 0, 0); 177 | } 178 | 179 | 20%, 40%, 60%, 80% { 180 | transform: translate3d(10px, 0, 0); 181 | } 182 | `; 183 | 184 | export const shakeX = keyframes` 185 | from, 186 | to { 187 | transform: translate3d(0, 0, 0); 188 | } 189 | 190 | 10%, 191 | 30%, 192 | 50%, 193 | 70%, 194 | 90% { 195 | transform: translate3d(-10px, 0, 0); 196 | } 197 | 198 | 20%, 199 | 40%, 200 | 60%, 201 | 80% { 202 | transform: translate3d(10px, 0, 0); 203 | } 204 | `; 205 | 206 | export const shakeY = keyframes` 207 | from, 208 | to { 209 | transform: translate3d(0, 0, 0); 210 | } 211 | 212 | 10%, 213 | 30%, 214 | 50%, 215 | 70%, 216 | 90% { 217 | transform: translate3d(0, -10px, 0); 218 | } 219 | 220 | 20%, 221 | 40%, 222 | 60%, 223 | 80% { 224 | transform: translate3d(0, 10px, 0); 225 | } 226 | `; 227 | 228 | export const swing = keyframes` 229 | 20% { 230 | transform: rotate3d(0, 0, 1, 15deg); 231 | } 232 | 233 | 40% { 234 | transform: rotate3d(0, 0, 1, -10deg); 235 | } 236 | 237 | 60% { 238 | transform: rotate3d(0, 0, 1, 5deg); 239 | } 240 | 241 | 80% { 242 | transform: rotate3d(0, 0, 1, -5deg); 243 | } 244 | 245 | to { 246 | transform: rotate3d(0, 0, 1, 0deg); 247 | } 248 | `; 249 | 250 | export const tada = keyframes` 251 | from { 252 | transform: scale3d(1, 1, 1); 253 | } 254 | 255 | 10%, 20% { 256 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 257 | } 258 | 259 | 30%, 50%, 70%, 90% { 260 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 261 | } 262 | 263 | 40%, 60%, 80% { 264 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 265 | } 266 | 267 | to { 268 | transform: scale3d(1, 1, 1); 269 | } 270 | `; 271 | 272 | export const wobble = keyframes` 273 | from { 274 | transform: translate3d(0, 0, 0); 275 | } 276 | 277 | 15% { 278 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 279 | } 280 | 281 | 30% { 282 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 283 | } 284 | 285 | 45% { 286 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 287 | } 288 | 289 | 60% { 290 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 291 | } 292 | 293 | 75% { 294 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 295 | } 296 | 297 | to { 298 | transform: translate3d(0, 0, 0); 299 | } 300 | `; 301 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import type * as React from "react"; 2 | import { styled, css } from "styled-components"; 3 | import * as allAnimate from "./animations"; 4 | 5 | /** 6 | * @keyframes duration 7 | * | timing-function 8 | * | delay 9 | * | iteration-count 10 | * | direction 11 | * | fill-mode 12 | * | play-state 13 | * | name 14 | */ 15 | 16 | type AttentionSeekers = 17 | | "bounce" 18 | | "flash" 19 | | "headShake" 20 | | "heartBeat" 21 | | "jello" 22 | | "pulse" 23 | | "rubberBand" 24 | | "shake" 25 | | "shakeX" 26 | | "shakeY" 27 | | "swing" 28 | | "tada" 29 | | "wobble"; 30 | 31 | type BackEntrances = "backInDown" | "backInLeft" | "backInRight" | "backInUp"; 32 | 33 | type BackExits = "backOutDown" | "backOutLeft" | "backOutRight" | "backOutUp"; 34 | 35 | type BouncingEntrances = 36 | | "bounceIn" 37 | | "bounceInDown" 38 | | "bounceInLeft" 39 | | "bounceInRight" 40 | | "bounceInUp"; 41 | 42 | type BouncingExits = 43 | | "bounceOut" 44 | | "bounceOutDown" 45 | | "bounceOutLeft" 46 | | "bounceOutRight" 47 | | "bounceOutUp"; 48 | 49 | type FadingEntrances = 50 | | "fadeIn" 51 | | "fadeInBottomLeft" 52 | | "fadeInBottomRight" 53 | | "fadeInDown" 54 | | "fadeInDownBig" 55 | | "fadeInLeft" 56 | | "fadeInLeftBig" 57 | | "fadeInRight" 58 | | "fadeInRightBig" 59 | | "fadeInTopLeft" 60 | | "fadeInTopRight" 61 | | "fadeInUp" 62 | | "fadeInUpBig"; 63 | 64 | type FadingExits = 65 | | "fadeOut" 66 | | "fadeOutBottomLeft" 67 | | "fadeOutBottomRight" 68 | | "fadeOutDown" 69 | | "fadeOutDownBig" 70 | | "fadeOutLeft" 71 | | "fadeOutLeftBig" 72 | | "fadeOutRight" 73 | | "fadeOutRightBig" 74 | | "fadeOutTopLeft" 75 | | "fadeOutTopRight" 76 | | "fadeOutUp" 77 | | "fadeOutUpBig"; 78 | 79 | type Flippers = "flip" | "flipInX" | "flipInY" | "flipOutX" | "flipOutY"; 80 | 81 | type LightSpeed = 82 | | "lightSpeedInLeft" 83 | | "lightSpeedInRight" 84 | | "lightSpeedOutLeft" 85 | | "lightSpeedOutRight"; 86 | 87 | type RotatingEntrances = 88 | | "rotateIn" 89 | | "rotateInDownLeft" 90 | | "rotateInDownRight" 91 | | "rotateInUpLeft" 92 | | "rotateInUpRight"; 93 | 94 | type RotatingExits = 95 | | "rotateOut" 96 | | "rotateOutDownLeft" 97 | | "rotateOutDownRight" 98 | | "rotateOutUpLeft" 99 | | "rotateOutUpRight"; 100 | 101 | type SlidingEntrances = 102 | | "slideInDown" 103 | | "slideInLeft" 104 | | "slideInRight" 105 | | "slideInUp"; 106 | 107 | type SlidingExits = 108 | | "slideOutDown" 109 | | "slideOutLeft" 110 | | "slideOutRight" 111 | | "slideOutUp"; 112 | 113 | type Specials = "hinge" | "jackInTheBox" | "rollIn" | "rollOut"; 114 | 115 | type ZoomingEntrances = 116 | | "zoomIn" 117 | | "zoomInDown" 118 | | "zoomInLeft" 119 | | "zoomInRight" 120 | | "zoomInUp"; 121 | 122 | type ZoomingExits = 123 | | "zoomOut" 124 | | "zoomOutDown" 125 | | "zoomOutLeft" 126 | | "zoomOutRight" 127 | | "zoomOutUp"; 128 | 129 | type NamesAnimation = 130 | | AttentionSeekers 131 | | BackEntrances 132 | | BackExits 133 | | BouncingEntrances 134 | | BouncingExits 135 | | FadingEntrances 136 | | FadingExits 137 | | Flippers 138 | | LightSpeed 139 | | RotatingEntrances 140 | | RotatingExits 141 | | SlidingEntrances 142 | | SlidingExits 143 | | Specials 144 | | ZoomingEntrances 145 | | ZoomingExits; 146 | 147 | const ignoredProps = new Set([ 148 | "backfaceVisibility", 149 | "transformOrigin", 150 | "opacity", 151 | "playState", 152 | "fillMode", 153 | "iterationCount", 154 | "timingFunction", 155 | "delay", 156 | "duration", 157 | "direction", 158 | "name", 159 | ]); 160 | 161 | const setAnimation = (props: AnimationProps) => 162 | css` 163 | animation: ${props.duration} ${props.timingFunction} ${props.delay} 164 | ${props.iterationCount} ${props.direction} ${props.fillMode} 165 | ${props.playState} ${allAnimate[props.name]}; 166 | `; 167 | 168 | const AnimationFlow = styled.div.withConfig({ 169 | shouldForwardProp: (prop) => !ignoredProps.has(prop), 170 | })` 171 | transform-origin: ${(props) => props.transformOrigin}; 172 | backface-visibility: ${(props) => props.backfaceVisibility}; 173 | opacity: ${(props) => props.opacity}; 174 | ${(props) => props.name && setAnimation}; 175 | `; 176 | 177 | type TimingFuctionValues = 178 | | "ease" 179 | | "ease-in" 180 | | "ease-out" 181 | | "ease-in-out" 182 | | "linear" 183 | | "step-start" 184 | | "step-end"; 185 | 186 | interface AnimationProps { 187 | name: NamesAnimation; 188 | duration?: string; 189 | timingFunction?: TimingFuctionValues | string; 190 | delay?: string; 191 | iterationCount?: number | "infinite"; 192 | direction?: string; 193 | fillMode?: string; 194 | playState?: string; 195 | } 196 | 197 | interface AnimateStyledProps extends AnimationProps { 198 | transformOrigin?: string; 199 | backfaceVisibility?: string; 200 | opacity?: number; 201 | } 202 | 203 | interface AllAnimateProps extends AnimateStyledProps { 204 | style?: React.CSSProperties; 205 | children: React.ReactNode; 206 | } 207 | 208 | export function AnimateStyled({ 209 | name = "shake", 210 | duration = "2s", 211 | timingFunction = "linear", 212 | delay = "0s", 213 | iterationCount = "infinite", 214 | direction = "normal", 215 | fillMode = "none", 216 | playState = "running", 217 | transformOrigin = "center", 218 | backfaceVisibility = "hidden", 219 | opacity = 1, 220 | children =

Hello World

, 221 | style, 222 | }: AllAnimateProps) { 223 | return ( 224 | 238 | {children} 239 | 240 | ); 241 | } 242 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AnimateStyled 2 | 3 | [![npm version](https://badge.fury.io/js/animate-styled.svg)](https://badge.fury.io/js/animate-styled) 4 | [![npm](https://img.shields.io/npm/dt/animate-styled.svg)](https://npmcharts.com/compare/animate-styled?minimal=true) 5 | ![MIT](https://img.shields.io/dub/l/vibe-d.svg) 6 | 7 | *small contribution for those who work with react and styled-components* 8 | 9 | `AnimateStyled` is just a library based on the great work done by the people of [animate.css](https://github.com/daneden/animate.css) led to the stack of 10 | [`react`](https://facebook.github.io/react/) and [`styled-components`](https://www.styled-components.com/). 11 | 12 | ## Installation 13 | 14 | via yarn, just follow these simple commands: 15 | 16 | ```bash 17 | $ yarn add animate-styled 18 | ``` 19 | or via npm: 20 | 21 | ```bash 22 | $ npm install animate-styled --save 23 | ``` 24 | 25 | ## Basic use 26 | 27 | import in your file `js` 28 | 29 | ```javascript 30 | ... 31 | import { AnimateStyled } from "animate-styled" 32 | ... 33 | render(){ 34 | return( 35 | 36 |

Mi contenido

/* children is required */ 37 | 38 | ) 39 | } 40 | ``` 41 | ## Properties 42 | 43 | | Name `props` | Default | Type | Values | 44 | |-----------------|---------|-------|----------| 45 | | name | shake | String | names of animations | 46 | | duration | 2s | String | 1s, 300ms... | 47 | | timingFunction | linear | String | ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end | 48 | | delay | 0s | String | 1s, 300ms... | 49 | | iterationCount | infinite | String, Number | 0 , 1 , 3 , infinite | 50 | | direction | normal | String | normal, reverse, alternate, alternate-reverse | 51 | | fillMode | none | String | none, forwards, backwards, both| 52 | | playState | running | String | running, paused | 53 | | transformOrigin | center | String | center, 50%, top bottom, 10% 80% ...| 54 | | backfaceVisibility | hidden | String | hidden, visible | 55 | | opacity | 0 | Number | 0 -> 1 | 56 | | style | undefined | React.CSSProperties | | 57 | | children | Hello World | ReactNode | 58 | 59 | ## Names of animations 60 | For test all animation click [here](https://carlosmanotas.github.io/animate-styled/) 61 | 62 | --- 63 | 64 | | `Attention Seekers` | `Specials` | `Flippers` | `LightSpeed` | 65 | |--------------------|----------|----------|------------| 66 | | bounce | hinge | flip | lightSpeedInLeft | 67 | | flash | jackInTheBox | flipInX | lightSpeedInRight | 68 | | headShake | rollIn | flipInY | lightSpeedOutLeft | 69 | | heartBeat | rollOut | flipOutX | lightSpeedOutRight | 70 | | jello | | flipOutY | 71 | | pulse | 72 | | rubberBand | 73 | | shake | 74 | | shakeX | 75 | | shakeY | 76 | | swing | 77 | | tada | 78 | | wobble | 79 | 80 | --- 81 | 82 | | `BackEntrances` | `BackExits` | `BouncingEntrances` | `BouncingExits` | 83 | |---------------|-----------|-------------------|---------------| 84 | | backInDown | backOutDown | bounceIn | bounceOut | 85 | | backInLeft | backOutLeft | bounceInDown | bounceOutDown | 86 | | backInRight | backOutRight | bounceInLeft | bounceOutLeft | 87 | | backInUp | backOutUp | bounceInRight | bounceOutRight | 88 | | | | bounceInUp | bounceOutUp | 89 | 90 | --- 91 | 92 | | `FadingEntrances` | `FadingExits` | `RotatingEntrances` | `RotatingExits` | 93 | |-------------------|---------------|---------------------|-----------------| 94 | | fadeIn | fadeOut | rotateIn | rotateOut 95 | | fadeInBottomLeft | fadeOutBottomLeft | rotateInDownLeft | rotateOutDownLeft 96 | | fadeInBottomRight | fadeOutBottomRight | rotateInDownRight | rotateOutDownRight 97 | | fadeInDown | fadeOutDown | rotateInUpLeft | rotateOutUpLeft 98 | | fadeInDownBig | fadeOutDownBig | rotateInUpRight | rotateOutUpRight 99 | | fadeInLeft | fadeOutLeft 100 | | fadeInLeftBig | fadeOutLeftBig 101 | | fadeInRight | fadeOutRight 102 | | fadeInRightBig | fadeOutRightBig 103 | | fadeInTopLeft | fadeOutTopLeft 104 | | fadeInTopRight | fadeOutTopRight 105 | | fadeInUp | fadeOutUp 106 | | fadeInUpBig | fadeOutUpBig 107 | 108 | --- 109 | 110 | | `SlidingEntrances` | `SlidingExits` | `ZoomingEntrances` | `ZoomingExits` | 111 | |--------------------|----------------|--------------------|----------------| 112 | | slideInDown | slideOutDown | zoomIn | zoomOut 113 | | slideInLeft | slideOutLeft | zoomInDown | zoomOutDown 114 | | slideInRight | slideOutRight | zoomInLeft | zoomOutLeft 115 | | slideInUp | slideOutUp | zoomInRight | zoomOutRight 116 | | | | zoomInUp | zoomOutUp 117 | 118 | --- 119 | 120 | ## Import multiple animations 121 | ```javascript 122 | import { AnimateStyled } from "animate-styled"; 123 | ... 124 | render(){ 125 | return( 126 |
127 | 128 |

My Content

129 | 130 | 131 |

My Content

132 | 133 | 134 | 135 | 136 |
137 | ) 138 | } 139 | ``` 140 | ## Using All Properties 141 | ```javascript 142 | 143 | 155 | {children} 156 | 157 | 158 | ``` 159 | ## Other uses 160 | Nesting 161 | ```javascript 162 | 163 | 167 |

Mundo

168 | 169 | 170 | ``` 171 | 172 | ## License 173 | AnimateStyled is licensed under the MIT license. (http://opensource.org/licenses/MIT) 174 | 175 | [npm-badge]: https://img.shields.io/npm/v/animate-styled.png?style=flat-square 176 | [npm]: https://www.npmjs.org/package/animate-styled 177 | -------------------------------------------------------------------------------- /dist/index.cjs.js: -------------------------------------------------------------------------------- 1 | "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const St=require("react"),r=require("styled-components");var Q={exports:{}},F={};/** 2 | * @license React 3 | * react-jsx-runtime.production.min.js 4 | * 5 | * Copyright (c) Facebook, Inc. and its affiliates. 6 | * 7 | * This source code is licensed under the MIT license found in the 8 | * LICENSE file in the root directory of this source tree. 9 | */var Et;function dr(){if(Et)return F;Et=1;var c=St,_=Symbol.for("react.element"),j=Symbol.for("react.fragment"),R=Object.prototype.hasOwnProperty,S=c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,I={key:!0,ref:!0,__self:!0,__source:!0};function E(x,d,O){var p,b={},h=null,z=null;O!==void 0&&(h=""+O),d.key!==void 0&&(h=""+d.key),d.ref!==void 0&&(z=d.ref);for(p in d)R.call(d,p)&&!I.hasOwnProperty(p)&&(b[p]=d[p]);if(x&&x.defaultProps)for(p in d=x.defaultProps,d)b[p]===void 0&&(b[p]=d[p]);return{$$typeof:_,type:x,key:h,ref:z,props:b,_owner:S.current}}return F.Fragment=j,F.jsx=E,F.jsxs=E,F}var L={};/** 10 | * @license React 11 | * react-jsx-runtime.development.js 12 | * 13 | * Copyright (c) Facebook, Inc. and its affiliates. 14 | * 15 | * This source code is licensed under the MIT license found in the 16 | * LICENSE file in the root directory of this source tree. 17 | */var wt;function ur(){return wt||(wt=1,process.env.NODE_ENV!=="production"&&function(){var c=St,_=Symbol.for("react.element"),j=Symbol.for("react.portal"),R=Symbol.for("react.fragment"),S=Symbol.for("react.strict_mode"),I=Symbol.for("react.profiler"),E=Symbol.for("react.provider"),x=Symbol.for("react.context"),d=Symbol.for("react.forward_ref"),O=Symbol.for("react.suspense"),p=Symbol.for("react.suspense_list"),b=Symbol.for("react.memo"),h=Symbol.for("react.lazy"),z=Symbol.for("react.offscreen"),tt=Symbol.iterator,It="@@iterator";function Ct(t){if(t===null||typeof t!="object")return null;var e=tt&&t[tt]||t[It];return typeof e=="function"?e:null}var C=c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function u(t){{for(var e=arguments.length,a=new Array(e>1?e-1:0),n=1;n=1&&m>=0&&o[l]!==y[m];)m--;for(;l>=1&&m>=0;l--,m--)if(o[l]!==y[m]){if(l!==1||m!==1)do if(l--,m--,m<0||o[l]!==y[m]){var v=` 21 | `+o[l].replace(" at new "," at ");return t.displayName&&v.includes("")&&(v=v.replace("",t.displayName)),typeof t=="function"&&U.set(t,v),v}while(l>=1&&m>=0);break}}}finally{N=!1,M.current=f,$t(),Error.prepareStackTrace=i}var Y=t?t.displayName||t.name:"",T=Y?$(Y):"";return typeof t=="function"&&U.set(t,T),T}function Wt(t,e,a){return mt(t,!1)}function Bt(t){var e=t.prototype;return!!(e&&e.isReactComponent)}function W(t,e,a){if(t==null)return"";if(typeof t=="function")return mt(t,Bt(t));if(typeof t=="string")return $(t);switch(t){case O:return $("Suspense");case p:return $("SuspenseList")}if(typeof t=="object")switch(t.$$typeof){case d:return Wt(t.render);case b:return W(t.type,e,a);case h:{var n=t,i=n._payload,f=n._init;try{return W(f(i),e,a)}catch{}}}return""}var X=Object.prototype.hasOwnProperty,dt={},ut=C.ReactDebugCurrentFrame;function B(t){if(t){var e=t._owner,a=W(t.type,t._source,e?e.type:null);ut.setExtraStackFrame(a)}else ut.setExtraStackFrame(null)}function Mt(t,e,a,n,i){{var f=Function.call.bind(X);for(var s in t)if(f(t,s)){var o=void 0;try{if(typeof t[s]!="function"){var y=Error((n||"React class")+": "+a+" type `"+s+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof t[s]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw y.name="Invariant Violation",y}o=t[s](e,s,n,a,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(l){o=l}o&&!(o instanceof Error)&&(B(i),u("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",a,s,typeof o),B(null)),o instanceof Error&&!(o.message in dt)&&(dt[o.message]=!0,B(i),u("Failed %s type: %s",a,o.message),B(null))}}}var Vt=Array.isArray;function q(t){return Vt(t)}function Nt(t){{var e=typeof Symbol=="function"&&Symbol.toStringTag,a=e&&t[Symbol.toStringTag]||t.constructor.name||"Object";return a}}function qt(t){try{return pt(t),!1}catch{return!0}}function pt(t){return""+t}function yt(t){if(qt(t))return u("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",Nt(t)),pt(t)}var A=C.ReactCurrentOwner,Jt={key:!0,ref:!0,__self:!0,__source:!0},gt,vt,J;J={};function Kt(t){if(X.call(t,"ref")){var e=Object.getOwnPropertyDescriptor(t,"ref").get;if(e&&e.isReactWarning)return!1}return t.ref!==void 0}function Gt(t){if(X.call(t,"key")){var e=Object.getOwnPropertyDescriptor(t,"key").get;if(e&&e.isReactWarning)return!1}return t.key!==void 0}function Ht(t,e){if(typeof t.ref=="string"&&A.current&&e&&A.current.stateNode!==e){var a=k(A.current.type);J[a]||(u('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',k(A.current.type),t.ref),J[a]=!0)}}function Zt(t,e){{var a=function(){gt||(gt=!0,u("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",e))};a.isReactWarning=!0,Object.defineProperty(t,"key",{get:a,configurable:!0})}}function Qt(t,e){{var a=function(){vt||(vt=!0,u("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",e))};a.isReactWarning=!0,Object.defineProperty(t,"ref",{get:a,configurable:!0})}}var tr=function(t,e,a,n,i,f,s){var o={$$typeof:_,type:t,key:e,ref:a,props:s,_owner:f};return o._store={},Object.defineProperty(o._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(o,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(o,"_source",{configurable:!1,enumerable:!1,writable:!1,value:i}),Object.freeze&&(Object.freeze(o.props),Object.freeze(o)),o};function rr(t,e,a,n,i){{var f,s={},o=null,y=null;a!==void 0&&(yt(a),o=""+a),Gt(e)&&(yt(e.key),o=""+e.key),Kt(e)&&(y=e.ref,Ht(e,i));for(f in e)X.call(e,f)&&!Jt.hasOwnProperty(f)&&(s[f]=e[f]);if(t&&t.defaultProps){var l=t.defaultProps;for(f in l)s[f]===void 0&&(s[f]=l[f])}if(o||y){var m=typeof t=="function"?t.displayName||t.name||"Unknown":t;o&&Zt(s,m),y&&Qt(s,m)}return tr(t,o,y,i,n,A.current,s)}}var K=C.ReactCurrentOwner,bt=C.ReactDebugCurrentFrame;function P(t){if(t){var e=t._owner,a=W(t.type,t._source,e?e.type:null);bt.setExtraStackFrame(a)}else bt.setExtraStackFrame(null)}var G;G=!1;function H(t){return typeof t=="object"&&t!==null&&t.$$typeof===_}function kt(){{if(K.current){var t=k(K.current.type);if(t)return` 22 | 23 | Check the render method of \``+t+"`."}return""}}function er(t){return""}var xt={};function ar(t){{var e=kt();if(!e){var a=typeof t=="string"?t:t.displayName||t.name;a&&(e=` 24 | 25 | Check the top-level render call using <`+a+">.")}return e}}function ht(t,e){{if(!t._store||t._store.validated||t.key!=null)return;t._store.validated=!0;var a=ar(e);if(xt[a])return;xt[a]=!0;var n="";t&&t._owner&&t._owner!==K.current&&(n=" It was passed a child from "+k(t._owner.type)+"."),P(t),u('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',a,n),P(null)}}function Rt(t,e){{if(typeof t!="object")return;if(q(t))for(var a=0;a",o=" Did you accidentally export a JSX literal instead of a component?"):l=typeof t,u("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",l,o)}var m=rr(t,e,a,i,f);if(m==null)return m;if(s){var v=e.children;if(v!==void 0)if(n)if(q(v)){for(var Y=0;Y0?"{key: someKey, "+g.join(": ..., ")+": ...}":"{key: someKey}";if(!Ot[T+Z]){var lr=g.length>0?"{"+g.join(": ..., ")+": ...}":"{}";u(`A props object containing a "key" prop is being spread into JSX: 26 | let props = %s; 27 | <%s {...props} /> 28 | React keys must be passed directly to JSX without using spread: 29 | let props = %s; 30 | <%s key={someKey} {...props} />`,Z,T,lr,T),Ot[T+Z]=!0}}return t===R?or(m):nr(m),m}}function sr(t,e,a){return _t(t,e,a,!0)}function ir(t,e,a){return _t(t,e,a,!1)}var fr=ir,cr=sr;L.Fragment=R,L.jsx=fr,L.jsxs=cr}()),L}process.env.NODE_ENV==="production"?Q.exports=dr():Q.exports=ur();var Tt=Q.exports;const pr=r.keyframes` 31 | from, 32 | 20%, 33 | 53%, 34 | to { 35 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 36 | transform: translate3d(0, 0, 0); 37 | } 38 | 39 | 40%, 40 | 43% { 41 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 42 | transform: translate3d(0, -30px, 0) scaleY(1.1); 43 | } 44 | 45 | 70% { 46 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 47 | transform: translate3d(0, -15px, 0) scaleY(1.05); 48 | } 49 | 50 | 80% { 51 | transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 52 | transform: translate3d(0, 0, 0) scaleY(0.95); 53 | } 54 | 55 | 90% { 56 | transform: translate3d(0, -4px, 0) scaleY(1.02); 57 | } 58 | 59 | `,yr=r.keyframes` 60 | from, 50%, to { 61 | opacity: 1; 62 | } 63 | 64 | 25%, 75% { 65 | opacity: 0; 66 | } 67 | `,gr=r.keyframes` 68 | 0% { 69 | transform: translateX(0); 70 | } 71 | 72 | 6.5% { 73 | transform: translateX(-6px) rotateY(-9deg); 74 | } 75 | 76 | 18.5% { 77 | transform: translateX(5px) rotateY(7deg); 78 | } 79 | 80 | 31.5% { 81 | transform: translateX(-3px) rotateY(-5deg); 82 | } 83 | 84 | 43.5% { 85 | transform: translateX(2px) rotateY(3deg); 86 | } 87 | 88 | 50% { 89 | transform: translateX(0); 90 | } 91 | `,vr=r.keyframes` 92 | 0% { 93 | transform: scale(1); 94 | } 95 | 96 | 14% { 97 | transform: scale(1.3); 98 | } 99 | 100 | 28% { 101 | transform: scale(1); 102 | } 103 | 104 | 42% { 105 | transform: scale(1.3); 106 | } 107 | 108 | 70% { 109 | transform: scale(1); 110 | } 111 | `,br=r.keyframes` 112 | from, 11.1%, to { 113 | transform: none; 114 | } 115 | 116 | 22.2% { 117 | transform: skewX(-12.5deg) skewY(-12.5deg); 118 | } 119 | 120 | 33.3% { 121 | transform: skewX(6.25deg) skewY(6.25deg); 122 | } 123 | 124 | 44.4% { 125 | transform: skewX(-3.125deg) skewY(-3.125deg); 126 | } 127 | 128 | 55.5% { 129 | transform: skewX(1.5625deg) skewY(1.5625deg); 130 | } 131 | 132 | 66.6% { 133 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 134 | } 135 | 136 | 77.7% { 137 | transform: skewX(0.390625deg) skewY(0.390625deg); 138 | } 139 | 140 | 88.8% { 141 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 142 | } 143 | `,kr=r.keyframes` 144 | from { 145 | transform: scale3d(1, 1, 1); 146 | } 147 | 148 | 50% { 149 | transform: scale3d(1.05, 1.05, 1.05); 150 | } 151 | 152 | to { 153 | transform: scale3d(1, 1, 1); 154 | } 155 | `,xr=r.keyframes` 156 | from { 157 | transform: scale3d(1, 1, 1); 158 | } 159 | 160 | 30% { 161 | transform: scale3d(1.25, 0.75, 1); 162 | } 163 | 164 | 40% { 165 | transform: scale3d(0.75, 1.25, 1); 166 | } 167 | 168 | 50% { 169 | transform: scale3d(1.15, 0.85, 1); 170 | } 171 | 172 | 65% { 173 | transform: scale3d(.95, 1.05, 1); 174 | } 175 | 176 | 75% { 177 | transform: scale3d(1.05, .95, 1); 178 | } 179 | 180 | to { 181 | transform: scale3d(1, 1, 1); 182 | } 183 | `,hr=r.keyframes` 184 | from, to { 185 | transform: translate3d(0, 0, 0); 186 | } 187 | 188 | 10%, 30%, 50%, 70%, 90% { 189 | transform: translate3d(-10px, 0, 0); 190 | } 191 | 192 | 20%, 40%, 60%, 80% { 193 | transform: translate3d(10px, 0, 0); 194 | } 195 | `,Rr=r.keyframes` 196 | from, 197 | to { 198 | transform: translate3d(0, 0, 0); 199 | } 200 | 201 | 10%, 202 | 30%, 203 | 50%, 204 | 70%, 205 | 90% { 206 | transform: translate3d(-10px, 0, 0); 207 | } 208 | 209 | 20%, 210 | 40%, 211 | 60%, 212 | 80% { 213 | transform: translate3d(10px, 0, 0); 214 | } 215 | `,Or=r.keyframes` 216 | from, 217 | to { 218 | transform: translate3d(0, 0, 0); 219 | } 220 | 221 | 10%, 222 | 30%, 223 | 50%, 224 | 70%, 225 | 90% { 226 | transform: translate3d(0, -10px, 0); 227 | } 228 | 229 | 20%, 230 | 40%, 231 | 60%, 232 | 80% { 233 | transform: translate3d(0, 10px, 0); 234 | } 235 | `,_r=r.keyframes` 236 | 20% { 237 | transform: rotate3d(0, 0, 1, 15deg); 238 | } 239 | 240 | 40% { 241 | transform: rotate3d(0, 0, 1, -10deg); 242 | } 243 | 244 | 60% { 245 | transform: rotate3d(0, 0, 1, 5deg); 246 | } 247 | 248 | 80% { 249 | transform: rotate3d(0, 0, 1, -5deg); 250 | } 251 | 252 | to { 253 | transform: rotate3d(0, 0, 1, 0deg); 254 | } 255 | `,Er=r.keyframes` 256 | from { 257 | transform: scale3d(1, 1, 1); 258 | } 259 | 260 | 10%, 20% { 261 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 262 | } 263 | 264 | 30%, 50%, 70%, 90% { 265 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 266 | } 267 | 268 | 40%, 60%, 80% { 269 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 270 | } 271 | 272 | to { 273 | transform: scale3d(1, 1, 1); 274 | } 275 | `,wr=r.keyframes` 276 | from { 277 | transform: translate3d(0, 0, 0); 278 | } 279 | 280 | 15% { 281 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 282 | } 283 | 284 | 30% { 285 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 286 | } 287 | 288 | 45% { 289 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 290 | } 291 | 292 | 60% { 293 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 294 | } 295 | 296 | 75% { 297 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 298 | } 299 | 300 | to { 301 | transform: translate3d(0, 0, 0); 302 | } 303 | `,Tr=r.keyframes` 304 | 0% { 305 | transform: translateY(-1200px) scale(0.7); 306 | opacity: 0.7; 307 | } 308 | 309 | 80% { 310 | transform: translateY(0px) scale(0.7); 311 | opacity: 0.7; 312 | } 313 | 314 | 100% { 315 | transform: scale(1); 316 | opacity: 1; 317 | } 318 | `,Sr=r.keyframes` 319 | 0% { 320 | transform: translateX(-2000px) scale(0.7); 321 | opacity: 0.7; 322 | } 323 | 324 | 80% { 325 | transform: translateX(0px) scale(0.7); 326 | opacity: 0.7; 327 | } 328 | 329 | 100% { 330 | transform: scale(1); 331 | opacity: 1; 332 | } 333 | `,Ir=r.keyframes` 334 | 0% { 335 | transform: translateX(2000px) scale(0.7); 336 | opacity: 0.7; 337 | } 338 | 339 | 80% { 340 | transform: translateX(0px) scale(0.7); 341 | opacity: 0.7; 342 | } 343 | 344 | 100% { 345 | transform: scale(1); 346 | opacity: 1; 347 | } 348 | `,Cr=r.keyframes` 349 | 0% { 350 | transform: translateY(1200px) scale(0.7); 351 | opacity: 0.7; 352 | } 353 | 354 | 80% { 355 | transform: translateY(0px) scale(0.7); 356 | opacity: 0.7; 357 | } 358 | 359 | 100% { 360 | transform: scale(1); 361 | opacity: 1; 362 | } 363 | `,Pr=r.keyframes` 364 | 0% { 365 | transform: scale(1); 366 | opacity: 1; 367 | } 368 | 369 | 20% { 370 | transform: translateY(0px) scale(0.7); 371 | opacity: 0.7; 372 | } 373 | 374 | 100% { 375 | transform: translateY(700px) scale(0.7); 376 | opacity: 0.7; 377 | } 378 | `,Yr=r.keyframes` 379 | 0% { 380 | transform: scale(1); 381 | opacity: 1; 382 | } 383 | 384 | 20% { 385 | transform: translateX(0px) scale(0.7); 386 | opacity: 0.7; 387 | } 388 | 389 | 100% { 390 | transform: translateX(-2000px) scale(0.7); 391 | opacity: 0.7; 392 | } 393 | `,jr=r.keyframes` 394 | 0% { 395 | transform: scale(1); 396 | opacity: 1; 397 | } 398 | 399 | 20% { 400 | transform: translateX(0px) scale(0.7); 401 | opacity: 0.7; 402 | } 403 | 404 | 100% { 405 | transform: translateX(2000px) scale(0.7); 406 | opacity: 0.7; 407 | } 408 | `,Dr=r.keyframes` 409 | 0% { 410 | transform: scale(1); 411 | opacity: 1; 412 | } 413 | 414 | 20% { 415 | transform: translateY(0px) scale(0.7); 416 | opacity: 0.7; 417 | } 418 | 419 | 100% { 420 | transform: translateY(-700px) scale(0.7); 421 | opacity: 0.7; 422 | } 423 | `,Xr=r.keyframes` 424 | from, 425 | 20%, 426 | 40%, 427 | 60%, 428 | 80%, 429 | to { 430 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 431 | } 432 | 433 | 0% { 434 | opacity: 0; 435 | transform: scale3d(0.3, 0.3, 0.3); 436 | } 437 | 438 | 20% { 439 | transform: scale3d(1.1, 1.1, 1.1); 440 | } 441 | 442 | 40% { 443 | transform: scale3d(0.9, 0.9, 0.9); 444 | } 445 | 446 | 60% { 447 | opacity: 1; 448 | transform: scale3d(1.03, 1.03, 1.03); 449 | } 450 | 451 | 80% { 452 | transform: scale3d(0.97, 0.97, 0.97); 453 | } 454 | 455 | to { 456 | opacity: 1; 457 | transform: scale3d(1, 1, 1); 458 | } 459 | `,Ar=r.keyframes` 460 | from, 461 | 60%, 462 | 75%, 463 | 90%, 464 | to { 465 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 466 | } 467 | 468 | 0% { 469 | opacity: 0; 470 | transform: translate3d(0, -3000px, 0) scaleY(3); 471 | } 472 | 473 | 60% { 474 | opacity: 1; 475 | transform: translate3d(0, 25px, 0) scaleY(0.9); 476 | } 477 | 478 | 75% { 479 | transform: translate3d(0, -10px, 0) scaleY(0.95); 480 | } 481 | 482 | 90% { 483 | transform: translate3d(0, 5px, 0) scaleY(0.985); 484 | } 485 | 486 | to { 487 | transform: translate3d(0, 0, 0); 488 | } 489 | `,Fr=r.keyframes` 490 | from, 491 | 60%, 492 | 75%, 493 | 90%, 494 | to { 495 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 496 | } 497 | 498 | 0% { 499 | opacity: 0; 500 | transform: translate3d(-3000px, 0, 0) scaleX(3); 501 | } 502 | 503 | 60% { 504 | opacity: 1; 505 | transform: translate3d(25px, 0, 0) scaleX(1); 506 | } 507 | 508 | 75% { 509 | transform: translate3d(-10px, 0, 0) scaleX(0.98); 510 | } 511 | 512 | 90% { 513 | transform: translate3d(5px, 0, 0) scaleX(0.995); 514 | } 515 | 516 | to { 517 | transform: translate3d(0, 0, 0); 518 | } 519 | `,Lr=r.keyframes` 520 | from, 521 | 60%, 522 | 75%, 523 | 90%, 524 | to { 525 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 526 | } 527 | 528 | from { 529 | opacity: 0; 530 | transform: translate3d(3000px, 0, 0) scaleX(3); 531 | } 532 | 533 | 60% { 534 | opacity: 1; 535 | transform: translate3d(-25px, 0, 0) scaleX(1); 536 | } 537 | 538 | 75% { 539 | transform: translate3d(10px, 0, 0) scaleX(0.98); 540 | } 541 | 542 | 90% { 543 | transform: translate3d(-5px, 0, 0) scaleX(0.995); 544 | } 545 | 546 | to { 547 | transform: translate3d(0, 0, 0); 548 | } 549 | `,zr=r.keyframes` 550 | from, 551 | 60%, 552 | 75%, 553 | 90%, 554 | to { 555 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 556 | } 557 | 558 | from { 559 | opacity: 0; 560 | transform: translate3d(0, 3000px, 0) scaleY(5); 561 | } 562 | 563 | 60% { 564 | opacity: 1; 565 | transform: translate3d(0, -20px, 0) scaleY(0.9); 566 | } 567 | 568 | 75% { 569 | transform: translate3d(0, 10px, 0) scaleY(0.95); 570 | } 571 | 572 | 90% { 573 | transform: translate3d(0, -5px, 0) scaleY(0.985); 574 | } 575 | 576 | to { 577 | transform: translate3d(0, 0, 0); 578 | } 579 | `,$r=r.keyframes` 580 | 20% { 581 | transform: scale3d(0.9, 0.9, 0.9); 582 | } 583 | 584 | 50%, 585 | 55% { 586 | opacity: 1; 587 | transform: scale3d(1.1, 1.1, 1.1); 588 | } 589 | 590 | to { 591 | opacity: 0; 592 | transform: scale3d(0.3, 0.3, 0.3); 593 | } 594 | `,Ur=r.keyframes` 595 | 20% { 596 | transform: translate3d(0, 10px, 0) scaleY(0.985); 597 | } 598 | 599 | 40%, 600 | 45% { 601 | opacity: 1; 602 | transform: translate3d(0, -20px, 0) scaleY(0.9); 603 | } 604 | 605 | to { 606 | opacity: 0; 607 | transform: translate3d(0, 2000px, 0) scaleY(3); 608 | } 609 | `,Wr=r.keyframes` 610 | 20% { 611 | opacity: 1; 612 | transform: translate3d(20px, 0, 0) scaleX(0.9); 613 | } 614 | 615 | to { 616 | opacity: 0; 617 | transform: translate3d(-2000px, 0, 0) scaleX(2); 618 | } 619 | `,Br=r.keyframes` 620 | 20% { 621 | opacity: 1; 622 | transform: translate3d(-20px, 0, 0) scaleX(0.9); 623 | } 624 | 625 | to { 626 | opacity: 0; 627 | transform: translate3d(2000px, 0, 0) scaleX(2); 628 | } 629 | `,Mr=r.keyframes` 630 | 20% { 631 | transform: translate3d(0, -10px, 0) scaleY(0.985); 632 | } 633 | 634 | 40%, 635 | 45% { 636 | opacity: 1; 637 | transform: translate3d(0, 20px, 0) scaleY(0.9); 638 | } 639 | 640 | to { 641 | opacity: 0; 642 | transform: translate3d(0, -2000px, 0) scaleY(3); 643 | } 644 | `,Vr=r.keyframes` 645 | from { 646 | opacity: 0; 647 | } 648 | 649 | to { 650 | opacity: 1; 651 | } 652 | `,Nr=r.keyframes` 653 | from { 654 | opacity: 0; 655 | transform: translate3d(-100%, 100%, 0); 656 | } 657 | to { 658 | opacity: 1; 659 | transform: translate3d(0, 0, 0); 660 | } 661 | `,qr=r.keyframes` 662 | from { 663 | opacity: 0; 664 | transform: translate3d(100%, 100%, 0); 665 | } 666 | to { 667 | opacity: 1; 668 | transform: translate3d(0, 0, 0); 669 | } 670 | `,Jr=r.keyframes` 671 | from { 672 | opacity: 0; 673 | transform: translate3d(0, -100%, 0); 674 | } 675 | 676 | to { 677 | opacity: 1; 678 | transform: translate3d(0, 0, 0); 679 | } 680 | `,Kr=r.keyframes` 681 | from { 682 | opacity: 0; 683 | transform: translate3d(0, -2000px, 0); 684 | } 685 | 686 | to { 687 | opacity: 1; 688 | transform: translate3d(0, 0, 0); 689 | } 690 | `,Gr=r.keyframes` 691 | from { 692 | opacity: 0; 693 | transform: translate3d(-100%, 0, 0); 694 | } 695 | 696 | to { 697 | opacity: 1; 698 | transform: translate3d(0, 0, 0); 699 | } 700 | `,Hr=r.keyframes` 701 | from { 702 | opacity: 0; 703 | transform: translate3d(-2000px, 0, 0); 704 | } 705 | 706 | to { 707 | opacity: 1; 708 | transform: translate3d(0, 0, 0); 709 | } 710 | `,Zr=r.keyframes` 711 | from { 712 | opacity: 0; 713 | transform: translate3d(100%, 0, 0); 714 | } 715 | 716 | to { 717 | opacity: 1; 718 | transform: translate3d(0, 0, 0); 719 | } 720 | `,Qr=r.keyframes` 721 | from { 722 | opacity: 0; 723 | transform: translate3d(2000px, 0, 0); 724 | } 725 | 726 | to { 727 | opacity: 1; 728 | transform: translate3d(0, 0, 0); 729 | } 730 | `,te=r.keyframes` 731 | from { 732 | opacity: 0; 733 | transform: translate3d(-100%, -100%, 0); 734 | } 735 | to { 736 | opacity: 1; 737 | transform: translate3d(0, 0, 0); 738 | } 739 | `,re=r.keyframes` 740 | from { 741 | opacity: 0; 742 | transform: translate3d(100%, -100%, 0); 743 | } 744 | to { 745 | opacity: 1; 746 | transform: translate3d(0, 0, 0); 747 | } 748 | `,ee=r.keyframes` 749 | from { 750 | opacity: 0; 751 | transform: translate3d(0, 100%, 0); 752 | } 753 | 754 | to { 755 | opacity: 1; 756 | transform: translate3d(0, 0, 0); 757 | } 758 | `,ae=r.keyframes` 759 | from { 760 | opacity: 0; 761 | transform: translate3d(0, 2000px, 0); 762 | } 763 | 764 | to { 765 | opacity: 1; 766 | transform: translate3d(0, 0, 0); 767 | } 768 | `,ne=r.keyframes` 769 | from { 770 | opacity: 1; 771 | } 772 | 773 | to { 774 | opacity: 0; 775 | } 776 | `,oe=r.keyframes` 777 | from { 778 | opacity: 1; 779 | transform: translate3d(0, 0, 0); 780 | } 781 | to { 782 | opacity: 0; 783 | transform: translate3d(-100%, 100%, 0); 784 | } 785 | `,se=r.keyframes` 786 | from { 787 | opacity: 1; 788 | transform: translate3d(0, 0, 0); 789 | } 790 | to { 791 | opacity: 0; 792 | transform: translate3d(100%, 100%, 0); 793 | } 794 | `,ie=r.keyframes` 795 | from { 796 | opacity: 1; 797 | } 798 | 799 | to { 800 | opacity: 0; 801 | transform: translate3d(0, 100%, 0); 802 | } 803 | `,fe=r.keyframes` 804 | from { 805 | opacity: 1; 806 | } 807 | 808 | to { 809 | opacity: 0; 810 | transform: translate3d(0, 2000px, 0); 811 | } 812 | `,ce=r.keyframes` 813 | from { 814 | opacity: 1; 815 | } 816 | 817 | to { 818 | opacity: 0; 819 | transform: translate3d(-100%, 0, 0); 820 | } 821 | `,le=r.keyframes` 822 | from { 823 | opacity: 1; 824 | } 825 | 826 | to { 827 | opacity: 0; 828 | transform: translate3d(-2000px, 0, 0); 829 | } 830 | `,me=r.keyframes` 831 | from { 832 | opacity: 1; 833 | } 834 | 835 | to { 836 | opacity: 0; 837 | transform: translate3d(100%, 0, 0); 838 | } 839 | `,de=r.keyframes` 840 | from { 841 | opacity: 1; 842 | } 843 | 844 | to { 845 | opacity: 0; 846 | transform: translate3d(2000px, 0, 0); 847 | } 848 | `,ue=r.keyframes` 849 | from { 850 | opacity: 1; 851 | transform: translate3d(0, 0, 0); 852 | } 853 | to { 854 | opacity: 0; 855 | transform: translate3d(-100%, -100%, 0); 856 | } 857 | `,pe=r.keyframes` 858 | from { 859 | opacity: 1; 860 | transform: translate3d(0, 0, 0); 861 | } 862 | to { 863 | opacity: 0; 864 | transform: translate3d(100%, -100%, 0); 865 | } 866 | `,ye=r.keyframes` 867 | from { 868 | opacity: 1; 869 | } 870 | 871 | to { 872 | opacity: 0; 873 | transform: translate3d(0, -100%, 0); 874 | } 875 | `,ge=r.keyframes` 876 | from { 877 | opacity: 1; 878 | } 879 | 880 | to { 881 | opacity: 0; 882 | transform: translate3d(0, -2000px, 0); 883 | } 884 | `,ve=r.keyframes` 885 | from { 886 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); 887 | animation-timing-function: ease-out; 888 | } 889 | 890 | 40% { 891 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) 892 | rotate3d(0, 1, 0, -190deg); 893 | animation-timing-function: ease-out; 894 | } 895 | 896 | 50% { 897 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) 898 | rotate3d(0, 1, 0, -170deg); 899 | animation-timing-function: ease-in; 900 | } 901 | 902 | 80% { 903 | transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) 904 | rotate3d(0, 1, 0, 0deg); 905 | animation-timing-function: ease-in; 906 | } 907 | 908 | to { 909 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); 910 | animation-timing-function: ease-in; 911 | } 912 | `,be=r.keyframes` 913 | from { 914 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 915 | animation-timing-function: ease-in; 916 | opacity: 0; 917 | } 918 | 919 | 40% { 920 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 921 | animation-timing-function: ease-in; 922 | } 923 | 924 | 60% { 925 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 926 | opacity: 1; 927 | } 928 | 929 | 80% { 930 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 931 | } 932 | 933 | to { 934 | transform: perspective(400px); 935 | } 936 | `,ke=r.keyframes` 937 | from { 938 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 939 | animation-timing-function: ease-in; 940 | opacity: 0; 941 | } 942 | 943 | 40% { 944 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 945 | animation-timing-function: ease-in; 946 | } 947 | 948 | 60% { 949 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 950 | opacity: 1; 951 | } 952 | 953 | 80% { 954 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 955 | } 956 | 957 | to { 958 | transform: perspective(400px); 959 | } 960 | `,xe=r.keyframes` 961 | from { 962 | transform: perspective(400px); 963 | } 964 | 965 | 30% { 966 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 967 | opacity: 1; 968 | } 969 | 970 | to { 971 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 972 | opacity: 0; 973 | } 974 | `,he=r.keyframes` 975 | from { 976 | transform: perspective(400px); 977 | } 978 | 979 | 30% { 980 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 981 | opacity: 1; 982 | } 983 | 984 | to { 985 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 986 | opacity: 0; 987 | } 988 | `,Re=r.keyframes` 989 | from { 990 | transform: translate3d(-100%, 0, 0) skewX(30deg); 991 | opacity: 0; 992 | } 993 | 994 | 60% { 995 | transform: skewX(-20deg); 996 | opacity: 1; 997 | } 998 | 999 | 80% { 1000 | transform: skewX(5deg); 1001 | } 1002 | 1003 | to { 1004 | transform: translate3d(0, 0, 0); 1005 | } 1006 | `,Oe=r.keyframes` 1007 | from { 1008 | transform: translate3d(100%, 0, 0) skewX(-30deg); 1009 | opacity: 0; 1010 | } 1011 | 1012 | 60% { 1013 | transform: skewX(20deg); 1014 | opacity: 1; 1015 | } 1016 | 1017 | 80% { 1018 | transform: skewX(-5deg); 1019 | } 1020 | 1021 | to { 1022 | transform: translate3d(0, 0, 0); 1023 | } 1024 | `,_e=r.keyframes` 1025 | from { 1026 | opacity: 1; 1027 | } 1028 | 1029 | to { 1030 | transform: translate3d(-100%, 0, 0) skewX(-30deg); 1031 | opacity: 0; 1032 | } 1033 | `,Ee=r.keyframes` 1034 | from { 1035 | opacity: 1; 1036 | } 1037 | 1038 | to { 1039 | transform: translate3d(100%, 0, 0) skewX(30deg); 1040 | opacity: 0; 1041 | } 1042 | `,we=r.keyframes` 1043 | from { 1044 | transform: rotate3d(0, 0, 1, -200deg); 1045 | opacity: 0; 1046 | } 1047 | 1048 | to { 1049 | transform: translate3d(0, 0, 0); 1050 | opacity: 1; 1051 | } 1052 | `,Te=r.keyframes` 1053 | from { 1054 | transform: rotate3d(0, 0, 1, -45deg); 1055 | opacity: 0; 1056 | } 1057 | 1058 | to { 1059 | transform: translate3d(0, 0, 0); 1060 | opacity: 1; 1061 | } 1062 | `,Se=r.keyframes` 1063 | from { 1064 | transform: rotate3d(0, 0, 1, 45deg); 1065 | opacity: 0; 1066 | } 1067 | 1068 | to { 1069 | transform: translate3d(0, 0, 0); 1070 | opacity: 1; 1071 | } 1072 | `,Ie=r.keyframes` 1073 | from { 1074 | transform: rotate3d(0, 0, 1, 45deg); 1075 | opacity: 0; 1076 | } 1077 | 1078 | to { 1079 | transform: translate3d(0, 0, 0); 1080 | opacity: 1; 1081 | } 1082 | `,Ce=r.keyframes` 1083 | from { 1084 | transform: rotate3d(0, 0, 1, -90deg); 1085 | opacity: 0; 1086 | } 1087 | 1088 | to { 1089 | transform: translate3d(0, 0, 0); 1090 | opacity: 1; 1091 | } 1092 | `,Pe=r.keyframes` 1093 | from { 1094 | opacity: 1; 1095 | } 1096 | 1097 | to { 1098 | transform: rotate3d(0, 0, 1, 200deg); 1099 | opacity: 0; 1100 | } 1101 | `,Ye=r.keyframes` 1102 | from { 1103 | opacity: 1; 1104 | } 1105 | 1106 | to { 1107 | transform: rotate3d(0, 0, 1, 45deg); 1108 | opacity: 0; 1109 | } 1110 | `,je=r.keyframes` 1111 | from { 1112 | opacity: 1; 1113 | } 1114 | 1115 | to { 1116 | transform: rotate3d(0, 0, 1, -45deg); 1117 | opacity: 0; 1118 | } 1119 | `,De=r.keyframes` 1120 | from { 1121 | opacity: 1; 1122 | } 1123 | 1124 | to { 1125 | transform: rotate3d(0, 0, 1, -45deg); 1126 | opacity: 0; 1127 | } 1128 | `,Xe=r.keyframes` 1129 | from { 1130 | opacity: 1; 1131 | } 1132 | 1133 | to { 1134 | transform: rotate3d(0, 0, 1, 90deg); 1135 | opacity: 0; 1136 | } 1137 | `,Ae=r.keyframes` 1138 | from { 1139 | transform: translate3d(0, -100%, 0); 1140 | visibility: visible; 1141 | } 1142 | 1143 | to { 1144 | transform: translate3d(0, 0, 0); 1145 | } 1146 | `,Fe=r.keyframes` 1147 | from { 1148 | transform: translate3d(-100%, 0, 0); 1149 | visibility: visible; 1150 | } 1151 | 1152 | to { 1153 | transform: translate3d(0, 0, 0); 1154 | } 1155 | `,Le=r.keyframes` 1156 | from { 1157 | transform: translate3d(100%, 0, 0); 1158 | visibility: visible; 1159 | } 1160 | 1161 | to { 1162 | transform: translate3d(0, 0, 0); 1163 | } 1164 | `,ze=r.keyframes` 1165 | from { 1166 | transform: translate3d(0, 100%, 0); 1167 | visibility: visible; 1168 | } 1169 | 1170 | to { 1171 | transform: translate3d(0, 0, 0); 1172 | } 1173 | `,$e=r.keyframes` 1174 | from { 1175 | transform: translate3d(0, 0, 0); 1176 | } 1177 | 1178 | to { 1179 | visibility: hidden; 1180 | transform: translate3d(0, 100%, 0); 1181 | } 1182 | `,Ue=r.keyframes` 1183 | from { 1184 | transform: translate3d(0, 0, 0); 1185 | } 1186 | 1187 | to { 1188 | visibility: hidden; 1189 | transform: translate3d(-100%, 0, 0); 1190 | } 1191 | `,We=r.keyframes` 1192 | from { 1193 | transform: translate3d(0, 0, 0); 1194 | } 1195 | 1196 | to { 1197 | visibility: hidden; 1198 | transform: translate3d(100%, 0, 0); 1199 | } 1200 | `,Be=r.keyframes` 1201 | from { 1202 | transform: translate3d(0, 0, 0); 1203 | } 1204 | 1205 | to { 1206 | visibility: hidden; 1207 | transform: translate3d(0, -100%, 0); 1208 | } 1209 | `,Me=r.keyframes` 1210 | from { 1211 | opacity: 0; 1212 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 1213 | } 1214 | 1215 | to { 1216 | opacity: 1; 1217 | transform: translate3d(0, 0, 0); 1218 | } 1219 | `,Ve=r.keyframes` 1220 | from { 1221 | opacity: 1; 1222 | } 1223 | 1224 | to { 1225 | opacity: 0; 1226 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 1227 | } 1228 | `,Ne=r.keyframes` 1229 | 0% { 1230 | animation-timing-function: ease-in-out; 1231 | } 1232 | 1233 | 20%, 1234 | 60% { 1235 | transform: rotate3d(0, 0, 1, 80deg); 1236 | animation-timing-function: ease-in-out; 1237 | } 1238 | 1239 | 40%, 1240 | 80% { 1241 | transform: rotate3d(0, 0, 1, 60deg); 1242 | animation-timing-function: ease-in-out; 1243 | opacity: 1; 1244 | } 1245 | 1246 | to { 1247 | transform: translate3d(0, 700px, 0); 1248 | opacity: 0; 1249 | } 1250 | `,qe=r.keyframes` 1251 | from { 1252 | opacity: 0; 1253 | transform: scale(0.1) rotate(30deg); 1254 | transform-origin: center bottom; 1255 | } 1256 | 1257 | 50% { 1258 | transform: rotate(-10deg); 1259 | } 1260 | 1261 | 70% { 1262 | transform: rotate(3deg); 1263 | } 1264 | 1265 | to { 1266 | opacity: 1; 1267 | transform: scale(1); 1268 | } 1269 | `,Je=r.keyframes` 1270 | from { 1271 | opacity: 0; 1272 | transform: scale3d(0.3, 0.3, 0.3); 1273 | } 1274 | 1275 | 50% { 1276 | opacity: 1; 1277 | } 1278 | `,Ke=r.keyframes` 1279 | from { 1280 | opacity: 0; 1281 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); 1282 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1283 | } 1284 | 1285 | 60% { 1286 | opacity: 1; 1287 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 1288 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1289 | } 1290 | `,Ge=r.keyframes` 1291 | from { 1292 | opacity: 0; 1293 | transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); 1294 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1295 | } 1296 | 1297 | 60% { 1298 | opacity: 1; 1299 | transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); 1300 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1301 | } 1302 | `,He=r.keyframes` 1303 | from { 1304 | opacity: 0; 1305 | transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); 1306 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1307 | } 1308 | 1309 | 60% { 1310 | opacity: 1; 1311 | transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); 1312 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1313 | } 1314 | `,Ze=r.keyframes` 1315 | from { 1316 | opacity: 0; 1317 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); 1318 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1319 | } 1320 | 1321 | 60% { 1322 | opacity: 1; 1323 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 1324 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1325 | } 1326 | `,Qe=r.keyframes` 1327 | from { 1328 | opacity: 1; 1329 | } 1330 | 1331 | 50% { 1332 | opacity: 0; 1333 | transform: scale3d(0.3, 0.3, 0.3); 1334 | } 1335 | 1336 | to { 1337 | opacity: 0; 1338 | } 1339 | `,ta=r.keyframes` 1340 | 40% { 1341 | opacity: 1; 1342 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 1343 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1344 | } 1345 | 1346 | to { 1347 | opacity: 0; 1348 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); 1349 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1350 | } 1351 | `,ra=r.keyframes` 1352 | 40% { 1353 | opacity: 1; 1354 | transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); 1355 | } 1356 | 1357 | to { 1358 | opacity: 0; 1359 | transform: scale(0.1) translate3d(-2000px, 0, 0); 1360 | } 1361 | `,ea=r.keyframes` 1362 | 40% { 1363 | opacity: 1; 1364 | transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); 1365 | } 1366 | 1367 | to { 1368 | opacity: 0; 1369 | transform: scale(0.1) translate3d(2000px, 0, 0); 1370 | } 1371 | `,aa=r.keyframes` 1372 | 40% { 1373 | opacity: 1; 1374 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 1375 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1376 | } 1377 | 1378 | to { 1379 | opacity: 0; 1380 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); 1381 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1382 | } 1383 | `,na=Object.freeze(Object.defineProperty({__proto__:null,backInDown:Tr,backInLeft:Sr,backInRight:Ir,backInUp:Cr,backOutDown:Pr,backOutLeft:Yr,backOutRight:jr,backOutUp:Dr,bounce:pr,bounceIn:Xr,bounceInDown:Ar,bounceInLeft:Fr,bounceInRight:Lr,bounceInUp:zr,bounceOut:$r,bounceOutDown:Ur,bounceOutLeft:Wr,bounceOutRight:Br,bounceOutUp:Mr,fadeIn:Vr,fadeInBottomLeft:Nr,fadeInBottomRight:qr,fadeInDown:Jr,fadeInDownBig:Kr,fadeInLeft:Gr,fadeInLeftBig:Hr,fadeInRight:Zr,fadeInRightBig:Qr,fadeInTopLeft:te,fadeInTopRight:re,fadeInUp:ee,fadeInUpBig:ae,fadeOut:ne,fadeOutBottomLeft:oe,fadeOutBottomRight:se,fadeOutDown:ie,fadeOutDownBig:fe,fadeOutLeft:ce,fadeOutLeftBig:le,fadeOutRight:me,fadeOutRightBig:de,fadeOutTopLeft:ue,fadeOutTopRight:pe,fadeOutUp:ye,fadeOutUpBig:ge,flash:yr,flip:ve,flipInX:be,flipInY:ke,flipOutX:xe,flipOutY:he,headShake:gr,heartBeat:vr,hinge:Ne,jackInTheBox:qe,jello:br,lightSpeedInLeft:Re,lightSpeedInRight:Oe,lightSpeedOutLeft:_e,lightSpeedOutRight:Ee,pulse:kr,rollIn:Me,rollOut:Ve,rotateIn:we,rotateInDownLeft:Te,rotateInDownRight:Se,rotateInUpLeft:Ie,rotateInUpRight:Ce,rotateOut:Pe,rotateOutDownLeft:Ye,rotateOutDownRight:je,rotateOutUpLeft:De,rotateOutUpRight:Xe,rubberBand:xr,shake:hr,shakeX:Rr,shakeY:Or,slideInDown:Ae,slideInLeft:Fe,slideInRight:Le,slideInUp:ze,slideOutDown:$e,slideOutLeft:Ue,slideOutRight:We,slideOutUp:Be,swing:_r,tada:Er,wobble:wr,zoomIn:Je,zoomInDown:Ke,zoomInLeft:Ge,zoomInRight:He,zoomInUp:Ze,zoomOut:Qe,zoomOutDown:ta,zoomOutLeft:ra,zoomOutRight:ea,zoomOutUp:aa},Symbol.toStringTag,{value:"Module"})),oa=new Set(["backfaceVisibility","transformOrigin","opacity","playState","fillMode","iterationCount","timingFunction","delay","duration","direction","name"]),sa=c=>r.css` 1384 | animation: ${c.duration} ${c.timingFunction} ${c.delay} 1385 | ${c.iterationCount} ${c.direction} ${c.fillMode} 1386 | ${c.playState} ${na[c.name]}; 1387 | `,ia=r.styled.div.withConfig({shouldForwardProp:c=>!oa.has(c)})` 1388 | transform-origin: ${c=>c.transformOrigin}; 1389 | backface-visibility: ${c=>c.backfaceVisibility}; 1390 | opacity: ${c=>c.opacity}; 1391 | ${c=>c.name&&sa}; 1392 | `;function fa({name:c="shake",duration:_="2s",timingFunction:j="linear",delay:R="0s",iterationCount:S="infinite",direction:I="normal",fillMode:E="none",playState:x="running",transformOrigin:d="center",backfaceVisibility:O="hidden",opacity:p=1,children:b=Tt.jsx("h1",{children:"Hello World"}),style:h}){return Tt.jsx(ia,{name:c,duration:_,timingFunction:j,delay:R,iterationCount:S,direction:I,fillMode:E,playState:x,transformOrigin:d,backfaceVisibility:O,opacity:p,style:h,children:b})}exports.AnimateStyled=fa; 1393 | -------------------------------------------------------------------------------- /dist/index.es.js: -------------------------------------------------------------------------------- 1 | import St from "react"; 2 | import { keyframes as r, styled as ur, css as mr } from "styled-components"; 3 | var Q = { exports: {} }, L = {}; 4 | /** 5 | * @license React 6 | * react-jsx-runtime.production.min.js 7 | * 8 | * Copyright (c) Facebook, Inc. and its affiliates. 9 | * 10 | * This source code is licensed under the MIT license found in the 11 | * LICENSE file in the root directory of this source tree. 12 | */ 13 | var wt; 14 | function pr() { 15 | if (wt) return L; 16 | wt = 1; 17 | var f = St, E = Symbol.for("react.element"), j = Symbol.for("react.fragment"), O = Object.prototype.hasOwnProperty, S = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, I = { key: !0, ref: !0, __self: !0, __source: !0 }; 18 | function w(h, u, _) { 19 | var p, b = {}, R = null, z = null; 20 | _ !== void 0 && (R = "" + _), u.key !== void 0 && (R = "" + u.key), u.ref !== void 0 && (z = u.ref); 21 | for (p in u) O.call(u, p) && !I.hasOwnProperty(p) && (b[p] = u[p]); 22 | if (h && h.defaultProps) for (p in u = h.defaultProps, u) b[p] === void 0 && (b[p] = u[p]); 23 | return { $$typeof: E, type: h, key: R, ref: z, props: b, _owner: S.current }; 24 | } 25 | return L.Fragment = j, L.jsx = w, L.jsxs = w, L; 26 | } 27 | var A = {}; 28 | /** 29 | * @license React 30 | * react-jsx-runtime.development.js 31 | * 32 | * Copyright (c) Facebook, Inc. and its affiliates. 33 | * 34 | * This source code is licensed under the MIT license found in the 35 | * LICENSE file in the root directory of this source tree. 36 | */ 37 | var kt; 38 | function yr() { 39 | return kt || (kt = 1, process.env.NODE_ENV !== "production" && function() { 40 | var f = St, E = Symbol.for("react.element"), j = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), S = Symbol.for("react.strict_mode"), I = Symbol.for("react.profiler"), w = Symbol.for("react.provider"), h = Symbol.for("react.context"), u = Symbol.for("react.forward_ref"), _ = Symbol.for("react.suspense"), p = Symbol.for("react.suspense_list"), b = Symbol.for("react.memo"), R = Symbol.for("react.lazy"), z = Symbol.for("react.offscreen"), tt = Symbol.iterator, It = "@@iterator"; 41 | function Ct(t) { 42 | if (t === null || typeof t != "object") 43 | return null; 44 | var a = tt && t[tt] || t[It]; 45 | return typeof a == "function" ? a : null; 46 | } 47 | var C = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; 48 | function m(t) { 49 | { 50 | for (var a = arguments.length, e = new Array(a > 1 ? a - 1 : 0), n = 1; n < a; n++) 51 | e[n - 1] = arguments[n]; 52 | Pt("error", t, e); 53 | } 54 | } 55 | function Pt(t, a, e) { 56 | { 57 | var n = C.ReactDebugCurrentFrame, i = n.getStackAddendum(); 58 | i !== "" && (a += "%s", e = e.concat([i])); 59 | var c = e.map(function(s) { 60 | return String(s); 61 | }); 62 | c.unshift("Warning: " + a), Function.prototype.apply.call(console[t], console, c); 63 | } 64 | } 65 | var Yt = !1, jt = !1, Dt = !1, Xt = !1, Ft = !1, rt; 66 | rt = Symbol.for("react.module.reference"); 67 | function Lt(t) { 68 | return !!(typeof t == "string" || typeof t == "function" || t === O || t === I || Ft || t === S || t === _ || t === p || Xt || t === z || Yt || jt || Dt || typeof t == "object" && t !== null && (t.$$typeof === R || t.$$typeof === b || t.$$typeof === w || t.$$typeof === h || t.$$typeof === u || // This needs to include all possible module reference object 69 | // types supported by any Flight configuration anywhere since 70 | // we don't know which Flight build this will end up being used 71 | // with. 72 | t.$$typeof === rt || t.getModuleId !== void 0)); 73 | } 74 | function At(t, a, e) { 75 | var n = t.displayName; 76 | if (n) 77 | return n; 78 | var i = a.displayName || a.name || ""; 79 | return i !== "" ? e + "(" + i + ")" : e; 80 | } 81 | function at(t) { 82 | return t.displayName || "Context"; 83 | } 84 | function x(t) { 85 | if (t == null) 86 | return null; 87 | if (typeof t.tag == "number" && m("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof t == "function") 88 | return t.displayName || t.name || null; 89 | if (typeof t == "string") 90 | return t; 91 | switch (t) { 92 | case O: 93 | return "Fragment"; 94 | case j: 95 | return "Portal"; 96 | case I: 97 | return "Profiler"; 98 | case S: 99 | return "StrictMode"; 100 | case _: 101 | return "Suspense"; 102 | case p: 103 | return "SuspenseList"; 104 | } 105 | if (typeof t == "object") 106 | switch (t.$$typeof) { 107 | case h: 108 | var a = t; 109 | return at(a) + ".Consumer"; 110 | case w: 111 | var e = t; 112 | return at(e._context) + ".Provider"; 113 | case u: 114 | return At(t, t.render, "ForwardRef"); 115 | case b: 116 | var n = t.displayName || null; 117 | return n !== null ? n : x(t.type) || "Memo"; 118 | case R: { 119 | var i = t, c = i._payload, s = i._init; 120 | try { 121 | return x(s(c)); 122 | } catch { 123 | return null; 124 | } 125 | } 126 | } 127 | return null; 128 | } 129 | var k = Object.assign, D = 0, et, nt, ot, st, it, ct, ft; 130 | function lt() { 131 | } 132 | lt.__reactDisabledLog = !0; 133 | function zt() { 134 | { 135 | if (D === 0) { 136 | et = console.log, nt = console.info, ot = console.warn, st = console.error, it = console.group, ct = console.groupCollapsed, ft = console.groupEnd; 137 | var t = { 138 | configurable: !0, 139 | enumerable: !0, 140 | value: lt, 141 | writable: !0 142 | }; 143 | Object.defineProperties(console, { 144 | info: t, 145 | log: t, 146 | warn: t, 147 | error: t, 148 | group: t, 149 | groupCollapsed: t, 150 | groupEnd: t 151 | }); 152 | } 153 | D++; 154 | } 155 | } 156 | function $t() { 157 | { 158 | if (D--, D === 0) { 159 | var t = { 160 | configurable: !0, 161 | enumerable: !0, 162 | writable: !0 163 | }; 164 | Object.defineProperties(console, { 165 | log: k({}, t, { 166 | value: et 167 | }), 168 | info: k({}, t, { 169 | value: nt 170 | }), 171 | warn: k({}, t, { 172 | value: ot 173 | }), 174 | error: k({}, t, { 175 | value: st 176 | }), 177 | group: k({}, t, { 178 | value: it 179 | }), 180 | groupCollapsed: k({}, t, { 181 | value: ct 182 | }), 183 | groupEnd: k({}, t, { 184 | value: ft 185 | }) 186 | }); 187 | } 188 | D < 0 && m("disabledDepth fell below zero. This is a bug in React. Please file an issue."); 189 | } 190 | } 191 | var M = C.ReactCurrentDispatcher, V; 192 | function $(t, a, e) { 193 | { 194 | if (V === void 0) 195 | try { 196 | throw Error(); 197 | } catch (i) { 198 | var n = i.stack.trim().match(/\n( *(at )?)/); 199 | V = n && n[1] || ""; 200 | } 201 | return ` 202 | ` + V + t; 203 | } 204 | } 205 | var N = !1, U; 206 | { 207 | var Ut = typeof WeakMap == "function" ? WeakMap : Map; 208 | U = new Ut(); 209 | } 210 | function dt(t, a) { 211 | if (!t || N) 212 | return ""; 213 | { 214 | var e = U.get(t); 215 | if (e !== void 0) 216 | return e; 217 | } 218 | var n; 219 | N = !0; 220 | var i = Error.prepareStackTrace; 221 | Error.prepareStackTrace = void 0; 222 | var c; 223 | c = M.current, M.current = null, zt(); 224 | try { 225 | if (a) { 226 | var s = function() { 227 | throw Error(); 228 | }; 229 | if (Object.defineProperty(s.prototype, "props", { 230 | set: function() { 231 | throw Error(); 232 | } 233 | }), typeof Reflect == "object" && Reflect.construct) { 234 | try { 235 | Reflect.construct(s, []); 236 | } catch (g) { 237 | n = g; 238 | } 239 | Reflect.construct(t, [], s); 240 | } else { 241 | try { 242 | s.call(); 243 | } catch (g) { 244 | n = g; 245 | } 246 | t.call(s.prototype); 247 | } 248 | } else { 249 | try { 250 | throw Error(); 251 | } catch (g) { 252 | n = g; 253 | } 254 | t(); 255 | } 256 | } catch (g) { 257 | if (g && n && typeof g.stack == "string") { 258 | for (var o = g.stack.split(` 259 | `), y = n.stack.split(` 260 | `), l = o.length - 1, d = y.length - 1; l >= 1 && d >= 0 && o[l] !== y[d]; ) 261 | d--; 262 | for (; l >= 1 && d >= 0; l--, d--) 263 | if (o[l] !== y[d]) { 264 | if (l !== 1 || d !== 1) 265 | do 266 | if (l--, d--, d < 0 || o[l] !== y[d]) { 267 | var v = ` 268 | ` + o[l].replace(" at new ", " at "); 269 | return t.displayName && v.includes("") && (v = v.replace("", t.displayName)), typeof t == "function" && U.set(t, v), v; 270 | } 271 | while (l >= 1 && d >= 0); 272 | break; 273 | } 274 | } 275 | } finally { 276 | N = !1, M.current = c, $t(), Error.prepareStackTrace = i; 277 | } 278 | var Y = t ? t.displayName || t.name : "", T = Y ? $(Y) : ""; 279 | return typeof t == "function" && U.set(t, T), T; 280 | } 281 | function Wt(t, a, e) { 282 | return dt(t, !1); 283 | } 284 | function Bt(t) { 285 | var a = t.prototype; 286 | return !!(a && a.isReactComponent); 287 | } 288 | function W(t, a, e) { 289 | if (t == null) 290 | return ""; 291 | if (typeof t == "function") 292 | return dt(t, Bt(t)); 293 | if (typeof t == "string") 294 | return $(t); 295 | switch (t) { 296 | case _: 297 | return $("Suspense"); 298 | case p: 299 | return $("SuspenseList"); 300 | } 301 | if (typeof t == "object") 302 | switch (t.$$typeof) { 303 | case u: 304 | return Wt(t.render); 305 | case b: 306 | return W(t.type, a, e); 307 | case R: { 308 | var n = t, i = n._payload, c = n._init; 309 | try { 310 | return W(c(i), a, e); 311 | } catch { 312 | } 313 | } 314 | } 315 | return ""; 316 | } 317 | var X = Object.prototype.hasOwnProperty, ut = {}, mt = C.ReactDebugCurrentFrame; 318 | function B(t) { 319 | if (t) { 320 | var a = t._owner, e = W(t.type, t._source, a ? a.type : null); 321 | mt.setExtraStackFrame(e); 322 | } else 323 | mt.setExtraStackFrame(null); 324 | } 325 | function Mt(t, a, e, n, i) { 326 | { 327 | var c = Function.call.bind(X); 328 | for (var s in t) 329 | if (c(t, s)) { 330 | var o = void 0; 331 | try { 332 | if (typeof t[s] != "function") { 333 | var y = Error((n || "React class") + ": " + e + " type `" + s + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof t[s] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."); 334 | throw y.name = "Invariant Violation", y; 335 | } 336 | o = t[s](a, s, n, e, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"); 337 | } catch (l) { 338 | o = l; 339 | } 340 | o && !(o instanceof Error) && (B(i), m("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", n || "React class", e, s, typeof o), B(null)), o instanceof Error && !(o.message in ut) && (ut[o.message] = !0, B(i), m("Failed %s type: %s", e, o.message), B(null)); 341 | } 342 | } 343 | } 344 | var Vt = Array.isArray; 345 | function J(t) { 346 | return Vt(t); 347 | } 348 | function Nt(t) { 349 | { 350 | var a = typeof Symbol == "function" && Symbol.toStringTag, e = a && t[Symbol.toStringTag] || t.constructor.name || "Object"; 351 | return e; 352 | } 353 | } 354 | function Jt(t) { 355 | try { 356 | return pt(t), !1; 357 | } catch { 358 | return !0; 359 | } 360 | } 361 | function pt(t) { 362 | return "" + t; 363 | } 364 | function yt(t) { 365 | if (Jt(t)) 366 | return m("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Nt(t)), pt(t); 367 | } 368 | var F = C.ReactCurrentOwner, qt = { 369 | key: !0, 370 | ref: !0, 371 | __self: !0, 372 | __source: !0 373 | }, gt, vt, q; 374 | q = {}; 375 | function Kt(t) { 376 | if (X.call(t, "ref")) { 377 | var a = Object.getOwnPropertyDescriptor(t, "ref").get; 378 | if (a && a.isReactWarning) 379 | return !1; 380 | } 381 | return t.ref !== void 0; 382 | } 383 | function Gt(t) { 384 | if (X.call(t, "key")) { 385 | var a = Object.getOwnPropertyDescriptor(t, "key").get; 386 | if (a && a.isReactWarning) 387 | return !1; 388 | } 389 | return t.key !== void 0; 390 | } 391 | function Ht(t, a) { 392 | if (typeof t.ref == "string" && F.current && a && F.current.stateNode !== a) { 393 | var e = x(F.current.type); 394 | q[e] || (m('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', x(F.current.type), t.ref), q[e] = !0); 395 | } 396 | } 397 | function Zt(t, a) { 398 | { 399 | var e = function() { 400 | gt || (gt = !0, m("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", a)); 401 | }; 402 | e.isReactWarning = !0, Object.defineProperty(t, "key", { 403 | get: e, 404 | configurable: !0 405 | }); 406 | } 407 | } 408 | function Qt(t, a) { 409 | { 410 | var e = function() { 411 | vt || (vt = !0, m("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", a)); 412 | }; 413 | e.isReactWarning = !0, Object.defineProperty(t, "ref", { 414 | get: e, 415 | configurable: !0 416 | }); 417 | } 418 | } 419 | var tr = function(t, a, e, n, i, c, s) { 420 | var o = { 421 | // This tag allows us to uniquely identify this as a React Element 422 | $$typeof: E, 423 | // Built-in properties that belong on the element 424 | type: t, 425 | key: a, 426 | ref: e, 427 | props: s, 428 | // Record the component responsible for creating this element. 429 | _owner: c 430 | }; 431 | return o._store = {}, Object.defineProperty(o._store, "validated", { 432 | configurable: !1, 433 | enumerable: !1, 434 | writable: !0, 435 | value: !1 436 | }), Object.defineProperty(o, "_self", { 437 | configurable: !1, 438 | enumerable: !1, 439 | writable: !1, 440 | value: n 441 | }), Object.defineProperty(o, "_source", { 442 | configurable: !1, 443 | enumerable: !1, 444 | writable: !1, 445 | value: i 446 | }), Object.freeze && (Object.freeze(o.props), Object.freeze(o)), o; 447 | }; 448 | function rr(t, a, e, n, i) { 449 | { 450 | var c, s = {}, o = null, y = null; 451 | e !== void 0 && (yt(e), o = "" + e), Gt(a) && (yt(a.key), o = "" + a.key), Kt(a) && (y = a.ref, Ht(a, i)); 452 | for (c in a) 453 | X.call(a, c) && !qt.hasOwnProperty(c) && (s[c] = a[c]); 454 | if (t && t.defaultProps) { 455 | var l = t.defaultProps; 456 | for (c in l) 457 | s[c] === void 0 && (s[c] = l[c]); 458 | } 459 | if (o || y) { 460 | var d = typeof t == "function" ? t.displayName || t.name || "Unknown" : t; 461 | o && Zt(s, d), y && Qt(s, d); 462 | } 463 | return tr(t, o, y, i, n, F.current, s); 464 | } 465 | } 466 | var K = C.ReactCurrentOwner, bt = C.ReactDebugCurrentFrame; 467 | function P(t) { 468 | if (t) { 469 | var a = t._owner, e = W(t.type, t._source, a ? a.type : null); 470 | bt.setExtraStackFrame(e); 471 | } else 472 | bt.setExtraStackFrame(null); 473 | } 474 | var G; 475 | G = !1; 476 | function H(t) { 477 | return typeof t == "object" && t !== null && t.$$typeof === E; 478 | } 479 | function xt() { 480 | { 481 | if (K.current) { 482 | var t = x(K.current.type); 483 | if (t) 484 | return ` 485 | 486 | Check the render method of \`` + t + "`."; 487 | } 488 | return ""; 489 | } 490 | } 491 | function ar(t) { 492 | return ""; 493 | } 494 | var ht = {}; 495 | function er(t) { 496 | { 497 | var a = xt(); 498 | if (!a) { 499 | var e = typeof t == "string" ? t : t.displayName || t.name; 500 | e && (a = ` 501 | 502 | Check the top-level render call using <` + e + ">."); 503 | } 504 | return a; 505 | } 506 | } 507 | function Rt(t, a) { 508 | { 509 | if (!t._store || t._store.validated || t.key != null) 510 | return; 511 | t._store.validated = !0; 512 | var e = er(a); 513 | if (ht[e]) 514 | return; 515 | ht[e] = !0; 516 | var n = ""; 517 | t && t._owner && t._owner !== K.current && (n = " It was passed a child from " + x(t._owner.type) + "."), P(t), m('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', e, n), P(null); 518 | } 519 | } 520 | function Ot(t, a) { 521 | { 522 | if (typeof t != "object") 523 | return; 524 | if (J(t)) 525 | for (var e = 0; e < t.length; e++) { 526 | var n = t[e]; 527 | H(n) && Rt(n, a); 528 | } 529 | else if (H(t)) 530 | t._store && (t._store.validated = !0); 531 | else if (t) { 532 | var i = Ct(t); 533 | if (typeof i == "function" && i !== t.entries) 534 | for (var c = i.call(t), s; !(s = c.next()).done; ) 535 | H(s.value) && Rt(s.value, a); 536 | } 537 | } 538 | } 539 | function nr(t) { 540 | { 541 | var a = t.type; 542 | if (a == null || typeof a == "string") 543 | return; 544 | var e; 545 | if (typeof a == "function") 546 | e = a.propTypes; 547 | else if (typeof a == "object" && (a.$$typeof === u || // Note: Memo only checks outer props here. 548 | // Inner props are checked in the reconciler. 549 | a.$$typeof === b)) 550 | e = a.propTypes; 551 | else 552 | return; 553 | if (e) { 554 | var n = x(a); 555 | Mt(e, t.props, "prop", n, t); 556 | } else if (a.PropTypes !== void 0 && !G) { 557 | G = !0; 558 | var i = x(a); 559 | m("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", i || "Unknown"); 560 | } 561 | typeof a.getDefaultProps == "function" && !a.getDefaultProps.isReactClassApproved && m("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead."); 562 | } 563 | } 564 | function or(t) { 565 | { 566 | for (var a = Object.keys(t.props), e = 0; e < a.length; e++) { 567 | var n = a[e]; 568 | if (n !== "children" && n !== "key") { 569 | P(t), m("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), P(null); 570 | break; 571 | } 572 | } 573 | t.ref !== null && (P(t), m("Invalid attribute `ref` supplied to `React.Fragment`."), P(null)); 574 | } 575 | } 576 | var _t = {}; 577 | function Et(t, a, e, n, i, c) { 578 | { 579 | var s = Lt(t); 580 | if (!s) { 581 | var o = ""; 582 | (t === void 0 || typeof t == "object" && t !== null && Object.keys(t).length === 0) && (o += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."); 583 | var y = ar(); 584 | y ? o += y : o += xt(); 585 | var l; 586 | t === null ? l = "null" : J(t) ? l = "array" : t !== void 0 && t.$$typeof === E ? (l = "<" + (x(t.type) || "Unknown") + " />", o = " Did you accidentally export a JSX literal instead of a component?") : l = typeof t, m("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", l, o); 587 | } 588 | var d = rr(t, a, e, i, c); 589 | if (d == null) 590 | return d; 591 | if (s) { 592 | var v = a.children; 593 | if (v !== void 0) 594 | if (n) 595 | if (J(v)) { 596 | for (var Y = 0; Y < v.length; Y++) 597 | Ot(v[Y], t); 598 | Object.freeze && Object.freeze(v); 599 | } else 600 | m("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."); 601 | else 602 | Ot(v, t); 603 | } 604 | if (X.call(a, "key")) { 605 | var T = x(t), g = Object.keys(a).filter(function(dr) { 606 | return dr !== "key"; 607 | }), Z = g.length > 0 ? "{key: someKey, " + g.join(": ..., ") + ": ...}" : "{key: someKey}"; 608 | if (!_t[T + Z]) { 609 | var lr = g.length > 0 ? "{" + g.join(": ..., ") + ": ...}" : "{}"; 610 | m(`A props object containing a "key" prop is being spread into JSX: 611 | let props = %s; 612 | <%s {...props} /> 613 | React keys must be passed directly to JSX without using spread: 614 | let props = %s; 615 | <%s key={someKey} {...props} />`, Z, T, lr, T), _t[T + Z] = !0; 616 | } 617 | } 618 | return t === O ? or(d) : nr(d), d; 619 | } 620 | } 621 | function sr(t, a, e) { 622 | return Et(t, a, e, !0); 623 | } 624 | function ir(t, a, e) { 625 | return Et(t, a, e, !1); 626 | } 627 | var cr = ir, fr = sr; 628 | A.Fragment = O, A.jsx = cr, A.jsxs = fr; 629 | }()), A; 630 | } 631 | process.env.NODE_ENV === "production" ? Q.exports = pr() : Q.exports = yr(); 632 | var Tt = Q.exports; 633 | const gr = r` 634 | from, 635 | 20%, 636 | 53%, 637 | to { 638 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 639 | transform: translate3d(0, 0, 0); 640 | } 641 | 642 | 40%, 643 | 43% { 644 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 645 | transform: translate3d(0, -30px, 0) scaleY(1.1); 646 | } 647 | 648 | 70% { 649 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 650 | transform: translate3d(0, -15px, 0) scaleY(1.05); 651 | } 652 | 653 | 80% { 654 | transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 655 | transform: translate3d(0, 0, 0) scaleY(0.95); 656 | } 657 | 658 | 90% { 659 | transform: translate3d(0, -4px, 0) scaleY(1.02); 660 | } 661 | 662 | `, vr = r` 663 | from, 50%, to { 664 | opacity: 1; 665 | } 666 | 667 | 25%, 75% { 668 | opacity: 0; 669 | } 670 | `, br = r` 671 | 0% { 672 | transform: translateX(0); 673 | } 674 | 675 | 6.5% { 676 | transform: translateX(-6px) rotateY(-9deg); 677 | } 678 | 679 | 18.5% { 680 | transform: translateX(5px) rotateY(7deg); 681 | } 682 | 683 | 31.5% { 684 | transform: translateX(-3px) rotateY(-5deg); 685 | } 686 | 687 | 43.5% { 688 | transform: translateX(2px) rotateY(3deg); 689 | } 690 | 691 | 50% { 692 | transform: translateX(0); 693 | } 694 | `, xr = r` 695 | 0% { 696 | transform: scale(1); 697 | } 698 | 699 | 14% { 700 | transform: scale(1.3); 701 | } 702 | 703 | 28% { 704 | transform: scale(1); 705 | } 706 | 707 | 42% { 708 | transform: scale(1.3); 709 | } 710 | 711 | 70% { 712 | transform: scale(1); 713 | } 714 | `, hr = r` 715 | from, 11.1%, to { 716 | transform: none; 717 | } 718 | 719 | 22.2% { 720 | transform: skewX(-12.5deg) skewY(-12.5deg); 721 | } 722 | 723 | 33.3% { 724 | transform: skewX(6.25deg) skewY(6.25deg); 725 | } 726 | 727 | 44.4% { 728 | transform: skewX(-3.125deg) skewY(-3.125deg); 729 | } 730 | 731 | 55.5% { 732 | transform: skewX(1.5625deg) skewY(1.5625deg); 733 | } 734 | 735 | 66.6% { 736 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 737 | } 738 | 739 | 77.7% { 740 | transform: skewX(0.390625deg) skewY(0.390625deg); 741 | } 742 | 743 | 88.8% { 744 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 745 | } 746 | `, Rr = r` 747 | from { 748 | transform: scale3d(1, 1, 1); 749 | } 750 | 751 | 50% { 752 | transform: scale3d(1.05, 1.05, 1.05); 753 | } 754 | 755 | to { 756 | transform: scale3d(1, 1, 1); 757 | } 758 | `, Or = r` 759 | from { 760 | transform: scale3d(1, 1, 1); 761 | } 762 | 763 | 30% { 764 | transform: scale3d(1.25, 0.75, 1); 765 | } 766 | 767 | 40% { 768 | transform: scale3d(0.75, 1.25, 1); 769 | } 770 | 771 | 50% { 772 | transform: scale3d(1.15, 0.85, 1); 773 | } 774 | 775 | 65% { 776 | transform: scale3d(.95, 1.05, 1); 777 | } 778 | 779 | 75% { 780 | transform: scale3d(1.05, .95, 1); 781 | } 782 | 783 | to { 784 | transform: scale3d(1, 1, 1); 785 | } 786 | `, _r = r` 787 | from, to { 788 | transform: translate3d(0, 0, 0); 789 | } 790 | 791 | 10%, 30%, 50%, 70%, 90% { 792 | transform: translate3d(-10px, 0, 0); 793 | } 794 | 795 | 20%, 40%, 60%, 80% { 796 | transform: translate3d(10px, 0, 0); 797 | } 798 | `, Er = r` 799 | from, 800 | to { 801 | transform: translate3d(0, 0, 0); 802 | } 803 | 804 | 10%, 805 | 30%, 806 | 50%, 807 | 70%, 808 | 90% { 809 | transform: translate3d(-10px, 0, 0); 810 | } 811 | 812 | 20%, 813 | 40%, 814 | 60%, 815 | 80% { 816 | transform: translate3d(10px, 0, 0); 817 | } 818 | `, wr = r` 819 | from, 820 | to { 821 | transform: translate3d(0, 0, 0); 822 | } 823 | 824 | 10%, 825 | 30%, 826 | 50%, 827 | 70%, 828 | 90% { 829 | transform: translate3d(0, -10px, 0); 830 | } 831 | 832 | 20%, 833 | 40%, 834 | 60%, 835 | 80% { 836 | transform: translate3d(0, 10px, 0); 837 | } 838 | `, kr = r` 839 | 20% { 840 | transform: rotate3d(0, 0, 1, 15deg); 841 | } 842 | 843 | 40% { 844 | transform: rotate3d(0, 0, 1, -10deg); 845 | } 846 | 847 | 60% { 848 | transform: rotate3d(0, 0, 1, 5deg); 849 | } 850 | 851 | 80% { 852 | transform: rotate3d(0, 0, 1, -5deg); 853 | } 854 | 855 | to { 856 | transform: rotate3d(0, 0, 1, 0deg); 857 | } 858 | `, Tr = r` 859 | from { 860 | transform: scale3d(1, 1, 1); 861 | } 862 | 863 | 10%, 20% { 864 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 865 | } 866 | 867 | 30%, 50%, 70%, 90% { 868 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 869 | } 870 | 871 | 40%, 60%, 80% { 872 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 873 | } 874 | 875 | to { 876 | transform: scale3d(1, 1, 1); 877 | } 878 | `, Sr = r` 879 | from { 880 | transform: translate3d(0, 0, 0); 881 | } 882 | 883 | 15% { 884 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 885 | } 886 | 887 | 30% { 888 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 889 | } 890 | 891 | 45% { 892 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 893 | } 894 | 895 | 60% { 896 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 897 | } 898 | 899 | 75% { 900 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 901 | } 902 | 903 | to { 904 | transform: translate3d(0, 0, 0); 905 | } 906 | `, Ir = r` 907 | 0% { 908 | transform: translateY(-1200px) scale(0.7); 909 | opacity: 0.7; 910 | } 911 | 912 | 80% { 913 | transform: translateY(0px) scale(0.7); 914 | opacity: 0.7; 915 | } 916 | 917 | 100% { 918 | transform: scale(1); 919 | opacity: 1; 920 | } 921 | `, Cr = r` 922 | 0% { 923 | transform: translateX(-2000px) scale(0.7); 924 | opacity: 0.7; 925 | } 926 | 927 | 80% { 928 | transform: translateX(0px) scale(0.7); 929 | opacity: 0.7; 930 | } 931 | 932 | 100% { 933 | transform: scale(1); 934 | opacity: 1; 935 | } 936 | `, Pr = r` 937 | 0% { 938 | transform: translateX(2000px) scale(0.7); 939 | opacity: 0.7; 940 | } 941 | 942 | 80% { 943 | transform: translateX(0px) scale(0.7); 944 | opacity: 0.7; 945 | } 946 | 947 | 100% { 948 | transform: scale(1); 949 | opacity: 1; 950 | } 951 | `, Yr = r` 952 | 0% { 953 | transform: translateY(1200px) scale(0.7); 954 | opacity: 0.7; 955 | } 956 | 957 | 80% { 958 | transform: translateY(0px) scale(0.7); 959 | opacity: 0.7; 960 | } 961 | 962 | 100% { 963 | transform: scale(1); 964 | opacity: 1; 965 | } 966 | `, jr = r` 967 | 0% { 968 | transform: scale(1); 969 | opacity: 1; 970 | } 971 | 972 | 20% { 973 | transform: translateY(0px) scale(0.7); 974 | opacity: 0.7; 975 | } 976 | 977 | 100% { 978 | transform: translateY(700px) scale(0.7); 979 | opacity: 0.7; 980 | } 981 | `, Dr = r` 982 | 0% { 983 | transform: scale(1); 984 | opacity: 1; 985 | } 986 | 987 | 20% { 988 | transform: translateX(0px) scale(0.7); 989 | opacity: 0.7; 990 | } 991 | 992 | 100% { 993 | transform: translateX(-2000px) scale(0.7); 994 | opacity: 0.7; 995 | } 996 | `, Xr = r` 997 | 0% { 998 | transform: scale(1); 999 | opacity: 1; 1000 | } 1001 | 1002 | 20% { 1003 | transform: translateX(0px) scale(0.7); 1004 | opacity: 0.7; 1005 | } 1006 | 1007 | 100% { 1008 | transform: translateX(2000px) scale(0.7); 1009 | opacity: 0.7; 1010 | } 1011 | `, Fr = r` 1012 | 0% { 1013 | transform: scale(1); 1014 | opacity: 1; 1015 | } 1016 | 1017 | 20% { 1018 | transform: translateY(0px) scale(0.7); 1019 | opacity: 0.7; 1020 | } 1021 | 1022 | 100% { 1023 | transform: translateY(-700px) scale(0.7); 1024 | opacity: 0.7; 1025 | } 1026 | `, Lr = r` 1027 | from, 1028 | 20%, 1029 | 40%, 1030 | 60%, 1031 | 80%, 1032 | to { 1033 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1034 | } 1035 | 1036 | 0% { 1037 | opacity: 0; 1038 | transform: scale3d(0.3, 0.3, 0.3); 1039 | } 1040 | 1041 | 20% { 1042 | transform: scale3d(1.1, 1.1, 1.1); 1043 | } 1044 | 1045 | 40% { 1046 | transform: scale3d(0.9, 0.9, 0.9); 1047 | } 1048 | 1049 | 60% { 1050 | opacity: 1; 1051 | transform: scale3d(1.03, 1.03, 1.03); 1052 | } 1053 | 1054 | 80% { 1055 | transform: scale3d(0.97, 0.97, 0.97); 1056 | } 1057 | 1058 | to { 1059 | opacity: 1; 1060 | transform: scale3d(1, 1, 1); 1061 | } 1062 | `, Ar = r` 1063 | from, 1064 | 60%, 1065 | 75%, 1066 | 90%, 1067 | to { 1068 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1069 | } 1070 | 1071 | 0% { 1072 | opacity: 0; 1073 | transform: translate3d(0, -3000px, 0) scaleY(3); 1074 | } 1075 | 1076 | 60% { 1077 | opacity: 1; 1078 | transform: translate3d(0, 25px, 0) scaleY(0.9); 1079 | } 1080 | 1081 | 75% { 1082 | transform: translate3d(0, -10px, 0) scaleY(0.95); 1083 | } 1084 | 1085 | 90% { 1086 | transform: translate3d(0, 5px, 0) scaleY(0.985); 1087 | } 1088 | 1089 | to { 1090 | transform: translate3d(0, 0, 0); 1091 | } 1092 | `, zr = r` 1093 | from, 1094 | 60%, 1095 | 75%, 1096 | 90%, 1097 | to { 1098 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1099 | } 1100 | 1101 | 0% { 1102 | opacity: 0; 1103 | transform: translate3d(-3000px, 0, 0) scaleX(3); 1104 | } 1105 | 1106 | 60% { 1107 | opacity: 1; 1108 | transform: translate3d(25px, 0, 0) scaleX(1); 1109 | } 1110 | 1111 | 75% { 1112 | transform: translate3d(-10px, 0, 0) scaleX(0.98); 1113 | } 1114 | 1115 | 90% { 1116 | transform: translate3d(5px, 0, 0) scaleX(0.995); 1117 | } 1118 | 1119 | to { 1120 | transform: translate3d(0, 0, 0); 1121 | } 1122 | `, $r = r` 1123 | from, 1124 | 60%, 1125 | 75%, 1126 | 90%, 1127 | to { 1128 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1129 | } 1130 | 1131 | from { 1132 | opacity: 0; 1133 | transform: translate3d(3000px, 0, 0) scaleX(3); 1134 | } 1135 | 1136 | 60% { 1137 | opacity: 1; 1138 | transform: translate3d(-25px, 0, 0) scaleX(1); 1139 | } 1140 | 1141 | 75% { 1142 | transform: translate3d(10px, 0, 0) scaleX(0.98); 1143 | } 1144 | 1145 | 90% { 1146 | transform: translate3d(-5px, 0, 0) scaleX(0.995); 1147 | } 1148 | 1149 | to { 1150 | transform: translate3d(0, 0, 0); 1151 | } 1152 | `, Ur = r` 1153 | from, 1154 | 60%, 1155 | 75%, 1156 | 90%, 1157 | to { 1158 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1159 | } 1160 | 1161 | from { 1162 | opacity: 0; 1163 | transform: translate3d(0, 3000px, 0) scaleY(5); 1164 | } 1165 | 1166 | 60% { 1167 | opacity: 1; 1168 | transform: translate3d(0, -20px, 0) scaleY(0.9); 1169 | } 1170 | 1171 | 75% { 1172 | transform: translate3d(0, 10px, 0) scaleY(0.95); 1173 | } 1174 | 1175 | 90% { 1176 | transform: translate3d(0, -5px, 0) scaleY(0.985); 1177 | } 1178 | 1179 | to { 1180 | transform: translate3d(0, 0, 0); 1181 | } 1182 | `, Wr = r` 1183 | 20% { 1184 | transform: scale3d(0.9, 0.9, 0.9); 1185 | } 1186 | 1187 | 50%, 1188 | 55% { 1189 | opacity: 1; 1190 | transform: scale3d(1.1, 1.1, 1.1); 1191 | } 1192 | 1193 | to { 1194 | opacity: 0; 1195 | transform: scale3d(0.3, 0.3, 0.3); 1196 | } 1197 | `, Br = r` 1198 | 20% { 1199 | transform: translate3d(0, 10px, 0) scaleY(0.985); 1200 | } 1201 | 1202 | 40%, 1203 | 45% { 1204 | opacity: 1; 1205 | transform: translate3d(0, -20px, 0) scaleY(0.9); 1206 | } 1207 | 1208 | to { 1209 | opacity: 0; 1210 | transform: translate3d(0, 2000px, 0) scaleY(3); 1211 | } 1212 | `, Mr = r` 1213 | 20% { 1214 | opacity: 1; 1215 | transform: translate3d(20px, 0, 0) scaleX(0.9); 1216 | } 1217 | 1218 | to { 1219 | opacity: 0; 1220 | transform: translate3d(-2000px, 0, 0) scaleX(2); 1221 | } 1222 | `, Vr = r` 1223 | 20% { 1224 | opacity: 1; 1225 | transform: translate3d(-20px, 0, 0) scaleX(0.9); 1226 | } 1227 | 1228 | to { 1229 | opacity: 0; 1230 | transform: translate3d(2000px, 0, 0) scaleX(2); 1231 | } 1232 | `, Nr = r` 1233 | 20% { 1234 | transform: translate3d(0, -10px, 0) scaleY(0.985); 1235 | } 1236 | 1237 | 40%, 1238 | 45% { 1239 | opacity: 1; 1240 | transform: translate3d(0, 20px, 0) scaleY(0.9); 1241 | } 1242 | 1243 | to { 1244 | opacity: 0; 1245 | transform: translate3d(0, -2000px, 0) scaleY(3); 1246 | } 1247 | `, Jr = r` 1248 | from { 1249 | opacity: 0; 1250 | } 1251 | 1252 | to { 1253 | opacity: 1; 1254 | } 1255 | `, qr = r` 1256 | from { 1257 | opacity: 0; 1258 | transform: translate3d(-100%, 100%, 0); 1259 | } 1260 | to { 1261 | opacity: 1; 1262 | transform: translate3d(0, 0, 0); 1263 | } 1264 | `, Kr = r` 1265 | from { 1266 | opacity: 0; 1267 | transform: translate3d(100%, 100%, 0); 1268 | } 1269 | to { 1270 | opacity: 1; 1271 | transform: translate3d(0, 0, 0); 1272 | } 1273 | `, Gr = r` 1274 | from { 1275 | opacity: 0; 1276 | transform: translate3d(0, -100%, 0); 1277 | } 1278 | 1279 | to { 1280 | opacity: 1; 1281 | transform: translate3d(0, 0, 0); 1282 | } 1283 | `, Hr = r` 1284 | from { 1285 | opacity: 0; 1286 | transform: translate3d(0, -2000px, 0); 1287 | } 1288 | 1289 | to { 1290 | opacity: 1; 1291 | transform: translate3d(0, 0, 0); 1292 | } 1293 | `, Zr = r` 1294 | from { 1295 | opacity: 0; 1296 | transform: translate3d(-100%, 0, 0); 1297 | } 1298 | 1299 | to { 1300 | opacity: 1; 1301 | transform: translate3d(0, 0, 0); 1302 | } 1303 | `, Qr = r` 1304 | from { 1305 | opacity: 0; 1306 | transform: translate3d(-2000px, 0, 0); 1307 | } 1308 | 1309 | to { 1310 | opacity: 1; 1311 | transform: translate3d(0, 0, 0); 1312 | } 1313 | `, ta = r` 1314 | from { 1315 | opacity: 0; 1316 | transform: translate3d(100%, 0, 0); 1317 | } 1318 | 1319 | to { 1320 | opacity: 1; 1321 | transform: translate3d(0, 0, 0); 1322 | } 1323 | `, ra = r` 1324 | from { 1325 | opacity: 0; 1326 | transform: translate3d(2000px, 0, 0); 1327 | } 1328 | 1329 | to { 1330 | opacity: 1; 1331 | transform: translate3d(0, 0, 0); 1332 | } 1333 | `, aa = r` 1334 | from { 1335 | opacity: 0; 1336 | transform: translate3d(-100%, -100%, 0); 1337 | } 1338 | to { 1339 | opacity: 1; 1340 | transform: translate3d(0, 0, 0); 1341 | } 1342 | `, ea = r` 1343 | from { 1344 | opacity: 0; 1345 | transform: translate3d(100%, -100%, 0); 1346 | } 1347 | to { 1348 | opacity: 1; 1349 | transform: translate3d(0, 0, 0); 1350 | } 1351 | `, na = r` 1352 | from { 1353 | opacity: 0; 1354 | transform: translate3d(0, 100%, 0); 1355 | } 1356 | 1357 | to { 1358 | opacity: 1; 1359 | transform: translate3d(0, 0, 0); 1360 | } 1361 | `, oa = r` 1362 | from { 1363 | opacity: 0; 1364 | transform: translate3d(0, 2000px, 0); 1365 | } 1366 | 1367 | to { 1368 | opacity: 1; 1369 | transform: translate3d(0, 0, 0); 1370 | } 1371 | `, sa = r` 1372 | from { 1373 | opacity: 1; 1374 | } 1375 | 1376 | to { 1377 | opacity: 0; 1378 | } 1379 | `, ia = r` 1380 | from { 1381 | opacity: 1; 1382 | transform: translate3d(0, 0, 0); 1383 | } 1384 | to { 1385 | opacity: 0; 1386 | transform: translate3d(-100%, 100%, 0); 1387 | } 1388 | `, ca = r` 1389 | from { 1390 | opacity: 1; 1391 | transform: translate3d(0, 0, 0); 1392 | } 1393 | to { 1394 | opacity: 0; 1395 | transform: translate3d(100%, 100%, 0); 1396 | } 1397 | `, fa = r` 1398 | from { 1399 | opacity: 1; 1400 | } 1401 | 1402 | to { 1403 | opacity: 0; 1404 | transform: translate3d(0, 100%, 0); 1405 | } 1406 | `, la = r` 1407 | from { 1408 | opacity: 1; 1409 | } 1410 | 1411 | to { 1412 | opacity: 0; 1413 | transform: translate3d(0, 2000px, 0); 1414 | } 1415 | `, da = r` 1416 | from { 1417 | opacity: 1; 1418 | } 1419 | 1420 | to { 1421 | opacity: 0; 1422 | transform: translate3d(-100%, 0, 0); 1423 | } 1424 | `, ua = r` 1425 | from { 1426 | opacity: 1; 1427 | } 1428 | 1429 | to { 1430 | opacity: 0; 1431 | transform: translate3d(-2000px, 0, 0); 1432 | } 1433 | `, ma = r` 1434 | from { 1435 | opacity: 1; 1436 | } 1437 | 1438 | to { 1439 | opacity: 0; 1440 | transform: translate3d(100%, 0, 0); 1441 | } 1442 | `, pa = r` 1443 | from { 1444 | opacity: 1; 1445 | } 1446 | 1447 | to { 1448 | opacity: 0; 1449 | transform: translate3d(2000px, 0, 0); 1450 | } 1451 | `, ya = r` 1452 | from { 1453 | opacity: 1; 1454 | transform: translate3d(0, 0, 0); 1455 | } 1456 | to { 1457 | opacity: 0; 1458 | transform: translate3d(-100%, -100%, 0); 1459 | } 1460 | `, ga = r` 1461 | from { 1462 | opacity: 1; 1463 | transform: translate3d(0, 0, 0); 1464 | } 1465 | to { 1466 | opacity: 0; 1467 | transform: translate3d(100%, -100%, 0); 1468 | } 1469 | `, va = r` 1470 | from { 1471 | opacity: 1; 1472 | } 1473 | 1474 | to { 1475 | opacity: 0; 1476 | transform: translate3d(0, -100%, 0); 1477 | } 1478 | `, ba = r` 1479 | from { 1480 | opacity: 1; 1481 | } 1482 | 1483 | to { 1484 | opacity: 0; 1485 | transform: translate3d(0, -2000px, 0); 1486 | } 1487 | `, xa = r` 1488 | from { 1489 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); 1490 | animation-timing-function: ease-out; 1491 | } 1492 | 1493 | 40% { 1494 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) 1495 | rotate3d(0, 1, 0, -190deg); 1496 | animation-timing-function: ease-out; 1497 | } 1498 | 1499 | 50% { 1500 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) 1501 | rotate3d(0, 1, 0, -170deg); 1502 | animation-timing-function: ease-in; 1503 | } 1504 | 1505 | 80% { 1506 | transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) 1507 | rotate3d(0, 1, 0, 0deg); 1508 | animation-timing-function: ease-in; 1509 | } 1510 | 1511 | to { 1512 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); 1513 | animation-timing-function: ease-in; 1514 | } 1515 | `, ha = r` 1516 | from { 1517 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1518 | animation-timing-function: ease-in; 1519 | opacity: 0; 1520 | } 1521 | 1522 | 40% { 1523 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1524 | animation-timing-function: ease-in; 1525 | } 1526 | 1527 | 60% { 1528 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1529 | opacity: 1; 1530 | } 1531 | 1532 | 80% { 1533 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1534 | } 1535 | 1536 | to { 1537 | transform: perspective(400px); 1538 | } 1539 | `, Ra = r` 1540 | from { 1541 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1542 | animation-timing-function: ease-in; 1543 | opacity: 0; 1544 | } 1545 | 1546 | 40% { 1547 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1548 | animation-timing-function: ease-in; 1549 | } 1550 | 1551 | 60% { 1552 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1553 | opacity: 1; 1554 | } 1555 | 1556 | 80% { 1557 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1558 | } 1559 | 1560 | to { 1561 | transform: perspective(400px); 1562 | } 1563 | `, Oa = r` 1564 | from { 1565 | transform: perspective(400px); 1566 | } 1567 | 1568 | 30% { 1569 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1570 | opacity: 1; 1571 | } 1572 | 1573 | to { 1574 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1575 | opacity: 0; 1576 | } 1577 | `, _a = r` 1578 | from { 1579 | transform: perspective(400px); 1580 | } 1581 | 1582 | 30% { 1583 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1584 | opacity: 1; 1585 | } 1586 | 1587 | to { 1588 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1589 | opacity: 0; 1590 | } 1591 | `, Ea = r` 1592 | from { 1593 | transform: translate3d(-100%, 0, 0) skewX(30deg); 1594 | opacity: 0; 1595 | } 1596 | 1597 | 60% { 1598 | transform: skewX(-20deg); 1599 | opacity: 1; 1600 | } 1601 | 1602 | 80% { 1603 | transform: skewX(5deg); 1604 | } 1605 | 1606 | to { 1607 | transform: translate3d(0, 0, 0); 1608 | } 1609 | `, wa = r` 1610 | from { 1611 | transform: translate3d(100%, 0, 0) skewX(-30deg); 1612 | opacity: 0; 1613 | } 1614 | 1615 | 60% { 1616 | transform: skewX(20deg); 1617 | opacity: 1; 1618 | } 1619 | 1620 | 80% { 1621 | transform: skewX(-5deg); 1622 | } 1623 | 1624 | to { 1625 | transform: translate3d(0, 0, 0); 1626 | } 1627 | `, ka = r` 1628 | from { 1629 | opacity: 1; 1630 | } 1631 | 1632 | to { 1633 | transform: translate3d(-100%, 0, 0) skewX(-30deg); 1634 | opacity: 0; 1635 | } 1636 | `, Ta = r` 1637 | from { 1638 | opacity: 1; 1639 | } 1640 | 1641 | to { 1642 | transform: translate3d(100%, 0, 0) skewX(30deg); 1643 | opacity: 0; 1644 | } 1645 | `, Sa = r` 1646 | from { 1647 | transform: rotate3d(0, 0, 1, -200deg); 1648 | opacity: 0; 1649 | } 1650 | 1651 | to { 1652 | transform: translate3d(0, 0, 0); 1653 | opacity: 1; 1654 | } 1655 | `, Ia = r` 1656 | from { 1657 | transform: rotate3d(0, 0, 1, -45deg); 1658 | opacity: 0; 1659 | } 1660 | 1661 | to { 1662 | transform: translate3d(0, 0, 0); 1663 | opacity: 1; 1664 | } 1665 | `, Ca = r` 1666 | from { 1667 | transform: rotate3d(0, 0, 1, 45deg); 1668 | opacity: 0; 1669 | } 1670 | 1671 | to { 1672 | transform: translate3d(0, 0, 0); 1673 | opacity: 1; 1674 | } 1675 | `, Pa = r` 1676 | from { 1677 | transform: rotate3d(0, 0, 1, 45deg); 1678 | opacity: 0; 1679 | } 1680 | 1681 | to { 1682 | transform: translate3d(0, 0, 0); 1683 | opacity: 1; 1684 | } 1685 | `, Ya = r` 1686 | from { 1687 | transform: rotate3d(0, 0, 1, -90deg); 1688 | opacity: 0; 1689 | } 1690 | 1691 | to { 1692 | transform: translate3d(0, 0, 0); 1693 | opacity: 1; 1694 | } 1695 | `, ja = r` 1696 | from { 1697 | opacity: 1; 1698 | } 1699 | 1700 | to { 1701 | transform: rotate3d(0, 0, 1, 200deg); 1702 | opacity: 0; 1703 | } 1704 | `, Da = r` 1705 | from { 1706 | opacity: 1; 1707 | } 1708 | 1709 | to { 1710 | transform: rotate3d(0, 0, 1, 45deg); 1711 | opacity: 0; 1712 | } 1713 | `, Xa = r` 1714 | from { 1715 | opacity: 1; 1716 | } 1717 | 1718 | to { 1719 | transform: rotate3d(0, 0, 1, -45deg); 1720 | opacity: 0; 1721 | } 1722 | `, Fa = r` 1723 | from { 1724 | opacity: 1; 1725 | } 1726 | 1727 | to { 1728 | transform: rotate3d(0, 0, 1, -45deg); 1729 | opacity: 0; 1730 | } 1731 | `, La = r` 1732 | from { 1733 | opacity: 1; 1734 | } 1735 | 1736 | to { 1737 | transform: rotate3d(0, 0, 1, 90deg); 1738 | opacity: 0; 1739 | } 1740 | `, Aa = r` 1741 | from { 1742 | transform: translate3d(0, -100%, 0); 1743 | visibility: visible; 1744 | } 1745 | 1746 | to { 1747 | transform: translate3d(0, 0, 0); 1748 | } 1749 | `, za = r` 1750 | from { 1751 | transform: translate3d(-100%, 0, 0); 1752 | visibility: visible; 1753 | } 1754 | 1755 | to { 1756 | transform: translate3d(0, 0, 0); 1757 | } 1758 | `, $a = r` 1759 | from { 1760 | transform: translate3d(100%, 0, 0); 1761 | visibility: visible; 1762 | } 1763 | 1764 | to { 1765 | transform: translate3d(0, 0, 0); 1766 | } 1767 | `, Ua = r` 1768 | from { 1769 | transform: translate3d(0, 100%, 0); 1770 | visibility: visible; 1771 | } 1772 | 1773 | to { 1774 | transform: translate3d(0, 0, 0); 1775 | } 1776 | `, Wa = r` 1777 | from { 1778 | transform: translate3d(0, 0, 0); 1779 | } 1780 | 1781 | to { 1782 | visibility: hidden; 1783 | transform: translate3d(0, 100%, 0); 1784 | } 1785 | `, Ba = r` 1786 | from { 1787 | transform: translate3d(0, 0, 0); 1788 | } 1789 | 1790 | to { 1791 | visibility: hidden; 1792 | transform: translate3d(-100%, 0, 0); 1793 | } 1794 | `, Ma = r` 1795 | from { 1796 | transform: translate3d(0, 0, 0); 1797 | } 1798 | 1799 | to { 1800 | visibility: hidden; 1801 | transform: translate3d(100%, 0, 0); 1802 | } 1803 | `, Va = r` 1804 | from { 1805 | transform: translate3d(0, 0, 0); 1806 | } 1807 | 1808 | to { 1809 | visibility: hidden; 1810 | transform: translate3d(0, -100%, 0); 1811 | } 1812 | `, Na = r` 1813 | from { 1814 | opacity: 0; 1815 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 1816 | } 1817 | 1818 | to { 1819 | opacity: 1; 1820 | transform: translate3d(0, 0, 0); 1821 | } 1822 | `, Ja = r` 1823 | from { 1824 | opacity: 1; 1825 | } 1826 | 1827 | to { 1828 | opacity: 0; 1829 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 1830 | } 1831 | `, qa = r` 1832 | 0% { 1833 | animation-timing-function: ease-in-out; 1834 | } 1835 | 1836 | 20%, 1837 | 60% { 1838 | transform: rotate3d(0, 0, 1, 80deg); 1839 | animation-timing-function: ease-in-out; 1840 | } 1841 | 1842 | 40%, 1843 | 80% { 1844 | transform: rotate3d(0, 0, 1, 60deg); 1845 | animation-timing-function: ease-in-out; 1846 | opacity: 1; 1847 | } 1848 | 1849 | to { 1850 | transform: translate3d(0, 700px, 0); 1851 | opacity: 0; 1852 | } 1853 | `, Ka = r` 1854 | from { 1855 | opacity: 0; 1856 | transform: scale(0.1) rotate(30deg); 1857 | transform-origin: center bottom; 1858 | } 1859 | 1860 | 50% { 1861 | transform: rotate(-10deg); 1862 | } 1863 | 1864 | 70% { 1865 | transform: rotate(3deg); 1866 | } 1867 | 1868 | to { 1869 | opacity: 1; 1870 | transform: scale(1); 1871 | } 1872 | `, Ga = r` 1873 | from { 1874 | opacity: 0; 1875 | transform: scale3d(0.3, 0.3, 0.3); 1876 | } 1877 | 1878 | 50% { 1879 | opacity: 1; 1880 | } 1881 | `, Ha = r` 1882 | from { 1883 | opacity: 0; 1884 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); 1885 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1886 | } 1887 | 1888 | 60% { 1889 | opacity: 1; 1890 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 1891 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1892 | } 1893 | `, Za = r` 1894 | from { 1895 | opacity: 0; 1896 | transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); 1897 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1898 | } 1899 | 1900 | 60% { 1901 | opacity: 1; 1902 | transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); 1903 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1904 | } 1905 | `, Qa = r` 1906 | from { 1907 | opacity: 0; 1908 | transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); 1909 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1910 | } 1911 | 1912 | 60% { 1913 | opacity: 1; 1914 | transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); 1915 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1916 | } 1917 | `, te = r` 1918 | from { 1919 | opacity: 0; 1920 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); 1921 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1922 | } 1923 | 1924 | 60% { 1925 | opacity: 1; 1926 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 1927 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1928 | } 1929 | `, re = r` 1930 | from { 1931 | opacity: 1; 1932 | } 1933 | 1934 | 50% { 1935 | opacity: 0; 1936 | transform: scale3d(0.3, 0.3, 0.3); 1937 | } 1938 | 1939 | to { 1940 | opacity: 0; 1941 | } 1942 | `, ae = r` 1943 | 40% { 1944 | opacity: 1; 1945 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 1946 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1947 | } 1948 | 1949 | to { 1950 | opacity: 0; 1951 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); 1952 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1953 | } 1954 | `, ee = r` 1955 | 40% { 1956 | opacity: 1; 1957 | transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); 1958 | } 1959 | 1960 | to { 1961 | opacity: 0; 1962 | transform: scale(0.1) translate3d(-2000px, 0, 0); 1963 | } 1964 | `, ne = r` 1965 | 40% { 1966 | opacity: 1; 1967 | transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); 1968 | } 1969 | 1970 | to { 1971 | opacity: 0; 1972 | transform: scale(0.1) translate3d(2000px, 0, 0); 1973 | } 1974 | `, oe = r` 1975 | 40% { 1976 | opacity: 1; 1977 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 1978 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1979 | } 1980 | 1981 | to { 1982 | opacity: 0; 1983 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); 1984 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1985 | } 1986 | `, se = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ 1987 | __proto__: null, 1988 | backInDown: Ir, 1989 | backInLeft: Cr, 1990 | backInRight: Pr, 1991 | backInUp: Yr, 1992 | backOutDown: jr, 1993 | backOutLeft: Dr, 1994 | backOutRight: Xr, 1995 | backOutUp: Fr, 1996 | bounce: gr, 1997 | bounceIn: Lr, 1998 | bounceInDown: Ar, 1999 | bounceInLeft: zr, 2000 | bounceInRight: $r, 2001 | bounceInUp: Ur, 2002 | bounceOut: Wr, 2003 | bounceOutDown: Br, 2004 | bounceOutLeft: Mr, 2005 | bounceOutRight: Vr, 2006 | bounceOutUp: Nr, 2007 | fadeIn: Jr, 2008 | fadeInBottomLeft: qr, 2009 | fadeInBottomRight: Kr, 2010 | fadeInDown: Gr, 2011 | fadeInDownBig: Hr, 2012 | fadeInLeft: Zr, 2013 | fadeInLeftBig: Qr, 2014 | fadeInRight: ta, 2015 | fadeInRightBig: ra, 2016 | fadeInTopLeft: aa, 2017 | fadeInTopRight: ea, 2018 | fadeInUp: na, 2019 | fadeInUpBig: oa, 2020 | fadeOut: sa, 2021 | fadeOutBottomLeft: ia, 2022 | fadeOutBottomRight: ca, 2023 | fadeOutDown: fa, 2024 | fadeOutDownBig: la, 2025 | fadeOutLeft: da, 2026 | fadeOutLeftBig: ua, 2027 | fadeOutRight: ma, 2028 | fadeOutRightBig: pa, 2029 | fadeOutTopLeft: ya, 2030 | fadeOutTopRight: ga, 2031 | fadeOutUp: va, 2032 | fadeOutUpBig: ba, 2033 | flash: vr, 2034 | flip: xa, 2035 | flipInX: ha, 2036 | flipInY: Ra, 2037 | flipOutX: Oa, 2038 | flipOutY: _a, 2039 | headShake: br, 2040 | heartBeat: xr, 2041 | hinge: qa, 2042 | jackInTheBox: Ka, 2043 | jello: hr, 2044 | lightSpeedInLeft: Ea, 2045 | lightSpeedInRight: wa, 2046 | lightSpeedOutLeft: ka, 2047 | lightSpeedOutRight: Ta, 2048 | pulse: Rr, 2049 | rollIn: Na, 2050 | rollOut: Ja, 2051 | rotateIn: Sa, 2052 | rotateInDownLeft: Ia, 2053 | rotateInDownRight: Ca, 2054 | rotateInUpLeft: Pa, 2055 | rotateInUpRight: Ya, 2056 | rotateOut: ja, 2057 | rotateOutDownLeft: Da, 2058 | rotateOutDownRight: Xa, 2059 | rotateOutUpLeft: Fa, 2060 | rotateOutUpRight: La, 2061 | rubberBand: Or, 2062 | shake: _r, 2063 | shakeX: Er, 2064 | shakeY: wr, 2065 | slideInDown: Aa, 2066 | slideInLeft: za, 2067 | slideInRight: $a, 2068 | slideInUp: Ua, 2069 | slideOutDown: Wa, 2070 | slideOutLeft: Ba, 2071 | slideOutRight: Ma, 2072 | slideOutUp: Va, 2073 | swing: kr, 2074 | tada: Tr, 2075 | wobble: Sr, 2076 | zoomIn: Ga, 2077 | zoomInDown: Ha, 2078 | zoomInLeft: Za, 2079 | zoomInRight: Qa, 2080 | zoomInUp: te, 2081 | zoomOut: re, 2082 | zoomOutDown: ae, 2083 | zoomOutLeft: ee, 2084 | zoomOutRight: ne, 2085 | zoomOutUp: oe 2086 | }, Symbol.toStringTag, { value: "Module" })), ie = /* @__PURE__ */ new Set([ 2087 | "backfaceVisibility", 2088 | "transformOrigin", 2089 | "opacity", 2090 | "playState", 2091 | "fillMode", 2092 | "iterationCount", 2093 | "timingFunction", 2094 | "delay", 2095 | "duration", 2096 | "direction", 2097 | "name" 2098 | ]), ce = (f) => mr` 2099 | animation: ${f.duration} ${f.timingFunction} ${f.delay} 2100 | ${f.iterationCount} ${f.direction} ${f.fillMode} 2101 | ${f.playState} ${se[f.name]}; 2102 | `, fe = ur.div.withConfig({ 2103 | shouldForwardProp: (f) => !ie.has(f) 2104 | })` 2105 | transform-origin: ${(f) => f.transformOrigin}; 2106 | backface-visibility: ${(f) => f.backfaceVisibility}; 2107 | opacity: ${(f) => f.opacity}; 2108 | ${(f) => f.name && ce}; 2109 | `; 2110 | function ue({ 2111 | name: f = "shake", 2112 | duration: E = "2s", 2113 | timingFunction: j = "linear", 2114 | delay: O = "0s", 2115 | iterationCount: S = "infinite", 2116 | direction: I = "normal", 2117 | fillMode: w = "none", 2118 | playState: h = "running", 2119 | transformOrigin: u = "center", 2120 | backfaceVisibility: _ = "hidden", 2121 | opacity: p = 1, 2122 | children: b = /* @__PURE__ */ Tt.jsx("h1", { children: "Hello World" }), 2123 | style: R 2124 | }) { 2125 | return /* @__PURE__ */ Tt.jsx( 2126 | fe, 2127 | { 2128 | name: f, 2129 | duration: E, 2130 | timingFunction: j, 2131 | delay: O, 2132 | iterationCount: S, 2133 | direction: I, 2134 | fillMode: w, 2135 | playState: h, 2136 | transformOrigin: u, 2137 | backfaceVisibility: _, 2138 | opacity: p, 2139 | style: R, 2140 | children: b 2141 | } 2142 | ); 2143 | } 2144 | export { 2145 | ue as AnimateStyled 2146 | }; 2147 | --------------------------------------------------------------------------------