├── .npmignore ├── src ├── type-transitions.js ├── animations.js ├── slide │ └── slide.js ├── fade │ └── fade.js ├── scale │ └── scale.js ├── rotate │ └── rotate.js ├── css-properties.js ├── bounce │ └── bounce.js └── index.js ├── .github └── FUNDING.yml ├── package.json ├── .gitignore ├── README.md └── lib ├── animated.mjs ├── animated.js └── animated.umd.js /.npmignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/type-transitions.js: -------------------------------------------------------------------------------- 1 | export const transitionTypes = ['hover', 'focus', 'blur', 'active']; 2 | -------------------------------------------------------------------------------- /src/animations.js: -------------------------------------------------------------------------------- 1 | import * as BounceAnimations from './bounce/bounce'; 2 | import * as ScaleAnimations from './scale/scale'; 3 | import * as FadeAnimations from './fade/fade'; 4 | import * as RotateAnimations from './rotate/rotate'; 5 | import * as SlideAnimations from './slide/slide'; 6 | 7 | export { 8 | BounceAnimations, 9 | ScaleAnimations, 10 | FadeAnimations, 11 | RotateAnimations, 12 | SlideAnimations 13 | }; 14 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: alexvcasillas 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animated-styled-components", 3 | "version": "0.6.0", 4 | "description": "React Animated Styled Components", 5 | "main": "lib/animated.js", 6 | "scripts": { 7 | "build": "microbundle --jsx React.createElement --external react,styled-components", 8 | "prepare": "yarn build" 9 | }, 10 | "keywords": [ 11 | "react", 12 | "animated", 13 | "styled-components", 14 | "animations", 15 | "transitions", 16 | "css" 17 | ], 18 | "author": "Alex Casillas ", 19 | "license": "MIT", 20 | "devDependencies": { 21 | "microbundle": "^0.11.0" 22 | }, 23 | "peerDependencies": { 24 | "react": "^16.8.5", 25 | "styled-components": "^4.2.0" 26 | }, 27 | "dependencies": {} 28 | } 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | build 35 | dist 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # Typescript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env -------------------------------------------------------------------------------- /src/slide/slide.js: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const SlideInTop = keyframes` 4 | 0% { 5 | transform: translateY(-1000px); 6 | opacity: 0; 7 | } 8 | 100% { 9 | transform: translateY(0); 10 | opacity: 1; 11 | } 12 | `; 13 | 14 | export const SlideOutTop = keyframes` 15 | 0% { 16 | transform: translateY(0); 17 | opacity: 1; 18 | } 19 | 100% { 20 | transform: translateY(-1000px); 21 | opacity: 0; 22 | } 23 | `; 24 | 25 | export const SlideInLeft = keyframes` 26 | 0% { 27 | transform: translateX(-1000px); 28 | opacity: 0; 29 | } 30 | 100% { 31 | transform: translateX(0); 32 | opacity: 1; 33 | } 34 | `; 35 | 36 | export const SlideOutLeft = keyframes` 37 | 0% { 38 | transform: translateX(0); 39 | opacity: 1; 40 | } 41 | 100% { 42 | transform: translateX(-1000px); 43 | opacity: 0; 44 | } 45 | `; 46 | 47 | export const SlideInTopRight = keyframes` 48 | 0% { 49 | transform: translateY(-1000px) translateX(1000px); 50 | opacity: 0; 51 | } 52 | 100% { 53 | transform: translateY(0) translateX(0); 54 | opacity: 1; 55 | } 56 | `; 57 | 58 | export const SlideOutTopRight = keyframes` 59 | 0% { 60 | transform: translateY(0) translateX(0); 61 | opacity: 1; 62 | } 63 | 100% { 64 | transform: translateY(-1000px) translateX(1000px); 65 | opacity: 0; 66 | } 67 | `; 68 | 69 | export const SlideInTopLeft = keyframes` 70 | 0% { 71 | transform: translateY(-1000px) translateX(-1000px); 72 | opacity: 0; 73 | } 74 | 100% { 75 | transform: translateY(0) translateX(0); 76 | opacity: 1; 77 | } 78 | `; 79 | 80 | export const SlideOutTopLeft = keyframes` 81 | 0% { 82 | transform: translateY(0) translateX(0); 83 | opacity: 1; 84 | } 85 | 100% { 86 | transform: translateY(-1000px) translateX(-1000px); 87 | opacity: 0; 88 | } 89 | `; 90 | 91 | export const SlideInRight = keyframes` 92 | 0% { 93 | transform: translateX(1000px); 94 | opacity: 0; 95 | } 96 | 100% { 97 | transform: translateX(0); 98 | opacity: 1; 99 | } 100 | `; 101 | 102 | export const SlideOutRight = keyframes` 103 | 0% { 104 | transform: translateX(0); 105 | opacity: 1; 106 | } 107 | 100% { 108 | transform: translateX(1000px); 109 | opacity: 0; 110 | } 111 | `; 112 | 113 | export const SlideInBottomRight = keyframes` 114 | 0% { 115 | transform: translateY(1000px) translateX(1000px); 116 | opacity: 0; 117 | } 118 | 100% { 119 | transform: translateY(0) translateX(0); 120 | opacity: 1; 121 | } 122 | `; 123 | 124 | export const SlideOutBottomRight = keyframes` 125 | 0% { 126 | transform: translateY(0) translateX(0); 127 | opacity: 1; 128 | } 129 | 100% { 130 | transform: translateY(1000px) translateX(1000px); 131 | opacity: 0; 132 | } 133 | `; 134 | 135 | export const SlideInBottom = keyframes` 136 | 0% { 137 | transform: translateY(1000px); 138 | opacity: 0; 139 | } 140 | 100% { 141 | transform: translateY(0); 142 | opacity: 1; 143 | } 144 | `; 145 | 146 | export const SlideOutBottom = keyframes` 147 | 0% { 148 | transform: translateY(0); 149 | opacity: 1; 150 | } 151 | 100% { 152 | transform: translateY(1000px); 153 | opacity: 0; 154 | } 155 | `; 156 | 157 | export const SlideInBottomLeft = keyframes` 158 | 0% { 159 | transform: translateY(1000px) translateX(-1000px); 160 | opacity: 0; 161 | } 162 | 100% { 163 | transform: translateY(0) translateX(0); 164 | opacity: 1; 165 | } 166 | `; 167 | 168 | export const SlideOutBottomLeft = keyframes` 169 | 0% { 170 | transform: translateY(0) translateX(0); 171 | opacity: 1; 172 | } 173 | 100% { 174 | transform: translateY(1000px) translateX(-1000px); 175 | opacity: 0; 176 | } 177 | `; 178 | -------------------------------------------------------------------------------- /src/fade/fade.js: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const FadeIn = keyframes` 4 | 0% { 5 | opacity: 0; 6 | } 7 | 100% { 8 | opacity: 1; 9 | } 10 | `; 11 | 12 | export const FadeOut = keyframes` 13 | 0% { 14 | opacity: 1; 15 | } 16 | 100% { 17 | opacity: 0; 18 | } 19 | `; 20 | 21 | export const FadeInFadeOut = keyframes` 22 | 0% { 23 | opacity: 0; 24 | } 25 | 50% { 26 | opacity: 1; 27 | } 28 | 100% { 29 | opacity: 0; 30 | } 31 | `; 32 | 33 | export const FadeInTop = keyframes` 34 | 0% { 35 | transform: translateY(-50px); 36 | opacity: 0; 37 | } 38 | 100% { 39 | transform: translateY(0); 40 | opacity: 1; 41 | } 42 | `; 43 | 44 | export const FadeOutTop = keyframes` 45 | 0% { 46 | transform: translateY(0px); 47 | opacity: 1; 48 | } 49 | 100% { 50 | transform: translateY(-50px); 51 | opacity: 0; 52 | } 53 | `; 54 | 55 | export const FadeInBottom = keyframes` 56 | 0% { 57 | transform: translateY(50px); 58 | opacity: 0; 59 | } 60 | 100% { 61 | transform: translateY(0); 62 | opacity: 1; 63 | } 64 | `; 65 | 66 | export const FadeOutBottom = keyframes` 67 | 0% { 68 | transform: translateY(0); 69 | opacity: 1; 70 | } 71 | 100% { 72 | transform: translateY(50px); 73 | opacity: 0; 74 | } 75 | `; 76 | 77 | export const FadeInLeft = keyframes` 78 | 0% { 79 | transform: translateX(-50px); 80 | opacity: 0; 81 | } 82 | 100% { 83 | transform: translateX(0); 84 | opacity: 1; 85 | } 86 | `; 87 | 88 | export const FadeOutLeft = keyframes` 89 | 0% { 90 | transform: translateX(0); 91 | opacity: 1; 92 | } 93 | 100% { 94 | transform: translateX(-50px); 95 | opacity: 0; 96 | } 97 | `; 98 | 99 | export const FadeInRight = keyframes` 100 | 0% { 101 | transform: translateX(50px); 102 | opacity: 0; 103 | } 104 | 100% { 105 | transform: translateX(0); 106 | opacity: 1; 107 | } 108 | `; 109 | 110 | export const FadeOutRight = keyframes` 111 | 0% { 112 | transform: translateX(0); 113 | opacity: 1; 114 | } 115 | 100% { 116 | transform: translateX(50px); 117 | opacity: 0; 118 | } 119 | `; 120 | 121 | export const FadeInForwards = keyframes` 122 | 0% { 123 | transform: scale(0.6); 124 | opacity: 0; 125 | } 126 | 100% { 127 | transform: scale(1); 128 | opacity: 1; 129 | } 130 | `; 131 | 132 | export const FadeOutForwards = keyframes` 133 | 0% { 134 | transform: scale(1); 135 | opacity: 1; 136 | } 137 | 100% { 138 | transform: scale(1.4); 139 | opacity: 0; 140 | } 141 | `; 142 | 143 | export const FadeInBackwards = keyframes` 144 | 0% { 145 | transform: scale(1.4); 146 | opacity: 0; 147 | } 148 | 100% { 149 | transform: scale(1); 150 | opacity: 1; 151 | } 152 | `; 153 | 154 | export const FadeOutBackwards = keyframes` 155 | 0% { 156 | transform: scale(1); 157 | opacity: 1; 158 | } 159 | 100% { 160 | transform: scale(0.6); 161 | opacity: 0; 162 | } 163 | `; 164 | 165 | export const FadeInBottomLeft = keyframes` 166 | 0% { 167 | transform: translateX(-50px) translateY(50px); 168 | opacity: 0; 169 | } 170 | 100% { 171 | transform: translateX(0) translateY(0); 172 | opacity: 1; 173 | } 174 | `; 175 | 176 | export const FadeOutBottomLeft = keyframes` 177 | 0% { 178 | transform: translateX(0) translateY(0); 179 | opacity: 1; 180 | } 181 | 100% { 182 | transform: translateX(-50px) translateY(50px); 183 | opacity: 0; 184 | } 185 | `; 186 | 187 | export const FadeInBottomRight = keyframes` 188 | 0% { 189 | transform: translateX(50px) translateY(50px); 190 | opacity: 0; 191 | } 192 | 100% { 193 | transform: translateX(0) translateY(0); 194 | opacity: 1; 195 | } 196 | `; 197 | 198 | export const FadeOutBottomRight = keyframes` 199 | 0% { 200 | transform: translateX(0) translateY(0); 201 | opacity: 1; 202 | } 203 | 100% { 204 | transform: translateX(50px) translateY(50px); 205 | opacity: 0; 206 | } 207 | `; 208 | 209 | export const FadeInTopLeft = keyframes` 210 | 0% { 211 | transform: translateX(-50px) translateY(-50px); 212 | opacity: 0; 213 | } 214 | 100% { 215 | transform: translateX(0) translateY(0); 216 | opacity: 1; 217 | } 218 | `; 219 | 220 | export const FadeOutTopLeft = keyframes` 221 | 0% { 222 | transform: translateX(0) translateY(0); 223 | opacity: 1; 224 | } 225 | 100% { 226 | transform: translateX(-50px) translateY(-50px); 227 | opacity: 0; 228 | } 229 | `; 230 | 231 | export const FadeInTopRight = keyframes` 232 | 0% { 233 | transform: translateX(50px) translateY(-50px); 234 | opacity: 0; 235 | } 236 | 100% { 237 | transform: translateX(0) translateY(0); 238 | opacity: 1; 239 | } 240 | `; 241 | 242 | export const FadeOutTopRight = keyframes` 243 | 0% { 244 | transform: translateX(0) translateY(0); 245 | opacity: 1; 246 | } 247 | 100% { 248 | transform: translateX(50px) translateY(-50px); 249 | opacity: 0; 250 | } 251 | `; 252 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### Animated Styled Components 2 | 3 | React Animated Styled Components is a library that aims to make ease to use plug and play animated components. 4 | 5 | ### Installing Animated Styled Components 6 | 7 | NPM 8 | 9 | ``` 10 | npm i --save animated-styled-components 11 | ``` 12 | 13 | YARN 14 | 15 | ``` 16 | yarn add animated-styled-components 17 | ``` 18 | 19 | ### Demo 20 | 21 | You can check for a working [CodeSandbox](https://codesandbox.io/s/1o4n5765rj) to see a small demonstration of this library. 22 | 23 | 24 | ### Using the Animated Component 25 | 26 | To make use of the **Animated** component you need to include the library into your project and create a new component just like you would do with any other react component. 27 | 28 | ``` 29 | import React, { Component } from 'react'; 30 | // Make the import into your react component file 31 | import { Animated, FadeAnimations, RotateAnimations } from 'animated-styled-components'; 32 | 33 | class Showcase extends Component { 34 | render() { 35 | return ( 36 |
37 | 56 | This is an animated component 57 | 58 |
59 | ); 60 | } 61 | } 62 | 63 | ``` 64 | 65 | At the above example you can see a basic structure of an **Animated Component**. We will dig more into all the props later on this documentation. 66 | 67 | ### Props 68 | 69 | The **Animated Component** doesn't need to be filled with any props, if you don't provide props, it will just simply do nothing, but, to make the magic happen, those props are the following: `animation` and `transitions`. 70 | 71 | ### Animation Prop 72 | 73 | The `animation` prop is an `object` that needs to have the following structure: 74 | 75 | ``` 76 | animation={{ 77 | delay_in: 5, 78 | in: FadeAnimations.FadeInBottom, 79 | duration_in: 1, 80 | continuous: RotateAnimations.RotateCenter, 81 | duration_continuous: 1, 82 | out: FadeAnimations.FadeOutTop, 83 | duration_out: 1, 84 | delay_between: 5, 85 | iteration: 86 | }} 87 | ``` 88 | 89 | **Deconstructing the `animation` prop** 90 | 91 | * `in`: This property receives an animation keyframe that will be used to animate in the component. 92 | * `delay_in`: This property receives and integer and will set the time that the component will take to start being animated. While this time isn't reached, the component will be mounted but will display nothing. If this property is not setted there won't be any delay in for the component to start animating. 93 | * `duration_in`: This property receives and integer greater than 0 and will set the duration in seconds for the `in` animation. 94 | * `continuous`: This property receives an animation keyframe that will be used to animate between `in` and `out` (if proceed). 95 | * `duration_continuous`: This property receives an integer greater than 0 and will set the duration in seconds for the `continuous` animation. 96 | * `out`: This property receives an animation keyframe that will be used to animate out the component. 97 | * `duration_out`: This property receives and integer greater than 0 and will set the duration in seconds for the `out` animation. 98 | * `delay_between`: This property receives and integer geater or equals to 0 and will set the time that will wait between the `in` and `out` animations. 99 | * `iteration`: This property receives and integer greater than 0 or the **literal** 'infinite' and will set the amount of iterations the animation should be doing until it goes out (if it should). 100 | 101 | ### Transitions Prop 102 | 103 | The `transitions` prop is an `array` of `objects` with the desired transitions that should be handled and needs to have the following structure: 104 | 105 | ``` 106 | transitions={[ 107 | { 108 | type: 'hover', 109 | from: { property: 'border-radius', value: 0 }, 110 | to: { property: 'border-radius', value: 10 } 111 | } 112 | ]} 113 | ``` 114 | 115 | **Deconstructing the `transitions` prop** 116 | 117 | An array of objects that must contain the following structure: 118 | 119 | * `type`: This property must be a string literal from the following literals available: `hover`, `focus`, `blur`, `active`. This property is the one who's going to set the type of transition we want to achieve. 120 | * `from`: This property will define the starting values of the properties to transition. This property must be an object with the following inner properties: 121 | * `property`: This property must be a valid CSS property (it will be checked to avoid using unknown properties). 122 | * `value`: This property must be a string or a number depending on the property type (will be automatically checked to prevent inconsistencies). 123 | * `to`: This property will define the ending values of the properties to transition. This property must be an object with the following inner properties: 124 | * `property`: This property must be a valid CSS property (it will be checked to avoid using unknown properties). 125 | * `value`: This property must be a string or a number depending on the property type (will be automatically checked to prevent inconsistencies). 126 | 127 | 128 | ### Animations 129 | 130 | This component gives you a lot of built-in animations that are well tested and ready to be used. 131 | 132 | If you want to use our built-in animations you only need to to the following when importing `animated-styled-components`: 133 | 134 | `{ AnimationsType } from 'animated-styled-components';` 135 | 136 | Where **AnimationsType** are one of the following avaible grouped animations. Each of this groups have the animations. 137 | 138 | #### BounceAnimations 139 | 140 | With the following implemented animations: 141 | 142 | `BounceInForwards` 143 | 144 | --- 145 | 146 | #### ScaleAnimations 147 | 148 | With the following implemented animations: 149 | 150 | `ScaleInCenter` 151 | 152 | --- 153 | 154 | #### FadeAnimations 155 | 156 | With the following implemented animations: 157 | 158 | `FadeIn` 159 | 160 | `FadeInTop` 161 | 162 | `FadeOutTop` 163 | 164 | `FadeInBottom` 165 | 166 | `FadeInLeft` 167 | 168 | `FadeInRight` 169 | 170 | 171 | --- 172 | 173 | #### RotateAnimations 174 | 175 | With the following implemented animations: 176 | 177 | `RotateInCenter` 178 | 179 | `RotateCenter` 180 | 181 | --- 182 | 183 | #### SlideAnimations 184 | 185 | With the following implemented animations: 186 | 187 | `SlideTop` -------------------------------------------------------------------------------- /src/scale/scale.js: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const ScaleInCenter = keyframes` 4 | 0% { 5 | transform: scale(0); 6 | opacity: 1; 7 | } 8 | 100% { 9 | transform: scale(1); 10 | opacity: 1; 11 | } 12 | `; 13 | 14 | export const ScaleOutCenter = keyframes` 15 | 0% { 16 | transform: scale(1); 17 | opacity: 1; 18 | } 19 | 100% { 20 | transform: scale(0); 21 | opacity: 1; 22 | } 23 | `; 24 | 25 | export const ScaleInBottomLeft = keyframes` 26 | 0% { 27 | transform: scale(0); 28 | transform-origin: 0% 100%; 29 | opacity: 1; 30 | } 31 | 100% { 32 | transform: scale(1); 33 | transform-origin: 0% 100%; 34 | opacity: 1; 35 | } 36 | `; 37 | 38 | export const ScaleOutBottomLeft = keyframes` 39 | 0% { 40 | transform: scale(1); 41 | transform-origin: 0% 100%; 42 | opacity: 1; 43 | } 44 | 100% { 45 | transform: scale(0); 46 | transform-origin: 0% 100%; 47 | opacity: 1; 48 | } 49 | `; 50 | 51 | export const ScaleInVerticalCenter = keyframes` 52 | 0% { 53 | transform: scaleY(0); 54 | opacity: 1; 55 | } 56 | 100% { 57 | transform: scaleY(1); 58 | opacity: 1; 59 | } 60 | `; 61 | 62 | export const ScaleOutVerticalCenter = keyframes` 63 | 0% { 64 | transform: scaleY(1); 65 | opacity: 1; 66 | } 67 | 100% { 68 | transform: scaleY(0); 69 | opacity: 1; 70 | } 71 | `; 72 | 73 | export const ScaleInTop = keyframes` 74 | 0% { 75 | transform: scale(0); 76 | transform-origin: 50% 0%; 77 | opacity: 1; 78 | } 79 | 100% { 80 | transform: scale(1); 81 | transform-origin: 50% 0%; 82 | opacity: 1; 83 | } 84 | `; 85 | 86 | export const ScaleOutTop = keyframes` 87 | 0% { 88 | transform: scale(1); 89 | transform-origin: 50% 0%; 90 | opacity: 1; 91 | } 92 | 100% { 93 | transform: scale(0); 94 | transform-origin: 50% 0%; 95 | opacity: 1; 96 | } 97 | `; 98 | 99 | export const ScaleInLeft = keyframes` 100 | 0% { 101 | transform: scale(0); 102 | transform-origin: 0% 50%; 103 | opacity: 1; 104 | } 105 | 100% { 106 | transform: scale(1); 107 | transform-origin: 0% 50%; 108 | opacity: 1; 109 | } 110 | `; 111 | 112 | export const ScaleOutLeft = keyframes` 113 | 0% { 114 | transform: scale(1); 115 | transform-origin: 0% 50%; 116 | opacity: 1; 117 | } 118 | 100% { 119 | transform: scale(0); 120 | transform-origin: 0% 50%; 121 | opacity: 1; 122 | } 123 | `; 124 | 125 | export const ScaleInVerticalTop = keyframes` 126 | 0% { 127 | transform: scaleY(0); 128 | transform-origin: 100% 0%; 129 | opacity: 1; 130 | } 131 | 100% { 132 | transform: scaleY(1); 133 | transform-origin: 100% 0%; 134 | opacity: 1; 135 | } 136 | `; 137 | 138 | export const ScaleOutVerticalTop = keyframes` 139 | 0% { 140 | transform: scaleY(1); 141 | transform-origin: 100% 0%; 142 | opacity: 1; 143 | } 144 | 100% { 145 | transform: scaleY(0); 146 | transform-origin: 100% 0%; 147 | opacity: 1; 148 | } 149 | `; 150 | 151 | export const ScaleInTopRight = keyframes` 152 | 0% { 153 | transform: scale(0); 154 | transform-origin: 100% 0%; 155 | opacity: 1; 156 | } 157 | 100% { 158 | transform: scale(1); 159 | transform-origin: 100% 0%; 160 | opacity: 1; 161 | } 162 | `; 163 | 164 | export const ScaleOutTopRight = keyframes` 165 | 0% { 166 | transform: scale(1); 167 | transform-origin: 100% 0%; 168 | opacity: 1; 169 | } 170 | 100% { 171 | transform: scale(0); 172 | transform-origin: 100% 0%; 173 | opacity: 1; 174 | } 175 | `; 176 | 177 | export const ScaleInTopLeft = keyframes` 178 | 0% { 179 | transform: scale(0); 180 | transform-origin: 0% 0%; 181 | opacity: 1; 182 | } 183 | 100% { 184 | transform: scale(1); 185 | transform-origin: 0% 0%; 186 | opacity: 1; 187 | } 188 | `; 189 | 190 | export const ScaleOutTopLeft = keyframes` 191 | 0% { 192 | transform: scale(1); 193 | transform-origin: 0 0; 194 | opacity: 1; 195 | } 196 | 100% { 197 | transform: scale(0); 198 | transform-origin: 0 0; 199 | opacity: 1; 200 | } 201 | `; 202 | 203 | export const ScaleInVerticalBottom = keyframes` 204 | 0% { 205 | transform: scaleY(0); 206 | transform-origin: 0% 100%; 207 | opacity: 1; 208 | } 209 | 100% { 210 | transform: scaleY(1); 211 | transform-origin: 0% 100%; 212 | opacity: 1; 213 | } 214 | `; 215 | 216 | export const ScaleOutVerticalBottom = keyframes` 217 | 0% { 218 | transform: scaleY(1); 219 | transform-origin: 0% 100%; 220 | opacity: 1; 221 | } 222 | 100% { 223 | transform: scaleY(0); 224 | transform-origin: 0% 100%; 225 | opacity: 1; 226 | } 227 | `; 228 | 229 | export const ScaleInRight = keyframes` 230 | 0% { 231 | transform: scale(0); 232 | transform-origin: 100% 50%; 233 | opacity: 1; 234 | } 235 | 100% { 236 | transform: scale(1); 237 | transform-origin: 100% 50%; 238 | opacity: 1; 239 | } 240 | `; 241 | 242 | export const ScaleOutRight = keyframes` 243 | 0% { 244 | transform: scale(1); 245 | transform-origin: 100% 50%; 246 | opacity: 1; 247 | } 248 | 100% { 249 | transform: scale(0); 250 | transform-origin: 100% 50%; 251 | opacity: 1; 252 | } 253 | `; 254 | 255 | export const ScaleInHorizontalCenter = keyframes` 256 | 0% { 257 | transform: scaleX(0); 258 | opacity: 1; 259 | } 260 | 100% { 261 | transform: scaleX(1); 262 | opacity: 1; 263 | } 264 | `; 265 | 266 | export const ScaleOutHorizontalCenter = keyframes` 267 | 0% { 268 | transform: scaleX(1); 269 | opacity: 1; 270 | } 271 | 100% { 272 | transform: scaleX(0); 273 | opacity: 1; 274 | } 275 | `; 276 | 277 | export const ScaleInBottomRight = keyframes` 278 | 0% { 279 | transform: scale(0); 280 | transform-origin: 100% 100%; 281 | opacity: 1; 282 | } 283 | 100% { 284 | transform: scale(1); 285 | transform-origin: 100% 100%; 286 | opacity: 1; 287 | } 288 | `; 289 | 290 | export const ScaleOutBottomRight = keyframes` 291 | 0% { 292 | transform: scale(1); 293 | transform-origin: 100% 100%; 294 | opacity: 1; 295 | } 296 | 100% { 297 | transform: scale(0); 298 | transform-origin: 100% 100%; 299 | opacity: 1; 300 | } 301 | `; 302 | 303 | export const ScaleInHorizontalLeft = keyframes` 304 | 0% { 305 | transform: scaleX(0); 306 | transform-origin: 0% 0%; 307 | opacity: 1; 308 | } 309 | 100% { 310 | transform: scaleX(1); 311 | transform-origin: 0% 0%; 312 | opacity: 1; 313 | } 314 | `; 315 | 316 | export const ScaleOutHorizontalLeft = keyframes` 317 | 0% { 318 | transform: scaleX(1); 319 | transform-origin: 0 0; 320 | opacity: 1; 321 | } 322 | 100% { 323 | transform: scaleX(0); 324 | transform-origin: 0 0; 325 | opacity: 1; 326 | } 327 | `; 328 | 329 | export const ScaleInBottom = keyframes` 330 | 0% { 331 | transform: scale(0); 332 | transform-origin: 50% 100%; 333 | opacity: 1; 334 | } 335 | 100% { 336 | transform: scale(1); 337 | transform-origin: 50% 100%; 338 | opacity: 1; 339 | } 340 | `; 341 | 342 | export const ScaleOutBottom = keyframes` 343 | 0% { 344 | transform: scale(1); 345 | transform-origin: 50% 100%; 346 | opacity: 1; 347 | } 348 | 100% { 349 | transform: scale(0); 350 | transform-origin: 50% 100%; 351 | opacity: 1; 352 | } 353 | `; 354 | 355 | export const ScaleInHorizontalRight = keyframes` 356 | 0% { 357 | transform: scaleX(0); 358 | transform-origin: 100% 100%; 359 | opacity: 1; 360 | } 361 | 100% { 362 | transform: scaleX(1); 363 | transform-origin: 100% 100%; 364 | opacity: 1; 365 | } 366 | `; 367 | 368 | export const ScaleOutHorizontalRight = keyframes` 369 | 0% { 370 | transform: scaleX(1); 371 | transform-origin: 100% 100%; 372 | opacity: 1; 373 | } 374 | 100% { 375 | transform: scaleX(0); 376 | transform-origin: 100% 100%; 377 | opacity: 1; 378 | } 379 | `; 380 | -------------------------------------------------------------------------------- /src/rotate/rotate.js: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const RotateInCenter = keyframes` 4 | 0% { 5 | transform: rotate(-360deg); 6 | opacity: 0; 7 | } 8 | 100% { 9 | transform: rotate(0); 10 | opacity: 1; 11 | } 12 | `; 13 | 14 | export const RotateOutCenter = keyframes` 15 | 0% { 16 | transform: rotate(0); 17 | opacity: 1; 18 | } 19 | 100% { 20 | transform: rotate(-360deg); 21 | opacity: 0; 22 | } 23 | `; 24 | 25 | export const RotateInBottomLeft = keyframes` 26 | 0% { 27 | transform: rotate(-360deg); 28 | transform-origin: bottom left; 29 | opacity: 0; 30 | } 31 | 100% { 32 | transform: rotate(0deg); 33 | transform-origin: bottom left; 34 | opacity: 1; 35 | } 36 | `; 37 | 38 | export const RotateOutBottomLeft = keyframes` 39 | 0% { 40 | transform: rotate(0); 41 | transform-origin: bottom left; 42 | opacity: 1; 43 | } 44 | 100% { 45 | transform: rotate(-360deg); 46 | transform-origin: bottom left; 47 | opacity: 0; 48 | } 49 | `; 50 | 51 | export const RotateInTop = keyframes` 52 | 0% { 53 | transform: rotate(-360deg); 54 | transform-origin: top; 55 | opacity: 0; 56 | } 57 | 100% { 58 | transform: rotate(0deg); 59 | transform-origin: top; 60 | opacity: 1; 61 | } 62 | `; 63 | 64 | export const RotateOutTop = keyframes` 65 | 0% { 66 | transform: rotate(0); 67 | transform-origin: top; 68 | opacity: 1; 69 | } 70 | 100% { 71 | transform: rotate(-360deg); 72 | transform-origin: top; 73 | opacity: 0; 74 | } 75 | `; 76 | 77 | export const RotateInLeft = keyframes` 78 | 0% { 79 | transform: rotate(-360deg); 80 | transform-origin: left; 81 | opacity: 0; 82 | } 83 | 100% { 84 | transform: rotate(0deg); 85 | transform-origin: left; 86 | opacity: 1; 87 | } 88 | `; 89 | 90 | export const RotateOutLeft = keyframes` 91 | 0% { 92 | transform: rotate(0); 93 | transform-origin: left; 94 | opacity: 1; 95 | } 96 | 100% { 97 | transform: rotate(-360deg); 98 | transform-origin: left; 99 | opacity: 0; 100 | } 101 | `; 102 | 103 | export const RotateInTopRight = keyframes` 104 | 0% { 105 | transform: rotate(-360deg); 106 | transform-origin: top right; 107 | opacity: 0; 108 | } 109 | 100% { 110 | transform: rotate(0deg); 111 | transform-origin: top right; 112 | opacity: 1; 113 | } 114 | `; 115 | 116 | export const RotateOutTopRight = keyframes` 117 | 0% { 118 | transform: rotate(0); 119 | transform-origin: top right; 120 | opacity: 1; 121 | } 122 | 100% { 123 | transform: rotate(-360deg); 124 | transform-origin: top right; 125 | opacity: 0; 126 | } 127 | `; 128 | 129 | export const RotateInTopLeft = keyframes` 130 | 0% { 131 | transform: rotate(-360deg); 132 | transform-origin: top left; 133 | opacity: 0; 134 | } 135 | 100% { 136 | transform: rotate(0deg); 137 | transform-origin: top left; 138 | opacity: 1; 139 | } 140 | `; 141 | 142 | export const RotateOutTopLeft = keyframes` 143 | 0% { 144 | transform: rotate(0); 145 | transform-origin: top left; 146 | opacity: 1; 147 | } 148 | 100% { 149 | transform: rotate(-360deg); 150 | transform-origin: top left; 151 | opacity: 0; 152 | } 153 | `; 154 | 155 | export const RotateInRight = keyframes` 156 | 0% { 157 | transform: rotate(-360deg); 158 | transform-origin: right; 159 | opacity: 0; 160 | } 161 | 100% { 162 | transform: rotate(0deg); 163 | transform-origin: right; 164 | opacity: 1; 165 | } 166 | `; 167 | 168 | export const RotateOutRight = keyframes` 169 | 0% { 170 | transform: rotate(0); 171 | transform-origin: right; 172 | opacity: 1; 173 | } 174 | 100% { 175 | transform: rotate(-360deg); 176 | transform-origin: right; 177 | opacity: 0; 178 | } 179 | `; 180 | 181 | export const RotateInHorizontal = keyframes` 182 | 0% { 183 | transform: rotateX(360deg); 184 | opacity: 0; 185 | } 186 | 100% { 187 | transform: rotateX(0deg); 188 | opacity: 1; 189 | } 190 | `; 191 | 192 | export const RotateOutHorizontal = keyframes` 193 | 0% { 194 | transform: rotateX(360deg); 195 | opacity: 1; 196 | } 197 | 100% { 198 | transform: rotateX(0deg); 199 | opacity: 0; 200 | } 201 | `; 202 | 203 | export const RotateInBottomRight = keyframes` 204 | 0% { 205 | transform: rotate(-360deg); 206 | transform-origin: bottom right; 207 | opacity: 0; 208 | } 209 | 100% { 210 | transform: rotate(0deg); 211 | transform-origin: bottom right; 212 | opacity: 1; 213 | } 214 | `; 215 | 216 | export const RotateOutBottomRight = keyframes` 217 | 0% { 218 | transform: rotate(0); 219 | transform-origin: bottom right; 220 | opacity: 1; 221 | } 222 | 100% { 223 | transform: rotate(-360deg); 224 | transform-origin: bottom right; 225 | opacity: 0; 226 | } 227 | `; 228 | 229 | export const RotateInVertical = keyframes` 230 | 0% { 231 | transform: rotateY(-360deg); 232 | opacity: 0; 233 | } 234 | 100% { 235 | transform: rotateY(0deg); 236 | opacity: 1; 237 | } 238 | `; 239 | 240 | export const RotateOutVertical = keyframes` 241 | 0% { 242 | transform: rotateY(360deg); 243 | opacity: 1; 244 | } 245 | 100% { 246 | transform: rotateY(0deg); 247 | opacity: 0; 248 | } 249 | `; 250 | 251 | export const RotateInBottom = keyframes` 252 | 0% { 253 | transform: rotate(-360deg); 254 | transform-origin: bottom; 255 | opacity: 0; 256 | } 257 | 100% { 258 | transform: rotate(0deg); 259 | transform-origin: bottom; 260 | opacity: 1; 261 | } 262 | `; 263 | 264 | export const RotateOutBottom = keyframes` 265 | 0% { 266 | transform: rotate(0); 267 | transform-origin: bottom; 268 | opacity: 1; 269 | } 270 | 100% { 271 | transform: rotate(-360deg); 272 | transform-origin: bottom; 273 | opacity: 0; 274 | } 275 | `; 276 | 277 | export const RotateInDiagonal = keyframes` 278 | 0% { 279 | transform: rotate3d(-1, 1, 0, -360deg); 280 | opacity: 0; 281 | } 282 | 100% { 283 | transform: rotate3d(-1, 1, 0, 0deg); 284 | opacity: 1; 285 | } 286 | `; 287 | 288 | export const RotateOutDiagonal = keyframes` 289 | 0% { 290 | transform: rotate3d(-1, 1, 0, 360deg); 291 | opacity: 1; 292 | } 293 | 100% { 294 | transform: rotate3d(-1, 1, 0, 0deg); 295 | opacity: 0; 296 | } 297 | `; 298 | 299 | export const RotateInDiagonalReverse = keyframes` 300 | 0% { 301 | transform: rotate3d(1, 1, 0, -360deg); 302 | opacity: 0; 303 | } 304 | 100% { 305 | transform: rotate3d(1, 1, 0, 0deg); 306 | opacity: 1; 307 | } 308 | `; 309 | 310 | export const RotateOutDiagonalReverse = keyframes` 311 | 0% { 312 | transform: rotate3d(1, 1, 0, 360deg); 313 | opacity: 1; 314 | } 315 | 100% { 316 | transform: rotate3d(1, 1, 0, 0deg); 317 | opacity: 0; 318 | } 319 | `; 320 | 321 | export const RotateIn45Right = keyframes` 322 | 0% { 323 | transform: rotate(-45deg); 324 | opacity: 0; 325 | } 326 | 100% { 327 | transform: rotate(0); 328 | opacity: 1; 329 | } 330 | `; 331 | 332 | export const RotateOut45Right = keyframes` 333 | 0% { 334 | transform: rotate(0); 335 | opacity: 1; 336 | } 337 | 100% { 338 | transform: rotate(45deg); 339 | opacity: 0; 340 | } 341 | `; 342 | 343 | export const RotateIn45Left = keyframes` 344 | 0% { 345 | transform: rotate(45deg); 346 | opacity: 0; 347 | } 348 | 100% { 349 | transform: rotate(0); 350 | opacity: 1; 351 | } 352 | `; 353 | 354 | export const RotateOut45Left = keyframes` 355 | 0% { 356 | transform: rotate(0); 357 | opacity: 1; 358 | } 359 | 100% { 360 | transform: rotate(45deg); 361 | opacity: 0; 362 | } 363 | `; 364 | 365 | export const RotateInForwards = keyframes` 366 | 0% { 367 | transform: translateZ(-200px) rotate(-45deg); 368 | opacity: 0; 369 | } 370 | 100% { 371 | transform: translateZ(0) rotate(0); 372 | opacity: 1; 373 | } 374 | `; 375 | 376 | export const RotateOutForwards = keyframes` 377 | 0% { 378 | transform: translateZ(0) rotate(0); 379 | opacity: 1; 380 | } 381 | 100% { 382 | transform: translateZ(180px) rotate(45deg); 383 | opacity: 0; 384 | } 385 | `; 386 | 387 | export const RotateInBackwards = keyframes` 388 | 0% { 389 | transform: translateZ(200px) rotate(45deg); 390 | opacity: 0; 391 | } 392 | 100% { 393 | transform: translateZ(0) rotate(0); 394 | opacity: 1; 395 | } 396 | `; 397 | 398 | export const RotateOutBackwards = keyframes` 399 | 0% { 400 | transform: rotate(0); 401 | opacity: 1; 402 | } 403 | 100% { 404 | transform: rotate(-45deg); 405 | opacity: 0; 406 | } 407 | `; 408 | -------------------------------------------------------------------------------- /src/css-properties.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | '--*', 3 | '-ms-overflow-style', 4 | '-moz-appearance', 5 | '-moz-binding', 6 | '-moz-border-bottom-colors', 7 | '-moz-border-left-colors', 8 | '-moz-border-right-colors', 9 | '-moz-border-top-colors', 10 | '-moz-context-properties', 11 | '-moz-float-edge', 12 | '-moz-force-broken-image-icon', 13 | '-moz-image-region', 14 | '-moz-orient', 15 | '-moz-outline-radius', 16 | '-moz-outline-radius-bottomleft', 17 | '-moz-outline-radius-bottomright', 18 | '-moz-outline-radius-topleft', 19 | '-moz-outline-radius-topright', 20 | '-moz-stack-sizing', 21 | '-moz-text-blink', 22 | '-moz-user-focus', 23 | '-moz-user-input', 24 | '-moz-user-modify', 25 | '-moz-window-shadow', 26 | '-webkit-border-before', 27 | '-webkit-border-before-color', 28 | '-webkit-border-before-style', 29 | '-webkit-border-before-width', 30 | '-webkit-box-reflect', 31 | '-webkit-mask', 32 | '-webkit-mask-attachment', 33 | '-webkit-mask-clip', 34 | '-webkit-mask-composite', 35 | '-webkit-mask-image', 36 | '-webkit-mask-origin', 37 | '-webkit-mask-position', 38 | '-webkit-mask-position-x', 39 | '-webkit-mask-position-y', 40 | '-webkit-mask-repeat', 41 | '-webkit-mask-repeat-x', 42 | '-webkit-mask-repeat-y', 43 | '-webkit-tap-highlight-color', 44 | '-webkit-text-fill-color', 45 | '-webkit-text-stroke', 46 | '-webkit-text-stroke-color', 47 | '-webkit-text-stroke-width', 48 | '-webkit-touch-callout', 49 | 'align-content', 50 | 'align-items', 51 | 'align-self', 52 | 'all', 53 | 'animation', 54 | 'animation-delay', 55 | 'animation-direction', 56 | 'animation-duration', 57 | 'animation-fill-mode', 58 | 'animation-iteration-count', 59 | 'animation-name', 60 | 'animation-play-state', 61 | 'animation-timing-function', 62 | 'appearance', 63 | 'azimuth', 64 | 'backdrop-filter', 65 | 'backface-visibility', 66 | 'background', 67 | 'background-attachment', 68 | 'background-blend-mode', 69 | 'background-clip', 70 | 'background-color', 71 | 'background-image', 72 | 'background-origin', 73 | 'background-position', 74 | 'background-position-x', 75 | 'background-position-y', 76 | 'background-repeat', 77 | 'background-size', 78 | 'block-size', 79 | 'border', 80 | 'border-block-end', 81 | 'border-block-end-color', 82 | 'border-block-end-style', 83 | 'border-block-end-width', 84 | 'border-block-start', 85 | 'border-block-start-color', 86 | 'border-block-start-style', 87 | 'border-block-start-width', 88 | 'border-bottom', 89 | 'border-bottom-color', 90 | 'border-bottom-left-radius', 91 | 'border-bottom-right-radius', 92 | 'border-bottom-style', 93 | 'border-bottom-width', 94 | 'border-collapse', 95 | 'border-color', 96 | 'border-image', 97 | 'border-image-outset', 98 | 'border-image-repeat', 99 | 'border-image-slice', 100 | 'border-image-source', 101 | 'border-image-width', 102 | 'border-inline-end', 103 | 'border-inline-end-color', 104 | 'border-inline-end-style', 105 | 'border-inline-end-width', 106 | 'border-inline-start', 107 | 'border-inline-start-color', 108 | 'border-inline-start-style', 109 | 'border-inline-start-width', 110 | 'border-left', 111 | 'border-left-color', 112 | 'border-left-style', 113 | 'border-left-width', 114 | 'border-radius', 115 | 'border-right', 116 | 'border-right-color', 117 | 'border-right-style', 118 | 'border-right-width', 119 | 'border-spacing', 120 | 'border-style', 121 | 'border-top', 122 | 'border-top-color', 123 | 'border-top-left-radius', 124 | 'border-top-right-radius', 125 | 'border-top-style', 126 | 'border-top-width', 127 | 'border-width', 128 | 'bottom', 129 | 'box-align', 130 | 'box-decoration-break', 131 | 'box-direction', 132 | 'box-flex', 133 | 'box-flex-group', 134 | 'box-lines', 135 | 'box-ordinal-group', 136 | 'box-orient', 137 | 'box-pack', 138 | 'box-shadow', 139 | 'box-sizing', 140 | 'break-after', 141 | 'break-before', 142 | 'break-inside', 143 | 'caption-side', 144 | 'caret-color', 145 | 'clear', 146 | 'clip', 147 | 'clip-path', 148 | 'color', 149 | 'column-count', 150 | 'column-fill', 151 | 'column-gap', 152 | 'column-rule', 153 | 'column-rule-color', 154 | 'column-rule-style', 155 | 'column-rule-width', 156 | 'column-span', 157 | 'column-width', 158 | 'columns', 159 | 'contain', 160 | 'content', 161 | 'counter-increment', 162 | 'counter-reset', 163 | 'cursor', 164 | 'direction', 165 | 'display', 166 | 'display-inside', 167 | 'display-list', 168 | 'display-outside', 169 | 'empty-cells', 170 | 'filter', 171 | 'flex', 172 | 'flex-basis', 173 | 'flex-direction', 174 | 'flex-flow', 175 | 'flex-grow', 176 | 'flex-shrink', 177 | 'flex-wrap', 178 | 'float', 179 | 'font', 180 | 'font-family', 181 | 'font-feature-settings', 182 | 'font-kerning', 183 | 'font-language-override', 184 | 'font-variation-settings', 185 | 'font-size', 186 | 'font-size-adjust', 187 | 'font-stretch', 188 | 'font-style', 189 | 'font-synthesis', 190 | 'font-variant', 191 | 'font-variant-alternates', 192 | 'font-variant-caps', 193 | 'font-variant-east-asian', 194 | 'font-variant-ligatures', 195 | 'font-variant-numeric', 196 | 'font-variant-position', 197 | 'font-weight', 198 | 'grid', 199 | 'grid-area', 200 | 'grid-auto-columns', 201 | 'grid-auto-flow', 202 | 'grid-auto-rows', 203 | 'grid-column', 204 | 'grid-column-end', 205 | 'grid-column-gap', 206 | 'grid-column-start', 207 | 'grid-gap', 208 | 'grid-row', 209 | 'grid-row-end', 210 | 'grid-row-gap', 211 | 'grid-row-start', 212 | 'grid-template', 213 | 'grid-template-areas', 214 | 'grid-template-columns', 215 | 'grid-template-rows', 216 | 'height', 217 | 'hyphens', 218 | 'image-orientation', 219 | 'image-rendering', 220 | 'image-resolution', 221 | 'ime-mode', 222 | 'initial-letter', 223 | 'initial-letter-align', 224 | 'inline-size', 225 | 'isolation', 226 | 'justify-content', 227 | 'left', 228 | 'letter-spacing', 229 | 'line-break', 230 | 'line-height', 231 | 'line-height-step', 232 | 'list-style', 233 | 'list-style-image', 234 | 'list-style-position', 235 | 'list-style-type', 236 | 'margin', 237 | 'margin-block-end', 238 | 'margin-block-start', 239 | 'margin-bottom', 240 | 'margin-inline-end', 241 | 'margin-inline-start', 242 | 'margin-left', 243 | 'margin-right', 244 | 'margin-top', 245 | 'marker-offset', 246 | 'mask', 247 | 'mask-clip', 248 | 'mask-composite', 249 | 'mask-image', 250 | 'mask-mode', 251 | 'mask-origin', 252 | 'mask-position', 253 | 'mask-repeat', 254 | 'mask-size', 255 | 'mask-type', 256 | 'max-block-size', 257 | 'max-height', 258 | 'max-inline-size', 259 | 'max-width', 260 | 'min-block-size', 261 | 'min-height', 262 | 'min-inline-size', 263 | 'min-width', 264 | 'mix-blend-mode', 265 | 'object-fit', 266 | 'object-position', 267 | 'offset', 268 | 'offset-anchor', 269 | 'offset-block-end', 270 | 'offset-block-start', 271 | 'offset-inline-end', 272 | 'offset-inline-start', 273 | 'offset-distance', 274 | 'offset-path', 275 | 'offset-position', 276 | 'offset-rotate', 277 | 'opacity', 278 | 'order', 279 | 'orphans', 280 | 'outline', 281 | 'outline-color', 282 | 'outline-offset', 283 | 'outline-style', 284 | 'outline-width', 285 | 'overflow', 286 | 'overflow-clip-box', 287 | 'overflow-wrap', 288 | 'overflow-x', 289 | 'overflow-y', 290 | 'padding', 291 | 'padding-block-end', 292 | 'padding-block-start', 293 | 'padding-bottom', 294 | 'padding-inline-end', 295 | 'padding-inline-start', 296 | 'padding-left', 297 | 'padding-right', 298 | 'padding-top', 299 | 'page-break-after', 300 | 'page-break-before', 301 | 'page-break-inside', 302 | 'perspective', 303 | 'perspective-origin', 304 | 'pointer-events', 305 | 'position', 306 | 'quotes', 307 | 'resize', 308 | 'right', 309 | 'ruby-align', 310 | 'ruby-merge', 311 | 'ruby-position', 312 | 'scroll-behavior', 313 | 'scroll-snap-coordinate', 314 | 'scroll-snap-destination', 315 | 'scroll-snap-points-x', 316 | 'scroll-snap-points-y', 317 | 'scroll-snap-type', 318 | 'scroll-snap-type-x', 319 | 'scroll-snap-type-y', 320 | 'shape-image-threshold', 321 | 'shape-margin', 322 | 'shape-outside', 323 | 'tab-size', 324 | 'table-layout', 325 | 'text-align', 326 | 'text-align-last', 327 | 'text-combine-upright', 328 | 'text-decoration', 329 | 'text-decoration-color', 330 | 'text-decoration-line', 331 | 'text-decoration-skip', 332 | 'text-decoration-style', 333 | 'text-emphasis', 334 | 'text-emphasis-color', 335 | 'text-emphasis-position', 336 | 'text-emphasis-style', 337 | 'text-indent', 338 | 'text-justify', 339 | 'text-orientation', 340 | 'text-overflow', 341 | 'text-rendering', 342 | 'text-shadow', 343 | 'text-size-adjust', 344 | 'text-transform', 345 | 'text-underline-position', 346 | 'top', 347 | 'touch-action', 348 | 'transform', 349 | 'transform-box', 350 | 'transform-origin', 351 | 'transform-style', 352 | 'transition', 353 | 'transition-delay', 354 | 'transition-duration', 355 | 'transition-property', 356 | 'transition-timing-function', 357 | 'unicode-bidi', 358 | 'user-select', 359 | 'vertical-align', 360 | 'visibility', 361 | 'white-space', 362 | 'widows', 363 | 'width', 364 | 'will-change', 365 | 'word-break', 366 | 'word-spacing', 367 | 'word-wrap', 368 | 'writing-mode', 369 | 'z-index' 370 | ]; 371 | -------------------------------------------------------------------------------- /src/bounce/bounce.js: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const BounceInTop = keyframes` 4 | 0% { 5 | transform: translateY(-500px); 6 | animation-timing-function: ease-in; 7 | opacity: 0; 8 | } 9 | 38% { 10 | transform: translateY(0); 11 | animation-timing-function: ease-out; 12 | opacity: 1; 13 | } 14 | 55% { 15 | transform: translateY(-65px); 16 | animation-timing-function: ease-in; 17 | } 18 | 72% { 19 | transform: translateY(0); 20 | animation-timing-function: ease-out; 21 | } 22 | 81% { 23 | transform: translateY(-28px); 24 | -webkit-animation-timing-function: ease-in; 25 | } 26 | 90% { 27 | transform: translateY(0); 28 | animation-timing-function: ease-out; 29 | } 30 | 95% { 31 | transform: translateY(-8px); 32 | animation-timing-function: ease-in; 33 | } 34 | 100% { 35 | transform: translateY(0); 36 | animation-timing-function: ease-out; 37 | } 38 | `; 39 | 40 | export const BounceOutTop = keyframes` 41 | 0% { 42 | transform: translateY(0); 43 | animation-timing-function: ease-out; 44 | } 45 | 5% { 46 | transform: translateY(-30px); 47 | animation-timing-function: ease-in; 48 | } 49 | 15% { 50 | transform: translateY(0); 51 | animation-timing-function: ease-out; 52 | } 53 | 25% { 54 | transform: translateY(-38px); 55 | animation-timing-function: ease-in; 56 | } 57 | 38% { 58 | transform: translateY(0); 59 | animation-timing-function: ease-out; 60 | } 61 | 52% { 62 | transform: translateY(-75px); 63 | animation-timing-function: ease-in; 64 | } 65 | 70% { 66 | transform: translateY(0); 67 | animation-timing-function: ease-out; 68 | } 69 | 85% { 70 | opacity: 1; 71 | } 72 | 100% { 73 | transform: translateY(-800px); 74 | opacity: 0; 75 | } 76 | `; 77 | 78 | export const BounceInRight = keyframes` 79 | 0% { 80 | transform: translateX(600px); 81 | animation-timing-function: ease-in; 82 | opacity: 0; 83 | } 84 | 38% { 85 | transform: translateX(0); 86 | animation-timing-function: ease-out; 87 | opacity: 1; 88 | } 89 | 55% { 90 | transform: translateX(68px); 91 | animation-timing-function: ease-in; 92 | } 93 | 72% { 94 | transform: translateX(0); 95 | animation-timing-function: ease-out; 96 | } 97 | 81% { 98 | transform: translateX(32px); 99 | animation-timing-function: ease-in; 100 | } 101 | 90% { 102 | transform: translateX(0); 103 | animation-timing-function: ease-out; 104 | } 105 | 95% { 106 | transform: translateX(8px); 107 | animation-timing-function: ease-in; 108 | } 109 | 100% { 110 | transform: translateX(0); 111 | animation-timing-function: ease-out; 112 | } 113 | `; 114 | 115 | export const BounceOutRight = keyframes` 116 | 0% { 117 | transform: translateX(0); 118 | animation-timing-function: ease-out; 119 | } 120 | 5% { 121 | transform: translateX(30px); 122 | animation-timing-function: ease-in; 123 | } 124 | 15% { 125 | transform: translateX(0); 126 | animation-timing-function: ease-out; 127 | } 128 | 25% { 129 | transform: translateX(38px); 130 | animation-timing-function: ease-in; 131 | } 132 | 38% { 133 | transform: translateX(0); 134 | animation-timing-function: ease-out; 135 | } 136 | 52% { 137 | transform: translateX(80px); 138 | animation-timing-function: ease-in; 139 | } 140 | 65% { 141 | transform: translateX(0); 142 | animation-timing-function: ease-out; 143 | } 144 | 85% { 145 | opacity: 1; 146 | } 147 | 100% { 148 | transform: translateX(1000px); 149 | opacity: 0; 150 | } 151 | `; 152 | 153 | export const BounceInBottom = keyframes` 154 | 0% { 155 | transform: translateY(500px); 156 | animation-timing-function: ease-in; 157 | opacity: 0; 158 | } 159 | 38% { 160 | transform: translateY(0); 161 | animation-timing-function: ease-out; 162 | opacity: 1; 163 | } 164 | 55% { 165 | transform: translateY(65px); 166 | animation-timing-function: ease-in; 167 | } 168 | 72% { 169 | transform: translateY(0); 170 | animation-timing-function: ease-out; 171 | } 172 | 81% { 173 | transform: translateY(28px); 174 | animation-timing-function: ease-in; 175 | } 176 | 90% { 177 | transform: translateY(0); 178 | animation-timing-function: ease-out; 179 | } 180 | 95% { 181 | transform: translateY(8px); 182 | animation-timing-function: ease-in; 183 | } 184 | 100% { 185 | transform: translateY(0); 186 | animation-timing-function: ease-out; 187 | } 188 | `; 189 | 190 | export const BounceOutBottom = keyframes` 191 | 0% { 192 | transform: translateY(0); 193 | animation-timing-function: ease-out; 194 | } 195 | 5% { 196 | transform: translateY(30px); 197 | animation-timing-function: ease-in; 198 | } 199 | 15% { 200 | transform: translateY(0); 201 | animation-timing-function: ease-out; 202 | } 203 | 25% { 204 | transform: translateY(38px); 205 | animation-timing-function: ease-in; 206 | } 207 | 38% { 208 | transform: translateY(0); 209 | animation-timing-function: ease-out; 210 | } 211 | 52% { 212 | transform: translateY(75px); 213 | animation-timing-function: ease-in; 214 | } 215 | 70% { 216 | transform: translateY(0); 217 | animation-timing-function: ease-out; 218 | } 219 | 85% { 220 | opacity: 1; 221 | } 222 | 100% { 223 | transform: translateY(800px); 224 | opacity: 0; 225 | } 226 | `; 227 | 228 | export const BounceInLeft = keyframes` 229 | 0% { 230 | transform: translateX(-600px); 231 | animation-timing-function: ease-in; 232 | opacity: 0; 233 | } 234 | 38% { 235 | transform: translateX(0); 236 | animation-timing-function: ease-out; 237 | opacity: 1; 238 | } 239 | 55% { 240 | transform: translateX(-68px); 241 | animation-timing-function: ease-in; 242 | } 243 | 72% { 244 | transform: translateX(0); 245 | animation-timing-function: ease-out; 246 | } 247 | 81% { 248 | transform: translateX(-28px); 249 | animation-timing-function: ease-in; 250 | } 251 | 90% { 252 | transform: translateX(0); 253 | animation-timing-function: ease-out; 254 | } 255 | 95% { 256 | transform: translateX(-8px); 257 | animation-timing-function: ease-in; 258 | } 259 | 100% { 260 | transform: translateX(0); 261 | animation-timing-function: ease-out; 262 | } 263 | `; 264 | 265 | export const BounceOutLeft = keyframes` 266 | 0% { 267 | transform: translateX(0); 268 | animation-timing-function: ease-out; 269 | } 270 | 5% { 271 | transform: translateX(-30px); 272 | animation-timing-function: ease-in; 273 | } 274 | 15% { 275 | transform: translateX(0); 276 | animation-timing-function: ease-out; 277 | } 278 | 25% { 279 | transform: translateX(-38px); 280 | animation-timing-function: ease-in; 281 | } 282 | 38% { 283 | transform: translateX(0); 284 | animation-timing-function: ease-out; 285 | } 286 | 52% { 287 | transform: translateX(-80px); 288 | animation-timing-function: ease-in; 289 | } 290 | 70% { 291 | transform: translateX(0); 292 | animation-timing-function: ease-out; 293 | } 294 | 85% { 295 | opacity: 1; 296 | } 297 | 100% { 298 | transform: translateX(-1000px); 299 | opacity: 0; 300 | } 301 | `; 302 | 303 | export const BounceInForwards = keyframes` 304 | 0% { 305 | transform: scale(0); 306 | animation-timing-function: ease-in; 307 | opacity: 0; 308 | } 309 | 38% { 310 | transform: scale(1); 311 | animation-timing-function: ease-out; 312 | opacity: 1; 313 | } 314 | 55% { 315 | transform: scale(0.7); 316 | animation-timing-function: ease-in; 317 | } 318 | 72% { 319 | transform: scale(1); 320 | animation-timing-function: ease-out; 321 | } 322 | 81% { 323 | transform: scale(0.84); 324 | animation-timing-function: ease-in; 325 | } 326 | 89% { 327 | transform: scale(1); 328 | animation-timing-function: ease-out; 329 | } 330 | 95% { 331 | transform: scale(0.95); 332 | animation-timing-function: ease-in; 333 | } 334 | 100% { 335 | transform: scale(1); 336 | animation-timing-function: ease-out; 337 | } 338 | `; 339 | 340 | export const BounceOutForwards = keyframes` 341 | 0% { 342 | transform: translateZ(0); 343 | animation-timing-function: ease-out; 344 | } 345 | 5% { 346 | transform: translateZ(-100px); 347 | animation-timing-function: ease-in; 348 | } 349 | 15% { 350 | transform: translateZ(0); 351 | animation-timing-function: ease-out; 352 | } 353 | 25% { 354 | transform: translateZ(-110px); 355 | animation-timing-function: ease-in; 356 | } 357 | 38% { 358 | transform: translateZ(0); 359 | animation-timing-function: ease-out; 360 | } 361 | 52% { 362 | transform: translateZ(-200px); 363 | animation-timing-function: ease-in; 364 | } 365 | 70% { 366 | transform: translateZ(0) scale(1); 367 | animation-timing-function: ease-out; 368 | } 369 | 85% { 370 | opacity: 1; 371 | } 372 | 100% { 373 | transform: translateZ(-900px) scale(0); 374 | animation-timing-function: ease-in; 375 | opacity: 0; 376 | } 377 | `; 378 | 379 | export const BounceInBackwards = keyframes` 380 | 0% { 381 | transform: scale(7); 382 | animation-timing-function: ease-in; 383 | opacity: 0; 384 | } 385 | 38% { 386 | transform: scale(1); 387 | animation-timing-function: ease-out; 388 | opacity: 1; 389 | } 390 | 55% { 391 | transform: scale(1.5); 392 | animation-timing-function: ease-in; 393 | } 394 | 72% { 395 | transform: scale(1); 396 | animation-timing-function: ease-out; 397 | } 398 | 81% { 399 | transform: scale(1.24); 400 | animation-timing-function: ease-in; 401 | } 402 | 89% { 403 | transform: scale(1); 404 | animation-timing-function: ease-out; 405 | } 406 | 95% { 407 | transform: scale(1.04); 408 | animation-timing-function: ease-in; 409 | } 410 | 100% { 411 | transform: scale(1); 412 | animation-timing-function: ease-out; 413 | } 414 | `; 415 | 416 | export const BounceOutBackwards = keyframes` 417 | 0% { 418 | transform: translateZ(0); 419 | animation-timing-function: ease-out; 420 | } 421 | 5% { 422 | transform: translateZ(-100px); 423 | animation-timing-function: ease-in; 424 | } 425 | 15% { 426 | transform: translateZ(0); 427 | animation-timing-function: ease-out; 428 | } 429 | 25% { 430 | transform: translateZ(-110px); 431 | animation-timing-function: ease-in; 432 | } 433 | 38% { 434 | transform: translateZ(0); 435 | animation-timing-function: ease-out; 436 | } 437 | 52% { 438 | transform: translateZ(-200px); 439 | animation-timing-function: ease-in; 440 | } 441 | 70% { 442 | transform: translateZ(0) scale(1); 443 | animation-timing-function: ease-out; 444 | } 445 | 85% { 446 | opacity: 1; 447 | } 448 | 100% { 449 | transform: translateZ(-900px) scale(0); 450 | animation-timing-function: ease-in; 451 | opacity: 0; 452 | } 453 | `; 454 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import { 4 | FadeAnimations, 5 | BounceAnimations, 6 | ScaleAnimations, 7 | RotateAnimations, 8 | SlideAnimations 9 | } from './animations'; 10 | import CSSProperties from './css-properties'; 11 | import { transitionTypes } from './type-transitions'; 12 | 13 | const Wrapper = styled.div` 14 | animation-duration: ${({ duration }) => (duration ? `${duration}s` : '1s')}; 15 | animation-name: ${({ animation }) => 16 | animation ? animation : 'no-animation'}; 17 | animation-fill-mode: forwards; 18 | animation-iteration-count: ${({ iteration }) => 19 | iteration ? iteration : '1'}; 20 | 21 | > * { 22 | ${({ transitionFrom }) => 23 | transitionFrom && transitionFrom !== '' ? transitionFrom : ''}; 24 | transition: all 0.3s ease-in-out; 25 | 26 | &:hover { 27 | ${({ transitionTo }) => 28 | transitionTo && transitionTo !== '' ? transitionTo : ''}; 29 | } 30 | } 31 | 32 | &:focus { 33 | ${({ transitionTo }) => 34 | transitionTo && transitionTo !== '' ? transitionTo : ''}; 35 | } 36 | 37 | &:active { 38 | } 39 | `; 40 | 41 | class Animated extends React.Component { 42 | state = { 43 | delay_waited: false, 44 | transite_in: false, 45 | transite_out: false, 46 | transite_continuous: false 47 | }; 48 | async componentDidMount() { 49 | // Retreive the props we need 50 | const { animation, transition } = this.props; 51 | 52 | // Validate Animation 53 | this.validateAnimation(animation); 54 | // Validate Transitions 55 | this.validateTransitions(transition); 56 | 57 | // Do we have an animation in? 58 | if (this.haveAnimationIn(animation)) { 59 | // Do we have a delay in? 60 | if (this.haveDelayIn(animation)) { 61 | // Wait untill the delay in is done 62 | await this.waitUntill(this.calculateDelayInTime(animation)); 63 | // Set the delay as waited 64 | this.setDelayAsWaited(); 65 | // Then trigger the IN animation 66 | this.triggerInAnimation(); 67 | // Do we have a continouos animation 68 | if (this.haveAnimationContinuous(animation)) { 69 | // Wait untill the duration of the IN animation is done 70 | await this.waitUntill(this.calculateDurationInTime(animation)); 71 | // Then trigger the CONTINUOUS animation 72 | this.triggerContinuousAnimation(); 73 | // Do we have an animation out? 74 | if (this.haveAnimationOut(animation)) { 75 | // Wait untill the duration between animations is done 76 | await this.waitUntill( 77 | this.calculateDurationDelayBetween(animation) 78 | ); 79 | // Then trigger the OUT animation 80 | this.triggerOutAnimation(); 81 | } 82 | } else { 83 | // Do we have an animation out? 84 | if (this.haveAnimationOut(animation)) { 85 | // Wait untill the duration between animations is done 86 | await this.waitUntill( 87 | this.calculateDurationDelayBetween(animation) 88 | ); 89 | // Then trigger the OUT animation 90 | this.triggerOutAnimation(); 91 | } 92 | } 93 | } else { 94 | // We don't have a delay in so we set the delay as waited 95 | this.setDelayAsWaited(); 96 | // Then we trigger the IN animation 97 | this.triggerInAnimation(); 98 | // Do we have a continouos animation? 99 | if (this.haveAnimationContinuous(animation)) { 100 | // Wait untill the duration of the IN animation is done 101 | await this.waitUntill(this.calculateDurationInTime(animation)); 102 | // Then trigger the CONTINUOUS animation 103 | this.triggerContinuousAnimation(); 104 | // Do we have an animation out? 105 | if (this.haveAnimationOut(animation)) { 106 | // Wait untill the duration between animations is done 107 | await this.waitUntill( 108 | this.calculateDurationDelayBetween(animation) 109 | ); 110 | // Then trigger the OUT animation 111 | this.triggerOutAnimation(); 112 | } 113 | } else { 114 | // Do we have an animation out? 115 | if (this.haveAnimationOut(animation)) { 116 | // Wait untill the duration between animations is done 117 | await this.waitUntill( 118 | this.calculateDurationDelayBetween(animation) 119 | ); 120 | // Then trigger the OUT animation 121 | this.triggerOutAnimation(); 122 | } 123 | } 124 | } 125 | } else { 126 | // We don't have an IN animation so we set the delay as waited 127 | this.setDelayAsWaited(); 128 | // Trigger the animation IN even it's not going to be shown 129 | this.triggerInAnimation(); 130 | // Do we have a continous animation? 131 | if (this.haveAnimationContinuous(animation)) { 132 | // Trigger directly the continuous animation 133 | this.triggerDirectContinuousAnimation(); 134 | // Do we have an animation out? 135 | if (this.haveAnimationOut(animation)) { 136 | // Wait untill the duration between animations is done 137 | await this.waitUntill(this.calculateDelayOutTime(animation)); 138 | // Then trigger the OUT animation 139 | this.triggerOutAnimation(); 140 | console.log('Out animation triggered after delay out'); 141 | } 142 | } else { 143 | // Do we have an animation out? 144 | if (this.haveAnimationOut(animation)) { 145 | // Wait untill the duration between animations is done 146 | await this.waitUntill(this.calculateDelayOutTime(animation)); 147 | // Then trigger the OUT animation 148 | this.triggerOutAnimation(); 149 | console.log('Out animation triggered after delay out'); 150 | } 151 | } 152 | } 153 | } 154 | 155 | waitUntill = amount => 156 | new Promise((resolve, reject) => { 157 | setTimeout(function() { 158 | return resolve(); 159 | }, amount); 160 | }); 161 | 162 | triggerDelayedTransiteInAnimation = animation => { 163 | return this.waitUntill(this.calculateDelayInTime(animation)).then(() => { 164 | return this.setState(function(state, props) { 165 | return { transite_in: true }; 166 | }); 167 | }); 168 | }; 169 | 170 | triggerDelayedTransiteOutAnimation = animation => { 171 | return this.waitUntill(this.calculateDelayOutTime(animation)).then(() => { 172 | this.setState(function(state, props) { 173 | return { transite_out: true }; 174 | }); 175 | }); 176 | }; 177 | 178 | triggerDelayedTransiteOutAnimationWithInAnimation = animation => { 179 | return this.waitUntill( 180 | this.calculateTimeToExitWithInAnimation(animation) 181 | ).then(() => { 182 | this.setState(function(state, props) { 183 | return { transite_out: true }; 184 | }); 185 | }); 186 | }; 187 | 188 | triggerInAnimation = () => { 189 | return this.setState(function(state, props) { 190 | return { transite_in: true }; 191 | }); 192 | }; 193 | 194 | triggerOutAnimation = () => { 195 | return this.setState(function(state, props) { 196 | return { transite_out: true, transite_continuous: false }; 197 | }); 198 | }; 199 | 200 | triggerContinuousAnimation = () => { 201 | return this.setState(function(state, props) { 202 | return { transite_continuous: true }; 203 | }); 204 | }; 205 | 206 | triggerDirectContinuousAnimation = () => { 207 | return this.setState(function(state, props) { 208 | return { transite_in: true, transite_continuous: true }; 209 | }); 210 | }; 211 | 212 | triggerContinuousAfterInAnimation = animation => { 213 | return this.waitUntill(animation.duration_in).then(() => { 214 | return this.setState(function(state, props) { 215 | return { transite_continuous: true }; 216 | }); 217 | }); 218 | }; 219 | 220 | setDelayAsWaited = () => { 221 | return this.setState(function(state, props) { 222 | return { delay_waited: true }; 223 | }); 224 | }; 225 | 226 | haveDelayIn = animation => { 227 | if (!animation) return; 228 | return 'delay_in' in animation; 229 | }; 230 | 231 | haveDelayOut = animation => { 232 | if (!animation) return; 233 | return 'delay_out' in animation; 234 | }; 235 | 236 | haveAnimationIn = animation => { 237 | if (!animation) return; 238 | return 'in' in animation; 239 | }; 240 | 241 | haveAnimationOut = animation => { 242 | if (!animation) return; 243 | return 'out' in animation; 244 | }; 245 | 246 | haveAnimationContinuous = animation => { 247 | if (!animation) return; 248 | return 'continuous' in animation; 249 | }; 250 | 251 | calculateDelayInTime = animation => { 252 | if (!animation) return; 253 | return animation.delay_in * 1000; 254 | }; 255 | 256 | calculateDelayOutTime = animation => { 257 | if (!animation) return; 258 | return animation.delay_out * 1000; 259 | }; 260 | 261 | calculateDurationInTime = animation => { 262 | if (!animation) return; 263 | return animation.duration_in * 1000; 264 | }; 265 | 266 | calculateDurationContinousTime = animation => { 267 | if (!animation) return; 268 | return animation.duration_continuous * 1000; 269 | }; 270 | 271 | calculateDurationOutTime = animation => { 272 | if (!animation) return; 273 | return animation.duration_out * 1000; 274 | }; 275 | 276 | calculateDurationDelayBetween = animation => { 277 | if (!animation) return; 278 | return animation.delay_between * 1000; 279 | }; 280 | 281 | calculateTimeToExitWithInAnimation = animation => { 282 | if (!animation) return; 283 | return ( 284 | (animation.delay_in + animation.duration_in + animation.delay_between) * 285 | 1000 286 | ); 287 | }; 288 | 289 | checkForValidCSSProperty = property => { 290 | return CSSProperties.includes(property); 291 | }; 292 | 293 | checkForValidDuration = duration => { 294 | return typeof duration === 'number' && duration >= 0; 295 | }; 296 | 297 | checkForValidTransitionType = transitionType => { 298 | return transitionTypes.includes(transitionType); 299 | }; 300 | 301 | checkForValidIteration = iteration => { 302 | const rounds = parseInt(iteration, 10); 303 | return ( 304 | (typeof rounds === 'number' && rounds >= 1) || iteration === 'infinite' 305 | ); 306 | }; 307 | 308 | checkForValidFromToObject = fromToObject => { 309 | return 'property' in fromToObject && 'value' in fromToObject; 310 | }; 311 | 312 | validateAnimation = animation => { 313 | if (!animation) return; 314 | // Check of an in animation 315 | if ('in' in animation) { 316 | // Check if that animation has also a duration 317 | if (!('duration_in' in animation)) { 318 | throw new TypeError( 319 | 'If you have an in animation you need to specify a duration for that animation' 320 | ); 321 | } else { 322 | // Check for Valid Animation Duration In 323 | if (!this.checkForValidDuration(animation.duration_in)) { 324 | throw new TypeError( 325 | `${ 326 | animation.duration_in 327 | } is not a valid duration in for an animation` 328 | ); 329 | } 330 | } 331 | // Check if this in animation is going to iterate 332 | if ('iteration' in animation) { 333 | // Check for Valid Iteration 334 | if (!this.checkForValidIteration(animation.iteration)) { 335 | throw new TypeError( 336 | `${ 337 | animation.iteration 338 | } is not a valid type of iteration property. Should be real number or the 'inifite' literal` 339 | ); 340 | } 341 | } 342 | } else { 343 | if ('delay_between' in animation) { 344 | throw new TypeError( 345 | `You cannot have a delay between in and out animations if you're missing any of them` 346 | ); 347 | } 348 | } 349 | // Check of an out animation 350 | if ('out' in animation) { 351 | // Check if that animation has also a duration 352 | if (!('duration_out' in animation)) { 353 | throw new TypeError( 354 | 'If you have an out animation you need to specify a duration for that animation' 355 | ); 356 | } 357 | } else { 358 | if ('delay_between' in animation) { 359 | throw new TypeError( 360 | `You cannot have a delay between in and out animations if you're missing any of them` 361 | ); 362 | } 363 | } 364 | // Check for both animations (in and out) at the same time 365 | if ('in' in animation && 'out' in animation) { 366 | // Check if there's also a delay between those animations 367 | if (!('delay_between' in animation)) { 368 | throw new TypeError( 369 | 'If you have an in animation and an out animation you need to specify a delay between those animations' 370 | ); 371 | } 372 | // Check for Valid Animation Duration In 373 | if (!this.checkForValidDuration(animation.duration_out)) { 374 | throw new TypeError( 375 | `${ 376 | animation.duration_out 377 | } is not a valid duration out for an animation` 378 | ); 379 | } 380 | } 381 | // Check for a continuous animation 382 | if ('continuous' in animation) { 383 | if ('duration_continuous' in animation) { 384 | // Check for Valid Animation Duration In 385 | if (!this.checkForValidDuration(animation.duration_continuous)) { 386 | throw new TypeError( 387 | `${ 388 | animation.duration_continuous 389 | } is not a valid duration for a continuous animation` 390 | ); 391 | } 392 | } else { 393 | throw new TypeError( 394 | `${ 395 | animation.duration_out 396 | } is not a valid duration out for an animation` 397 | ); 398 | } 399 | } 400 | }; 401 | 402 | validateTransitions = transition => { 403 | if (!transition) return; 404 | if (!('type' in transition)) { 405 | throw new TypeError( 406 | `You're missing the type of transition property. Eg: hover, focus, blur, active, ...` 407 | ); 408 | } 409 | // Check for Valid Transition Type 410 | if (!this.checkForValidTransitionType(transition.type)) { 411 | throw new TypeError( 412 | `${transition.type} is not a valid type of transition` 413 | ); 414 | } 415 | // Check for from transition object 416 | if (!('from' in transition)) { 417 | throw new TypeError( 418 | `You're missing the from property of the transition that sets the point to start at` 419 | ); 420 | } 421 | // Check if from object is valid and meet the requirements 422 | if (!this.checkForValidFromToObject(transition.from)) { 423 | throw new TypeError( 424 | `${JSON.stringify( 425 | transition.from 426 | )} is not a valid transition FROM object. It needs to have the following structure: { property: string, value: string || Number }` 427 | ); 428 | } 429 | // Check if the from css property is valid 430 | if (!this.checkForValidCSSProperty(transition.from.property)) { 431 | throw new TypeError( 432 | `${transition.from.property} is not a valid CSS property at FROM object` 433 | ); 434 | } 435 | // Check for to transition object 436 | if (!('to' in transition)) { 437 | throw new TypeError( 438 | `You're missing the to property of the transition that sets the point of where to end at` 439 | ); 440 | } 441 | // Check if to object is valid and meet the requirements 442 | if (!this.checkForValidFromToObject(transition.to)) { 443 | throw new TypeError( 444 | `${JSON.stringify( 445 | transition.from 446 | )} is not a valid transition TO object. It needs to have the following structure: { property: string, value: string || Number }` 447 | ); 448 | } 449 | // Check if the to css property is valid 450 | if (!this.checkForValidCSSProperty(transition.to.property)) { 451 | throw new TypeError( 452 | `${transition.from.property} is not a valid CSS property at TO object` 453 | ); 454 | } 455 | }; 456 | 457 | getCurrentAnimation = () => { 458 | const { animation } = this.props; 459 | if (!animation) return; 460 | const { transite_out, transite_in, transite_continuous } = this.state; 461 | 462 | return transite_in && !transite_continuous && !transite_out 463 | ? animation.in 464 | : transite_in && transite_continuous 465 | ? animation.continuous 466 | : ((transite_in && !transite_continuous) || 467 | (!transite_in && !transite_continuous)) && 468 | transite_out 469 | ? animation.out 470 | : null; 471 | }; 472 | 473 | getCurrentDuration = () => { 474 | const { animation } = this.props; 475 | if (!animation) return; 476 | const { transite_out, transite_in, transite_continuous } = this.state; 477 | return transite_in 478 | ? animation.duration_in 479 | : transite_continuous 480 | ? animation.duration_continuous 481 | : transite_out 482 | ? animation.duration_out 483 | : null; 484 | }; 485 | 486 | getCurrentIteration = () => { 487 | const { animation } = this.props; 488 | if (!animation) return; 489 | const { transite_out, transite_in, transite_continuous } = this.state; 490 | return transite_continuous ? 'infinite' : animation.iteration; 491 | }; 492 | 493 | getTransitionFrom = () => { 494 | const { transition } = this.props; 495 | if (!transition) return; 496 | return transition.type === 'hover' 497 | ? `${transition.from.property}: ${transition.from.value}` 498 | : ''; 499 | }; 500 | 501 | getTransitionTo = () => { 502 | const { transition } = this.props; 503 | if (!transition) return; 504 | return transition.type === 'hover' 505 | ? `${transition.to.property}: ${transition.to.value};` 506 | : ''; 507 | }; 508 | 509 | render() { 510 | const { children, animation, transition } = this.props; 511 | const { 512 | delay_waited, 513 | transite_out, 514 | transite_in, 515 | transite_continuous 516 | } = this.state; 517 | return delay_waited ? ( 518 | 525 | {children} 526 | 527 | ) : null; 528 | } 529 | } 530 | 531 | export { 532 | Animated, 533 | FadeAnimations, 534 | BounceAnimations, 535 | ScaleAnimations, 536 | RotateAnimations, 537 | SlideAnimations 538 | }; 539 | -------------------------------------------------------------------------------- /lib/animated.mjs: -------------------------------------------------------------------------------- 1 | import n from"react";import t,{keyframes as e}from"styled-components";var a=Object.freeze(["\n 0% {\n transform: scale(7);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 38% {\n transform: scale(1);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 55% {\n transform: scale(1.5);\n animation-timing-function: ease-in;\n }\n 72% {\n transform: scale(1);\n animation-timing-function: ease-out;\n }\n 81% {\n transform: scale(1.24);\n animation-timing-function: ease-in;\n }\n 89% {\n transform: scale(1);\n animation-timing-function: ease-out;\n }\n 95% {\n transform: scale(1.04);\n animation-timing-function: ease-in;\n }\n 100% {\n transform: scale(1);\n animation-timing-function: ease-out;\n }\n"]),r=Object.freeze(["\n 0% {\n transform: translateZ(0);\n animation-timing-function: ease-out;\n }\n 5% {\n transform: translateZ(-100px);\n animation-timing-function: ease-in;\n }\n 15% {\n transform: translateZ(0);\n animation-timing-function: ease-out;\n }\n 25% {\n transform: translateZ(-110px);\n animation-timing-function: ease-in;\n }\n 38% {\n transform: translateZ(0);\n animation-timing-function: ease-out;\n }\n 52% {\n transform: translateZ(-200px);\n animation-timing-function: ease-in;\n }\n 70% {\n transform: translateZ(0) scale(1);\n animation-timing-function: ease-out;\n }\n 85% {\n opacity: 1;\n }\n 100% {\n transform: translateZ(-900px) scale(0);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n"]),o=Object.freeze(["\n 0% {\n transform: scale(0);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 38% {\n transform: scale(1);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 55% {\n transform: scale(0.7);\n animation-timing-function: ease-in;\n }\n 72% {\n transform: scale(1);\n animation-timing-function: ease-out;\n }\n 81% {\n transform: scale(0.84);\n animation-timing-function: ease-in;\n }\n 89% {\n transform: scale(1);\n animation-timing-function: ease-out;\n }\n 95% {\n transform: scale(0.95);\n animation-timing-function: ease-in;\n }\n 100% {\n transform: scale(1);\n animation-timing-function: ease-out;\n }\n"]),i=Object.freeze(["\n 0% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 5% {\n transform: translateX(-30px);\n animation-timing-function: ease-in;\n }\n 15% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 25% {\n transform: translateX(-38px);\n animation-timing-function: ease-in;\n }\n 38% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 52% {\n transform: translateX(-80px);\n animation-timing-function: ease-in;\n }\n 70% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 85% {\n opacity: 1;\n }\n 100% {\n transform: translateX(-1000px);\n opacity: 0;\n }\n"]),s=Object.freeze(["\n 0% {\n transform: translateX(-600px);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 38% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 55% {\n transform: translateX(-68px);\n animation-timing-function: ease-in;\n }\n 72% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 81% {\n transform: translateX(-28px);\n animation-timing-function: ease-in;\n }\n 90% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 95% {\n transform: translateX(-8px);\n animation-timing-function: ease-in;\n }\n 100% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n"]),c=Object.freeze(["\n 0% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 5% {\n transform: translateY(30px);\n animation-timing-function: ease-in;\n }\n 15% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 25% {\n transform: translateY(38px);\n animation-timing-function: ease-in;\n }\n 38% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 52% {\n transform: translateY(75px);\n animation-timing-function: ease-in;\n }\n 70% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 85% {\n opacity: 1;\n }\n 100% {\n transform: translateY(800px);\n opacity: 0;\n }\n"]),f=Object.freeze(["\n 0% {\n transform: translateY(500px);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 38% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 55% {\n transform: translateY(65px);\n animation-timing-function: ease-in;\n }\n 72% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 81% {\n transform: translateY(28px);\n animation-timing-function: ease-in;\n }\n 90% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 95% {\n transform: translateY(8px);\n animation-timing-function: ease-in;\n }\n 100% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n"]),m=Object.freeze(["\n 0% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 5% {\n transform: translateX(30px);\n animation-timing-function: ease-in;\n }\n 15% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 25% {\n transform: translateX(38px);\n animation-timing-function: ease-in;\n }\n 38% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 52% {\n transform: translateX(80px);\n animation-timing-function: ease-in;\n }\n 65% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 85% {\n opacity: 1;\n }\n 100% {\n transform: translateX(1000px);\n opacity: 0;\n }\n"]),l=Object.freeze(["\n 0% {\n transform: translateX(600px);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 38% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 55% {\n transform: translateX(68px);\n animation-timing-function: ease-in;\n }\n 72% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 81% {\n transform: translateX(32px);\n animation-timing-function: ease-in;\n }\n 90% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 95% {\n transform: translateX(8px);\n animation-timing-function: ease-in;\n }\n 100% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n"]),u=Object.freeze(["\n 0% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 5% {\n transform: translateY(-30px);\n animation-timing-function: ease-in;\n }\n 15% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 25% {\n transform: translateY(-38px);\n animation-timing-function: ease-in;\n }\n 38% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 52% {\n transform: translateY(-75px);\n animation-timing-function: ease-in;\n }\n 70% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 85% {\n opacity: 1;\n }\n 100% {\n transform: translateY(-800px);\n opacity: 0;\n }\n"]),p={BounceInTop:e(Object.freeze(["\n 0% {\n transform: translateY(-500px);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 38% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 55% {\n transform: translateY(-65px);\n animation-timing-function: ease-in;\n }\n 72% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 81% {\n transform: translateY(-28px);\n -webkit-animation-timing-function: ease-in;\n }\n 90% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 95% {\n transform: translateY(-8px);\n animation-timing-function: ease-in;\n }\n 100% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n"])),BounceOutTop:e(u),BounceInRight:e(l),BounceOutRight:e(m),BounceInBottom:e(f),BounceOutBottom:e(c),BounceInLeft:e(s),BounceOutLeft:e(i),BounceInForwards:e(o),BounceOutForwards:e(r),BounceInBackwards:e(a),BounceOutBackwards:e(r)},g=Object.freeze(["\n 0% {\n transform: scaleX(1);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n 100% {\n transform: scaleX(0);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n"]),d=Object.freeze(["\n 0% {\n transform: scaleX(0);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n 100% {\n transform: scaleX(1);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n"]),y=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 50% 100%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 50% 100%;\n opacity: 1;\n }\n"]),b=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 50% 100%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 50% 100%;\n opacity: 1;\n }\n"]),h=Object.freeze(["\n 0% {\n transform: scaleX(1);\n transform-origin: 0 0;\n opacity: 1;\n }\n 100% {\n transform: scaleX(0);\n transform-origin: 0 0;\n opacity: 1;\n }\n"]),O=Object.freeze(["\n 0% {\n transform: scaleX(0);\n transform-origin: 0% 0%;\n opacity: 1;\n }\n 100% {\n transform: scaleX(1);\n transform-origin: 0% 0%;\n opacity: 1;\n }\n"]),z=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n"]),w=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n"]),x=Object.freeze(["\n 0% {\n transform: scaleX(1);\n opacity: 1;\n }\n 100% {\n transform: scaleX(0);\n opacity: 1;\n }\n"]),j=Object.freeze(["\n 0% {\n transform: scaleX(0);\n opacity: 1;\n }\n 100% {\n transform: scaleX(1);\n opacity: 1;\n }\n"]),k=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 100% 50%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 100% 50%;\n opacity: 1;\n }\n"]),v=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 100% 50%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 100% 50%;\n opacity: 1;\n }\n"]),Y=Object.freeze(["\n 0% {\n transform: scaleY(1);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n 100% {\n transform: scaleY(0);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n"]),X=Object.freeze(["\n 0% {\n transform: scaleY(0);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n 100% {\n transform: scaleY(1);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n"]),I=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 0 0;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 0 0;\n opacity: 1;\n }\n"]),T=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 0% 0%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 0% 0%;\n opacity: 1;\n }\n"]),S=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n"]),R=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n"]),_=Object.freeze(["\n 0% {\n transform: scaleY(1);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n 100% {\n transform: scaleY(0);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n"]),F=Object.freeze(["\n 0% {\n transform: scaleY(0);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n 100% {\n transform: scaleY(1);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n"]),B=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 0% 50%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 0% 50%;\n opacity: 1;\n }\n"]),A=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 0% 50%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 0% 50%;\n opacity: 1;\n }\n"]),D=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 50% 0%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 50% 0%;\n opacity: 1;\n }\n"]),C=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 50% 0%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 50% 0%;\n opacity: 1;\n }\n"]),L=Object.freeze(["\n 0% {\n transform: scaleY(1);\n opacity: 1;\n }\n 100% {\n transform: scaleY(0);\n opacity: 1;\n }\n"]),E=Object.freeze(["\n 0% {\n transform: scaleY(0);\n opacity: 1;\n }\n 100% {\n transform: scaleY(1);\n opacity: 1;\n }\n"]),V=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n"]),P=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n"]),U=Object.freeze(["\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n opacity: 1;\n }\n"]),Z={ScaleInCenter:e(Object.freeze(["\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n"])),ScaleOutCenter:e(U),ScaleInBottomLeft:e(P),ScaleOutBottomLeft:e(V),ScaleInVerticalCenter:e(E),ScaleOutVerticalCenter:e(L),ScaleInTop:e(C),ScaleOutTop:e(D),ScaleInLeft:e(A),ScaleOutLeft:e(B),ScaleInVerticalTop:e(F),ScaleOutVerticalTop:e(_),ScaleInTopRight:e(R),ScaleOutTopRight:e(S),ScaleInTopLeft:e(T),ScaleOutTopLeft:e(I),ScaleInVerticalBottom:e(X),ScaleOutVerticalBottom:e(Y),ScaleInRight:e(v),ScaleOutRight:e(k),ScaleInHorizontalCenter:e(j),ScaleOutHorizontalCenter:e(x),ScaleInBottomRight:e(w),ScaleOutBottomRight:e(z),ScaleInHorizontalLeft:e(O),ScaleOutHorizontalLeft:e(h),ScaleInBottom:e(b),ScaleOutBottom:e(y),ScaleInHorizontalRight:e(d),ScaleOutHorizontalRight:e(g)},H=Object.freeze(["\n 0% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(50px) translateY(-50px);\n opacity: 0;\n }\n"]),W=Object.freeze(["\n 0% {\n transform: translateX(50px) translateY(-50px);\n opacity: 0;\n }\n 100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n"]),N=Object.freeze(["\n 0% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(-50px) translateY(-50px);\n opacity: 0;\n }\n"]),M=Object.freeze(["\n0% {\n transform: translateX(-50px) translateY(-50px);\n opacity: 0;\n}\n100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n}\n"]),J=Object.freeze(["\n 0% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(50px) translateY(50px);\n opacity: 0;\n }\n"]),q=Object.freeze(["\n0% {\n transform: translateX(50px) translateY(50px);\n opacity: 0;\n}\n100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n}\n"]),G=Object.freeze(["\n 0% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(-50px) translateY(50px);\n opacity: 0;\n }\n"]),K=Object.freeze(["\n 0% {\n transform: translateX(-50px) translateY(50px);\n opacity: 0;\n }\n 100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n"]),Q=Object.freeze(["\n0% {\n transform: scale(1);\n opacity: 1;\n}\n100% {\n transform: scale(0.6);\n opacity: 0;\n}\n"]),$=Object.freeze(["\n 0% {\n transform: scale(1.4);\n opacity: 0;\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n"]),nn=Object.freeze(["\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 100% {\n transform: scale(1.4);\n opacity: 0;\n }\n"]),tn=Object.freeze(["\n 0% {\n transform: scale(0.6);\n opacity: 0;\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n"]),en=Object.freeze(["\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(50px);\n opacity: 0;\n }\n"]),an=Object.freeze(["\n 0% {\n transform: translateX(50px);\n opacity: 0;\n }\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n"]),rn=Object.freeze(["\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(-50px);\n opacity: 0;\n }\n"]),on=Object.freeze(["\n 0% {\n transform: translateX(-50px);\n opacity: 0;\n }\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n"]),sn=Object.freeze(["\n 0% {\n transform: translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(50px);\n opacity: 0;\n }\n"]),cn=Object.freeze(["\n 0% {\n transform: translateY(50px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n"]),fn=Object.freeze(["\n0% {\n transform: translateY(0px);\n opacity: 1;\n}\n100% {\n transform: translateY(-50px);\n opacity: 0;\n}\n"]),mn=Object.freeze(["\n 0% {\n transform: translateY(-50px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n"]),ln=Object.freeze(["\n0% {\n opacity: 0;\n}\n50% {\n opacity: 1;\n}\n100% {\n opacity: 0;\n}\n"]),un=Object.freeze(["\n0% {\n opacity: 1;\n}\n100% {\n opacity: 0;\n}\n"]),pn={FadeIn:e(Object.freeze(["\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n"])),FadeOut:e(un),FadeInFadeOut:e(ln),FadeInTop:e(mn),FadeOutTop:e(fn),FadeInBottom:e(cn),FadeOutBottom:e(sn),FadeInLeft:e(on),FadeOutLeft:e(rn),FadeInRight:e(an),FadeOutRight:e(en),FadeInForwards:e(tn),FadeOutForwards:e(nn),FadeInBackwards:e($),FadeOutBackwards:e(Q),FadeInBottomLeft:e(K),FadeOutBottomLeft:e(G),FadeInBottomRight:e(q),FadeOutBottomRight:e(J),FadeInTopLeft:e(M),FadeOutTopLeft:e(N),FadeInTopRight:e(W),FadeOutTopRight:e(H)},gn=Object.freeze(["\n 0% {\n transform: rotate(0);\n opacity: 1;\n }\n 100% {\n transform: rotate(-45deg);\n opacity: 0;\n }\n"]),dn=Object.freeze(["\n 0% {\n transform: translateZ(200px) rotate(45deg);\n opacity: 0;\n }\n 100% {\n transform: translateZ(0) rotate(0);\n opacity: 1;\n }\n"]),yn=Object.freeze(["\n 0% {\n transform: translateZ(0) rotate(0);\n opacity: 1;\n }\n 100% {\n transform: translateZ(180px) rotate(45deg);\n opacity: 0;\n }\n"]),bn=Object.freeze(["\n 0% {\n transform: translateZ(-200px) rotate(-45deg);\n opacity: 0;\n }\n 100% {\n transform: translateZ(0) rotate(0);\n opacity: 1;\n }\n"]),hn=Object.freeze(["\n 0% {\n transform: rotate(45deg);\n opacity: 0;\n }\n 100% {\n transform: rotate(0);\n opacity: 1;\n }\n"]),On=Object.freeze(["\n 0% {\n transform: rotate(0);\n opacity: 1;\n }\n 100% {\n transform: rotate(45deg);\n opacity: 0;\n }\n"]),zn=Object.freeze(["\n 0% {\n transform: rotate(-45deg);\n opacity: 0;\n }\n 100% {\n transform: rotate(0);\n opacity: 1;\n }\n"]),wn=Object.freeze(["\n 0% {\n transform: rotate3d(1, 1, 0, 360deg);\n opacity: 1;\n }\n 100% {\n transform: rotate3d(1, 1, 0, 0deg);\n opacity: 0;\n }\n"]),xn=Object.freeze(["\n 0% {\n transform: rotate3d(1, 1, 0, -360deg);\n opacity: 0;\n }\n 100% {\n transform: rotate3d(1, 1, 0, 0deg);\n opacity: 1;\n }\n"]),jn=Object.freeze(["\n 0% {\n transform: rotate3d(-1, 1, 0, 360deg);\n opacity: 1;\n }\n 100% {\n transform: rotate3d(-1, 1, 0, 0deg);\n opacity: 0;\n }\n"]),kn=Object.freeze(["\n 0% {\n transform: rotate3d(-1, 1, 0, -360deg);\n opacity: 0;\n }\n 100% {\n transform: rotate3d(-1, 1, 0, 0deg);\n opacity: 1;\n }\n"]),vn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: bottom;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: bottom;\n opacity: 0;\n }\n"]),Yn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: bottom;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: bottom;\n opacity: 1;\n }\n"]),Xn=Object.freeze(["\n 0% {\n transform: rotateY(360deg);\n opacity: 1;\n }\n 100% {\n transform: rotateY(0deg);\n opacity: 0;\n }\n"]),In=Object.freeze(["\n 0% {\n transform: rotateY(-360deg);\n opacity: 0;\n }\n 100% {\n transform: rotateY(0deg);\n opacity: 1;\n }\n"]),Tn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: bottom right;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: bottom right;\n opacity: 0;\n }\n"]),Sn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: bottom right;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: bottom right;\n opacity: 1;\n }\n"]),Rn=Object.freeze(["\n 0% {\n transform: rotateX(360deg);\n opacity: 1;\n }\n 100% {\n transform: rotateX(0deg);\n opacity: 0;\n }\n"]),_n=Object.freeze(["\n 0% {\n transform: rotateX(360deg);\n opacity: 0;\n }\n 100% {\n transform: rotateX(0deg);\n opacity: 1;\n }\n"]),Fn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: right;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: right;\n opacity: 0;\n }\n"]),Bn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: right;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: right;\n opacity: 1;\n }\n"]),An=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: top left;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: top left;\n opacity: 0;\n }\n"]),Dn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: top left;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: top left;\n opacity: 1;\n }\n"]),Cn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: top right;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: top right;\n opacity: 0;\n }\n"]),Ln=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: top right;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: top right;\n opacity: 1;\n }\n"]),En=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: left;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: left;\n opacity: 0;\n }\n"]),Vn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: left;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: left;\n opacity: 1;\n }\n"]),Pn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: top;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: top;\n opacity: 0;\n }\n"]),Un=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: top;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: top;\n opacity: 1;\n }\n"]),Zn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: bottom left;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: bottom left;\n opacity: 0;\n }\n"]),Hn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: bottom left;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: bottom left;\n opacity: 1;\n }\n"]),Wn=Object.freeze(["\n 0% {\n transform: rotate(0);\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n opacity: 0;\n }\n"]),Nn={RotateInCenter:e(Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n opacity: 0;\n }\n 100% {\n transform: rotate(0);\n opacity: 1;\n }\n"])),RotateOutCenter:e(Wn),RotateInBottomLeft:e(Hn),RotateOutBottomLeft:e(Zn),RotateInTop:e(Un),RotateOutTop:e(Pn),RotateInLeft:e(Vn),RotateOutLeft:e(En),RotateInTopRight:e(Ln),RotateOutTopRight:e(Cn),RotateInTopLeft:e(Dn),RotateOutTopLeft:e(An),RotateInRight:e(Bn),RotateOutRight:e(Fn),RotateInHorizontal:e(_n),RotateOutHorizontal:e(Rn),RotateInBottomRight:e(Sn),RotateOutBottomRight:e(Tn),RotateInVertical:e(In),RotateOutVertical:e(Xn),RotateInBottom:e(Yn),RotateOutBottom:e(vn),RotateInDiagonal:e(kn),RotateOutDiagonal:e(jn),RotateInDiagonalReverse:e(xn),RotateOutDiagonalReverse:e(wn),RotateIn45Right:e(zn),RotateOut45Right:e(On),RotateIn45Left:e(hn),RotateOut45Left:e(On),RotateInForwards:e(bn),RotateOutForwards:e(yn),RotateInBackwards:e(dn),RotateOutBackwards:e(gn)},Mn=Object.freeze(["\n 0% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(1000px) translateX(-1000px);\n opacity: 0;\n }\n"]),Jn=Object.freeze(["\n 0% {\n transform: translateY(1000px) translateX(-1000px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n"]),qn=Object.freeze(["\n 0% {\n transform: translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(1000px);\n opacity: 0;\n }\n"]),Gn=Object.freeze(["\n 0% {\n transform: translateY(1000px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n"]),Kn=Object.freeze(["\n 0% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(1000px) translateX(1000px);\n opacity: 0;\n }\n"]),Qn=Object.freeze(["\n 0% {\n transform: translateY(1000px) translateX(1000px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n"]),$n=Object.freeze(["\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(1000px);\n opacity: 0;\n }\n"]),nt=Object.freeze(["\n 0% {\n transform: translateX(1000px);\n opacity: 0;\n }\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n"]),tt=Object.freeze(["\n 0% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(-1000px) translateX(-1000px);\n opacity: 0;\n }\n"]),et=Object.freeze(["\n 0% {\n transform: translateY(-1000px) translateX(-1000px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n"]),at=Object.freeze(["\n 0% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(-1000px) translateX(1000px);\n opacity: 0;\n }\n"]),rt=Object.freeze(["\n 0% {\n transform: translateY(-1000px) translateX(1000px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n"]),ot=Object.freeze(["\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(-1000px);\n opacity: 0;\n }\n"]),it=Object.freeze(["\n 0% {\n transform: translateX(-1000px);\n opacity: 0;\n }\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n"]),st=Object.freeze(["\n 0% {\n transform: translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(-1000px);\n opacity: 0;\n }\n"]),ct={SlideInTop:e(Object.freeze(["\n 0% {\n transform: translateY(-1000px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n"])),SlideOutTop:e(st),SlideInLeft:e(it),SlideOutLeft:e(ot),SlideInTopRight:e(rt),SlideOutTopRight:e(at),SlideInTopLeft:e(et),SlideOutTopLeft:e(tt),SlideInRight:e(nt),SlideOutRight:e($n),SlideInBottomRight:e(Qn),SlideOutBottomRight:e(Kn),SlideInBottom:e(Gn),SlideOutBottom:e(qn),SlideInBottomLeft:e(Jn),SlideOutBottomLeft:e(Mn)},ft=["--*","-ms-overflow-style","-moz-appearance","-moz-binding","-moz-border-bottom-colors","-moz-border-left-colors","-moz-border-right-colors","-moz-border-top-colors","-moz-context-properties","-moz-float-edge","-moz-force-broken-image-icon","-moz-image-region","-moz-orient","-moz-outline-radius","-moz-outline-radius-bottomleft","-moz-outline-radius-bottomright","-moz-outline-radius-topleft","-moz-outline-radius-topright","-moz-stack-sizing","-moz-text-blink","-moz-user-focus","-moz-user-input","-moz-user-modify","-moz-window-shadow","-webkit-border-before","-webkit-border-before-color","-webkit-border-before-style","-webkit-border-before-width","-webkit-box-reflect","-webkit-mask","-webkit-mask-attachment","-webkit-mask-clip","-webkit-mask-composite","-webkit-mask-image","-webkit-mask-origin","-webkit-mask-position","-webkit-mask-position-x","-webkit-mask-position-y","-webkit-mask-repeat","-webkit-mask-repeat-x","-webkit-mask-repeat-y","-webkit-tap-highlight-color","-webkit-text-fill-color","-webkit-text-stroke","-webkit-text-stroke-color","-webkit-text-stroke-width","-webkit-touch-callout","align-content","align-items","align-self","all","animation","animation-delay","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-name","animation-play-state","animation-timing-function","appearance","azimuth","backdrop-filter","backface-visibility","background","background-attachment","background-blend-mode","background-clip","background-color","background-image","background-origin","background-position","background-position-x","background-position-y","background-repeat","background-size","block-size","border","border-block-end","border-block-end-color","border-block-end-style","border-block-end-width","border-block-start","border-block-start-color","border-block-start-style","border-block-start-width","border-bottom","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-style","border-bottom-width","border-collapse","border-color","border-image","border-image-outset","border-image-repeat","border-image-slice","border-image-source","border-image-width","border-inline-end","border-inline-end-color","border-inline-end-style","border-inline-end-width","border-inline-start","border-inline-start-color","border-inline-start-style","border-inline-start-width","border-left","border-left-color","border-left-style","border-left-width","border-radius","border-right","border-right-color","border-right-style","border-right-width","border-spacing","border-style","border-top","border-top-color","border-top-left-radius","border-top-right-radius","border-top-style","border-top-width","border-width","bottom","box-align","box-decoration-break","box-direction","box-flex","box-flex-group","box-lines","box-ordinal-group","box-orient","box-pack","box-shadow","box-sizing","break-after","break-before","break-inside","caption-side","caret-color","clear","clip","clip-path","color","column-count","column-fill","column-gap","column-rule","column-rule-color","column-rule-style","column-rule-width","column-span","column-width","columns","contain","content","counter-increment","counter-reset","cursor","direction","display","display-inside","display-list","display-outside","empty-cells","filter","flex","flex-basis","flex-direction","flex-flow","flex-grow","flex-shrink","flex-wrap","float","font","font-family","font-feature-settings","font-kerning","font-language-override","font-variation-settings","font-size","font-size-adjust","font-stretch","font-style","font-synthesis","font-variant","font-variant-alternates","font-variant-caps","font-variant-east-asian","font-variant-ligatures","font-variant-numeric","font-variant-position","font-weight","grid","grid-area","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-column","grid-column-end","grid-column-gap","grid-column-start","grid-gap","grid-row","grid-row-end","grid-row-gap","grid-row-start","grid-template","grid-template-areas","grid-template-columns","grid-template-rows","height","hyphens","image-orientation","image-rendering","image-resolution","ime-mode","initial-letter","initial-letter-align","inline-size","isolation","justify-content","left","letter-spacing","line-break","line-height","line-height-step","list-style","list-style-image","list-style-position","list-style-type","margin","margin-block-end","margin-block-start","margin-bottom","margin-inline-end","margin-inline-start","margin-left","margin-right","margin-top","marker-offset","mask","mask-clip","mask-composite","mask-image","mask-mode","mask-origin","mask-position","mask-repeat","mask-size","mask-type","max-block-size","max-height","max-inline-size","max-width","min-block-size","min-height","min-inline-size","min-width","mix-blend-mode","object-fit","object-position","offset","offset-anchor","offset-block-end","offset-block-start","offset-inline-end","offset-inline-start","offset-distance","offset-path","offset-position","offset-rotate","opacity","order","orphans","outline","outline-color","outline-offset","outline-style","outline-width","overflow","overflow-clip-box","overflow-wrap","overflow-x","overflow-y","padding","padding-block-end","padding-block-start","padding-bottom","padding-inline-end","padding-inline-start","padding-left","padding-right","padding-top","page-break-after","page-break-before","page-break-inside","perspective","perspective-origin","pointer-events","position","quotes","resize","right","ruby-align","ruby-merge","ruby-position","scroll-behavior","scroll-snap-coordinate","scroll-snap-destination","scroll-snap-points-x","scroll-snap-points-y","scroll-snap-type","scroll-snap-type-x","scroll-snap-type-y","shape-image-threshold","shape-margin","shape-outside","tab-size","table-layout","text-align","text-align-last","text-combine-upright","text-decoration","text-decoration-color","text-decoration-line","text-decoration-skip","text-decoration-style","text-emphasis","text-emphasis-color","text-emphasis-position","text-emphasis-style","text-indent","text-justify","text-orientation","text-overflow","text-rendering","text-shadow","text-size-adjust","text-transform","text-underline-position","top","touch-action","transform","transform-box","transform-origin","transform-style","transition","transition-delay","transition-duration","transition-property","transition-timing-function","unicode-bidi","user-select","vertical-align","visibility","white-space","widows","width","will-change","word-break","word-spacing","word-wrap","writing-mode","z-index"],mt=["hover","focus","blur","active"],lt=Object.freeze(["\n animation-duration: ",";\n animation-name: ",";\n animation-fill-mode: forwards;\n animation-iteration-count: ",";\n\n > * {\n ",";\n transition: all 0.3s ease-in-out;\n\n &:hover {\n ",";\n }\n }\n\n &:focus {\n ",";\n }\n\n &:active {\n }\n"]),ut=t.div(lt,function(n){var t=n.duration;return t?t+"s":"1s"},function(n){return n.animation||"no-animation"},function(n){return n.iteration||"1"},function(n){var t=n.transitionFrom;return t&&""!==t?t:""},function(n){var t=n.transitionTo;return t&&""!==t?t:""},function(n){var t=n.transitionTo;return t&&""!==t?t:""}),pt=function(t){function e(){for(var n=this,e=[],a=arguments.length;a--;)e[a]=arguments[a];t.apply(this,e),this.state={delay_waited:!1,transite_in:!1,transite_out:!1,transite_continuous:!1},this.waitUntill=function(n){return new Promise(function(t,e){setTimeout(function(){return t()},n)})},this.triggerDelayedTransiteInAnimation=function(t){return n.waitUntill(n.calculateDelayInTime(t)).then(function(){return n.setState(function(n,t){return{transite_in:!0}})})},this.triggerDelayedTransiteOutAnimation=function(t){return n.waitUntill(n.calculateDelayOutTime(t)).then(function(){n.setState(function(n,t){return{transite_out:!0}})})},this.triggerDelayedTransiteOutAnimationWithInAnimation=function(t){return n.waitUntill(n.calculateTimeToExitWithInAnimation(t)).then(function(){n.setState(function(n,t){return{transite_out:!0}})})},this.triggerInAnimation=function(){return n.setState(function(n,t){return{transite_in:!0}})},this.triggerOutAnimation=function(){return n.setState(function(n,t){return{transite_out:!0,transite_continuous:!1}})},this.triggerContinuousAnimation=function(){return n.setState(function(n,t){return{transite_continuous:!0}})},this.triggerDirectContinuousAnimation=function(){return n.setState(function(n,t){return{transite_in:!0,transite_continuous:!0}})},this.triggerContinuousAfterInAnimation=function(t){return n.waitUntill(t.duration_in).then(function(){return n.setState(function(n,t){return{transite_continuous:!0}})})},this.setDelayAsWaited=function(){return n.setState(function(n,t){return{delay_waited:!0}})},this.haveDelayIn=function(n){if(n)return"delay_in"in n},this.haveDelayOut=function(n){if(n)return"delay_out"in n},this.haveAnimationIn=function(n){if(n)return"in"in n},this.haveAnimationOut=function(n){if(n)return"out"in n},this.haveAnimationContinuous=function(n){if(n)return"continuous"in n},this.calculateDelayInTime=function(n){if(n)return 1e3*n.delay_in},this.calculateDelayOutTime=function(n){if(n)return 1e3*n.delay_out},this.calculateDurationInTime=function(n){if(n)return 1e3*n.duration_in},this.calculateDurationContinousTime=function(n){if(n)return 1e3*n.duration_continuous},this.calculateDurationOutTime=function(n){if(n)return 1e3*n.duration_out},this.calculateDurationDelayBetween=function(n){if(n)return 1e3*n.delay_between},this.calculateTimeToExitWithInAnimation=function(n){if(n)return 1e3*(n.delay_in+n.duration_in+n.delay_between)},this.checkForValidCSSProperty=function(n){return ft.includes(n)},this.checkForValidDuration=function(n){return"number"==typeof n&&n>=0},this.checkForValidTransitionType=function(n){return mt.includes(n)},this.checkForValidIteration=function(n){var t=parseInt(n,10);return"number"==typeof t&&t>=1||"infinite"===n},this.checkForValidFromToObject=function(n){return"property"in n&&"value"in n},this.validateAnimation=function(t){if(t){if("in"in t){if(!("duration_in"in t))throw new TypeError("If you have an in animation you need to specify a duration for that animation");if(!n.checkForValidDuration(t.duration_in))throw new TypeError(t.duration_in+" is not a valid duration in for an animation");if("iteration"in t&&!n.checkForValidIteration(t.iteration))throw new TypeError(t.iteration+" is not a valid type of iteration property. Should be real number or the 'inifite' literal")}else if("delay_between"in t)throw new TypeError("You cannot have a delay between in and out animations if you're missing any of them");if("out"in t){if(!("duration_out"in t))throw new TypeError("If you have an out animation you need to specify a duration for that animation")}else if("delay_between"in t)throw new TypeError("You cannot have a delay between in and out animations if you're missing any of them");if("in"in t&&"out"in t){if(!("delay_between"in t))throw new TypeError("If you have an in animation and an out animation you need to specify a delay between those animations");if(!n.checkForValidDuration(t.duration_out))throw new TypeError(t.duration_out+" is not a valid duration out for an animation")}if("continuous"in t){if(!("duration_continuous"in t))throw new TypeError(t.duration_out+" is not a valid duration out for an animation");if(!n.checkForValidDuration(t.duration_continuous))throw new TypeError(t.duration_continuous+" is not a valid duration for a continuous animation")}}},this.validateTransitions=function(t){if(t){if(!("type"in t))throw new TypeError("You're missing the type of transition property. Eg: hover, focus, blur, active, ...");if(!n.checkForValidTransitionType(t.type))throw new TypeError(t.type+" is not a valid type of transition");if(!("from"in t))throw new TypeError("You're missing the from property of the transition that sets the point to start at");if(!n.checkForValidFromToObject(t.from))throw new TypeError(JSON.stringify(t.from)+" is not a valid transition FROM object. It needs to have the following structure: { property: string, value: string || Number }");if(!n.checkForValidCSSProperty(t.from.property))throw new TypeError(t.from.property+" is not a valid CSS property at FROM object");if(!("to"in t))throw new TypeError("You're missing the to property of the transition that sets the point of where to end at");if(!n.checkForValidFromToObject(t.to))throw new TypeError(JSON.stringify(t.from)+" is not a valid transition TO object. It needs to have the following structure: { property: string, value: string || Number }");if(!n.checkForValidCSSProperty(t.to.property))throw new TypeError(t.from.property+" is not a valid CSS property at TO object")}},this.getCurrentAnimation=function(){var t=n.props.animation;if(t){var e=n.state,a=e.transite_out,r=e.transite_in,o=e.transite_continuous;return!r||o||a?r&&o?t.continuous:(r&&!o||!r&&!o)&&a?t.out:null:t.in}},this.getCurrentDuration=function(){var t=n.props.animation;if(t){var e=n.state;return e.transite_in?t.duration_in:e.transite_continuous?t.duration_continuous:e.transite_out?t.duration_out:null}},this.getCurrentIteration=function(){var t=n.props.animation;if(t)return n.state.transite_continuous?"infinite":t.iteration},this.getTransitionFrom=function(){var t=n.props.transition;if(t)return"hover"===t.type?t.from.property+": "+t.from.value:""},this.getTransitionTo=function(){var t=n.props.transition;if(t)return"hover"===t.type?t.to.property+": "+t.to.value+";":""}}return t&&(e.__proto__=t),(e.prototype=Object.create(t&&t.prototype)).constructor=e,e.prototype.componentDidMount=function(){try{var n=this,t=n.props,e=t.animation,a=t.transition;n.validateAnimation(e),n.validateTransitions(a);var r=function(){if(n.haveAnimationIn(e)){var t=function(){if(n.haveDelayIn(e))return Promise.resolve(n.waitUntill(n.calculateDelayInTime(e))).then(function(){n.setDelayAsWaited(),n.triggerInAnimation();var t=function(){if(n.haveAnimationContinuous(e))return Promise.resolve(n.waitUntill(n.calculateDurationInTime(e))).then(function(){n.triggerContinuousAnimation();var t=function(){if(n.haveAnimationOut(e))return Promise.resolve(n.waitUntill(n.calculateDurationDelayBetween(e))).then(function(){n.triggerOutAnimation()})}();if(t&&t.then)return t.then(function(){})});var t=function(){if(n.haveAnimationOut(e))return Promise.resolve(n.waitUntill(n.calculateDurationDelayBetween(e))).then(function(){n.triggerOutAnimation()})}();return t&&t.then?t.then(function(){}):void 0}();if(t&&t.then)return t.then(function(){})});n.setDelayAsWaited(),n.triggerInAnimation();var t=function(){if(n.haveAnimationContinuous(e))return Promise.resolve(n.waitUntill(n.calculateDurationInTime(e))).then(function(){n.triggerContinuousAnimation();var t=function(){if(n.haveAnimationOut(e))return Promise.resolve(n.waitUntill(n.calculateDurationDelayBetween(e))).then(function(){n.triggerOutAnimation()})}();if(t&&t.then)return t.then(function(){})});var t=function(){if(n.haveAnimationOut(e))return Promise.resolve(n.waitUntill(n.calculateDurationDelayBetween(e))).then(function(){n.triggerOutAnimation()})}();return t&&t.then?t.then(function(){}):void 0}();return t&&t.then?t.then(function(){}):void 0}();if(t&&t.then)return t.then(function(){})}else{n.setDelayAsWaited(),n.triggerInAnimation();var a=function(){if(n.haveAnimationContinuous(e)){n.triggerDirectContinuousAnimation();var t=function(){if(n.haveAnimationOut(e))return Promise.resolve(n.waitUntill(n.calculateDelayOutTime(e))).then(function(){n.triggerOutAnimation(),console.log("Out animation triggered after delay out")})}();if(t&&t.then)return t.then(function(){})}else{var a=function(){if(n.haveAnimationOut(e))return Promise.resolve(n.waitUntill(n.calculateDelayOutTime(e))).then(function(){n.triggerOutAnimation(),console.log("Out animation triggered after delay out")})}();if(a&&a.then)return a.then(function(){})}}();if(a&&a.then)return a.then(function(){})}}();return r&&r.then?r.then(function(){}):void 0}catch(n){return Promise.reject(n)}},e.prototype.render=function(){var t=this.props.children;return this.state.delay_waited?n.createElement(ut,{animation:this.getCurrentAnimation(),duration:this.getCurrentDuration(),iteration:this.getCurrentIteration(),transitionFrom:this.getTransitionFrom(),transitionTo:this.getTransitionTo()},t):null},e}(n.Component);export{pt as Animated,pn as FadeAnimations,p as BounceAnimations,Z as ScaleAnimations,Nn as RotateAnimations,ct as SlideAnimations}; 2 | //# sourceMappingURL=animated.mjs.map 3 | -------------------------------------------------------------------------------- /lib/animated.js: -------------------------------------------------------------------------------- 1 | function n(n){return n&&"object"==typeof n&&"default"in n?n.default:n}var t=n(require("react")),e=require("styled-components"),a=n(e),r=Object.freeze(["\n 0% {\n transform: scale(7);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 38% {\n transform: scale(1);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 55% {\n transform: scale(1.5);\n animation-timing-function: ease-in;\n }\n 72% {\n transform: scale(1);\n animation-timing-function: ease-out;\n }\n 81% {\n transform: scale(1.24);\n animation-timing-function: ease-in;\n }\n 89% {\n transform: scale(1);\n animation-timing-function: ease-out;\n }\n 95% {\n transform: scale(1.04);\n animation-timing-function: ease-in;\n }\n 100% {\n transform: scale(1);\n animation-timing-function: ease-out;\n }\n"]),o=Object.freeze(["\n 0% {\n transform: translateZ(0);\n animation-timing-function: ease-out;\n }\n 5% {\n transform: translateZ(-100px);\n animation-timing-function: ease-in;\n }\n 15% {\n transform: translateZ(0);\n animation-timing-function: ease-out;\n }\n 25% {\n transform: translateZ(-110px);\n animation-timing-function: ease-in;\n }\n 38% {\n transform: translateZ(0);\n animation-timing-function: ease-out;\n }\n 52% {\n transform: translateZ(-200px);\n animation-timing-function: ease-in;\n }\n 70% {\n transform: translateZ(0) scale(1);\n animation-timing-function: ease-out;\n }\n 85% {\n opacity: 1;\n }\n 100% {\n transform: translateZ(-900px) scale(0);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n"]),i=Object.freeze(["\n 0% {\n transform: scale(0);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 38% {\n transform: scale(1);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 55% {\n transform: scale(0.7);\n animation-timing-function: ease-in;\n }\n 72% {\n transform: scale(1);\n animation-timing-function: ease-out;\n }\n 81% {\n transform: scale(0.84);\n animation-timing-function: ease-in;\n }\n 89% {\n transform: scale(1);\n animation-timing-function: ease-out;\n }\n 95% {\n transform: scale(0.95);\n animation-timing-function: ease-in;\n }\n 100% {\n transform: scale(1);\n animation-timing-function: ease-out;\n }\n"]),s=Object.freeze(["\n 0% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 5% {\n transform: translateX(-30px);\n animation-timing-function: ease-in;\n }\n 15% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 25% {\n transform: translateX(-38px);\n animation-timing-function: ease-in;\n }\n 38% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 52% {\n transform: translateX(-80px);\n animation-timing-function: ease-in;\n }\n 70% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 85% {\n opacity: 1;\n }\n 100% {\n transform: translateX(-1000px);\n opacity: 0;\n }\n"]),f=Object.freeze(["\n 0% {\n transform: translateX(-600px);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 38% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 55% {\n transform: translateX(-68px);\n animation-timing-function: ease-in;\n }\n 72% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 81% {\n transform: translateX(-28px);\n animation-timing-function: ease-in;\n }\n 90% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 95% {\n transform: translateX(-8px);\n animation-timing-function: ease-in;\n }\n 100% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n"]),m=Object.freeze(["\n 0% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 5% {\n transform: translateY(30px);\n animation-timing-function: ease-in;\n }\n 15% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 25% {\n transform: translateY(38px);\n animation-timing-function: ease-in;\n }\n 38% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 52% {\n transform: translateY(75px);\n animation-timing-function: ease-in;\n }\n 70% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 85% {\n opacity: 1;\n }\n 100% {\n transform: translateY(800px);\n opacity: 0;\n }\n"]),c=Object.freeze(["\n 0% {\n transform: translateY(500px);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 38% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 55% {\n transform: translateY(65px);\n animation-timing-function: ease-in;\n }\n 72% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 81% {\n transform: translateY(28px);\n animation-timing-function: ease-in;\n }\n 90% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 95% {\n transform: translateY(8px);\n animation-timing-function: ease-in;\n }\n 100% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n"]),l=Object.freeze(["\n 0% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 5% {\n transform: translateX(30px);\n animation-timing-function: ease-in;\n }\n 15% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 25% {\n transform: translateX(38px);\n animation-timing-function: ease-in;\n }\n 38% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 52% {\n transform: translateX(80px);\n animation-timing-function: ease-in;\n }\n 65% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 85% {\n opacity: 1;\n }\n 100% {\n transform: translateX(1000px);\n opacity: 0;\n }\n"]),u=Object.freeze(["\n 0% {\n transform: translateX(600px);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 38% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 55% {\n transform: translateX(68px);\n animation-timing-function: ease-in;\n }\n 72% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 81% {\n transform: translateX(32px);\n animation-timing-function: ease-in;\n }\n 90% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 95% {\n transform: translateX(8px);\n animation-timing-function: ease-in;\n }\n 100% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n"]),p=Object.freeze(["\n 0% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 5% {\n transform: translateY(-30px);\n animation-timing-function: ease-in;\n }\n 15% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 25% {\n transform: translateY(-38px);\n animation-timing-function: ease-in;\n }\n 38% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 52% {\n transform: translateY(-75px);\n animation-timing-function: ease-in;\n }\n 70% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 85% {\n opacity: 1;\n }\n 100% {\n transform: translateY(-800px);\n opacity: 0;\n }\n"]),y=Object.freeze(["\n 0% {\n transform: translateY(-500px);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 38% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 55% {\n transform: translateY(-65px);\n animation-timing-function: ease-in;\n }\n 72% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 81% {\n transform: translateY(-28px);\n -webkit-animation-timing-function: ease-in;\n }\n 90% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 95% {\n transform: translateY(-8px);\n animation-timing-function: ease-in;\n }\n 100% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n"]),g={BounceInTop:e.keyframes(y),BounceOutTop:e.keyframes(p),BounceInRight:e.keyframes(u),BounceOutRight:e.keyframes(l),BounceInBottom:e.keyframes(c),BounceOutBottom:e.keyframes(m),BounceInLeft:e.keyframes(f),BounceOutLeft:e.keyframes(s),BounceInForwards:e.keyframes(i),BounceOutForwards:e.keyframes(o),BounceInBackwards:e.keyframes(r),BounceOutBackwards:e.keyframes(o)},d=Object.freeze(["\n 0% {\n transform: scaleX(1);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n 100% {\n transform: scaleX(0);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n"]),b=Object.freeze(["\n 0% {\n transform: scaleX(0);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n 100% {\n transform: scaleX(1);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n"]),h=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 50% 100%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 50% 100%;\n opacity: 1;\n }\n"]),k=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 50% 100%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 50% 100%;\n opacity: 1;\n }\n"]),O=Object.freeze(["\n 0% {\n transform: scaleX(1);\n transform-origin: 0 0;\n opacity: 1;\n }\n 100% {\n transform: scaleX(0);\n transform-origin: 0 0;\n opacity: 1;\n }\n"]),z=Object.freeze(["\n 0% {\n transform: scaleX(0);\n transform-origin: 0% 0%;\n opacity: 1;\n }\n 100% {\n transform: scaleX(1);\n transform-origin: 0% 0%;\n opacity: 1;\n }\n"]),w=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n"]),x=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n"]),j=Object.freeze(["\n 0% {\n transform: scaleX(1);\n opacity: 1;\n }\n 100% {\n transform: scaleX(0);\n opacity: 1;\n }\n"]),v=Object.freeze(["\n 0% {\n transform: scaleX(0);\n opacity: 1;\n }\n 100% {\n transform: scaleX(1);\n opacity: 1;\n }\n"]),Y=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 100% 50%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 100% 50%;\n opacity: 1;\n }\n"]),X=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 100% 50%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 100% 50%;\n opacity: 1;\n }\n"]),I=Object.freeze(["\n 0% {\n transform: scaleY(1);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n 100% {\n transform: scaleY(0);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n"]),T=Object.freeze(["\n 0% {\n transform: scaleY(0);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n 100% {\n transform: scaleY(1);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n"]),S=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 0 0;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 0 0;\n opacity: 1;\n }\n"]),R=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 0% 0%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 0% 0%;\n opacity: 1;\n }\n"]),_=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n"]),F=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n"]),B=Object.freeze(["\n 0% {\n transform: scaleY(1);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n 100% {\n transform: scaleY(0);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n"]),A=Object.freeze(["\n 0% {\n transform: scaleY(0);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n 100% {\n transform: scaleY(1);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n"]),D=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 0% 50%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 0% 50%;\n opacity: 1;\n }\n"]),C=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 0% 50%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 0% 50%;\n opacity: 1;\n }\n"]),L=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 50% 0%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 50% 0%;\n opacity: 1;\n }\n"]),E=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 50% 0%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 50% 0%;\n opacity: 1;\n }\n"]),V=Object.freeze(["\n 0% {\n transform: scaleY(1);\n opacity: 1;\n }\n 100% {\n transform: scaleY(0);\n opacity: 1;\n }\n"]),P=Object.freeze(["\n 0% {\n transform: scaleY(0);\n opacity: 1;\n }\n 100% {\n transform: scaleY(1);\n opacity: 1;\n }\n"]),U=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n"]),Z=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n"]),H=Object.freeze(["\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n opacity: 1;\n }\n"]),W=Object.freeze(["\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n"]),N={ScaleInCenter:e.keyframes(W),ScaleOutCenter:e.keyframes(H),ScaleInBottomLeft:e.keyframes(Z),ScaleOutBottomLeft:e.keyframes(U),ScaleInVerticalCenter:e.keyframes(P),ScaleOutVerticalCenter:e.keyframes(V),ScaleInTop:e.keyframes(E),ScaleOutTop:e.keyframes(L),ScaleInLeft:e.keyframes(C),ScaleOutLeft:e.keyframes(D),ScaleInVerticalTop:e.keyframes(A),ScaleOutVerticalTop:e.keyframes(B),ScaleInTopRight:e.keyframes(F),ScaleOutTopRight:e.keyframes(_),ScaleInTopLeft:e.keyframes(R),ScaleOutTopLeft:e.keyframes(S),ScaleInVerticalBottom:e.keyframes(T),ScaleOutVerticalBottom:e.keyframes(I),ScaleInRight:e.keyframes(X),ScaleOutRight:e.keyframes(Y),ScaleInHorizontalCenter:e.keyframes(v),ScaleOutHorizontalCenter:e.keyframes(j),ScaleInBottomRight:e.keyframes(x),ScaleOutBottomRight:e.keyframes(w),ScaleInHorizontalLeft:e.keyframes(z),ScaleOutHorizontalLeft:e.keyframes(O),ScaleInBottom:e.keyframes(k),ScaleOutBottom:e.keyframes(h),ScaleInHorizontalRight:e.keyframes(b),ScaleOutHorizontalRight:e.keyframes(d)},q=Object.freeze(["\n 0% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(50px) translateY(-50px);\n opacity: 0;\n }\n"]),M=Object.freeze(["\n 0% {\n transform: translateX(50px) translateY(-50px);\n opacity: 0;\n }\n 100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n"]),J=Object.freeze(["\n 0% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(-50px) translateY(-50px);\n opacity: 0;\n }\n"]),G=Object.freeze(["\n0% {\n transform: translateX(-50px) translateY(-50px);\n opacity: 0;\n}\n100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n}\n"]),K=Object.freeze(["\n 0% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(50px) translateY(50px);\n opacity: 0;\n }\n"]),Q=Object.freeze(["\n0% {\n transform: translateX(50px) translateY(50px);\n opacity: 0;\n}\n100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n}\n"]),$=Object.freeze(["\n 0% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(-50px) translateY(50px);\n opacity: 0;\n }\n"]),nn=Object.freeze(["\n 0% {\n transform: translateX(-50px) translateY(50px);\n opacity: 0;\n }\n 100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n"]),tn=Object.freeze(["\n0% {\n transform: scale(1);\n opacity: 1;\n}\n100% {\n transform: scale(0.6);\n opacity: 0;\n}\n"]),en=Object.freeze(["\n 0% {\n transform: scale(1.4);\n opacity: 0;\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n"]),an=Object.freeze(["\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 100% {\n transform: scale(1.4);\n opacity: 0;\n }\n"]),rn=Object.freeze(["\n 0% {\n transform: scale(0.6);\n opacity: 0;\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n"]),on=Object.freeze(["\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(50px);\n opacity: 0;\n }\n"]),sn=Object.freeze(["\n 0% {\n transform: translateX(50px);\n opacity: 0;\n }\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n"]),fn=Object.freeze(["\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(-50px);\n opacity: 0;\n }\n"]),mn=Object.freeze(["\n 0% {\n transform: translateX(-50px);\n opacity: 0;\n }\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n"]),cn=Object.freeze(["\n 0% {\n transform: translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(50px);\n opacity: 0;\n }\n"]),ln=Object.freeze(["\n 0% {\n transform: translateY(50px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n"]),un=Object.freeze(["\n0% {\n transform: translateY(0px);\n opacity: 1;\n}\n100% {\n transform: translateY(-50px);\n opacity: 0;\n}\n"]),pn=Object.freeze(["\n 0% {\n transform: translateY(-50px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n"]),yn=Object.freeze(["\n0% {\n opacity: 0;\n}\n50% {\n opacity: 1;\n}\n100% {\n opacity: 0;\n}\n"]),gn=Object.freeze(["\n0% {\n opacity: 1;\n}\n100% {\n opacity: 0;\n}\n"]),dn=Object.freeze(["\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n"]),bn={FadeIn:e.keyframes(dn),FadeOut:e.keyframes(gn),FadeInFadeOut:e.keyframes(yn),FadeInTop:e.keyframes(pn),FadeOutTop:e.keyframes(un),FadeInBottom:e.keyframes(ln),FadeOutBottom:e.keyframes(cn),FadeInLeft:e.keyframes(mn),FadeOutLeft:e.keyframes(fn),FadeInRight:e.keyframes(sn),FadeOutRight:e.keyframes(on),FadeInForwards:e.keyframes(rn),FadeOutForwards:e.keyframes(an),FadeInBackwards:e.keyframes(en),FadeOutBackwards:e.keyframes(tn),FadeInBottomLeft:e.keyframes(nn),FadeOutBottomLeft:e.keyframes($),FadeInBottomRight:e.keyframes(Q),FadeOutBottomRight:e.keyframes(K),FadeInTopLeft:e.keyframes(G),FadeOutTopLeft:e.keyframes(J),FadeInTopRight:e.keyframes(M),FadeOutTopRight:e.keyframes(q)},hn=Object.freeze(["\n 0% {\n transform: rotate(0);\n opacity: 1;\n }\n 100% {\n transform: rotate(-45deg);\n opacity: 0;\n }\n"]),kn=Object.freeze(["\n 0% {\n transform: translateZ(200px) rotate(45deg);\n opacity: 0;\n }\n 100% {\n transform: translateZ(0) rotate(0);\n opacity: 1;\n }\n"]),On=Object.freeze(["\n 0% {\n transform: translateZ(0) rotate(0);\n opacity: 1;\n }\n 100% {\n transform: translateZ(180px) rotate(45deg);\n opacity: 0;\n }\n"]),zn=Object.freeze(["\n 0% {\n transform: translateZ(-200px) rotate(-45deg);\n opacity: 0;\n }\n 100% {\n transform: translateZ(0) rotate(0);\n opacity: 1;\n }\n"]),wn=Object.freeze(["\n 0% {\n transform: rotate(45deg);\n opacity: 0;\n }\n 100% {\n transform: rotate(0);\n opacity: 1;\n }\n"]),xn=Object.freeze(["\n 0% {\n transform: rotate(0);\n opacity: 1;\n }\n 100% {\n transform: rotate(45deg);\n opacity: 0;\n }\n"]),jn=Object.freeze(["\n 0% {\n transform: rotate(-45deg);\n opacity: 0;\n }\n 100% {\n transform: rotate(0);\n opacity: 1;\n }\n"]),vn=Object.freeze(["\n 0% {\n transform: rotate3d(1, 1, 0, 360deg);\n opacity: 1;\n }\n 100% {\n transform: rotate3d(1, 1, 0, 0deg);\n opacity: 0;\n }\n"]),Yn=Object.freeze(["\n 0% {\n transform: rotate3d(1, 1, 0, -360deg);\n opacity: 0;\n }\n 100% {\n transform: rotate3d(1, 1, 0, 0deg);\n opacity: 1;\n }\n"]),Xn=Object.freeze(["\n 0% {\n transform: rotate3d(-1, 1, 0, 360deg);\n opacity: 1;\n }\n 100% {\n transform: rotate3d(-1, 1, 0, 0deg);\n opacity: 0;\n }\n"]),In=Object.freeze(["\n 0% {\n transform: rotate3d(-1, 1, 0, -360deg);\n opacity: 0;\n }\n 100% {\n transform: rotate3d(-1, 1, 0, 0deg);\n opacity: 1;\n }\n"]),Tn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: bottom;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: bottom;\n opacity: 0;\n }\n"]),Sn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: bottom;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: bottom;\n opacity: 1;\n }\n"]),Rn=Object.freeze(["\n 0% {\n transform: rotateY(360deg);\n opacity: 1;\n }\n 100% {\n transform: rotateY(0deg);\n opacity: 0;\n }\n"]),_n=Object.freeze(["\n 0% {\n transform: rotateY(-360deg);\n opacity: 0;\n }\n 100% {\n transform: rotateY(0deg);\n opacity: 1;\n }\n"]),Fn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: bottom right;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: bottom right;\n opacity: 0;\n }\n"]),Bn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: bottom right;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: bottom right;\n opacity: 1;\n }\n"]),An=Object.freeze(["\n 0% {\n transform: rotateX(360deg);\n opacity: 1;\n }\n 100% {\n transform: rotateX(0deg);\n opacity: 0;\n }\n"]),Dn=Object.freeze(["\n 0% {\n transform: rotateX(360deg);\n opacity: 0;\n }\n 100% {\n transform: rotateX(0deg);\n opacity: 1;\n }\n"]),Cn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: right;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: right;\n opacity: 0;\n }\n"]),Ln=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: right;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: right;\n opacity: 1;\n }\n"]),En=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: top left;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: top left;\n opacity: 0;\n }\n"]),Vn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: top left;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: top left;\n opacity: 1;\n }\n"]),Pn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: top right;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: top right;\n opacity: 0;\n }\n"]),Un=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: top right;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: top right;\n opacity: 1;\n }\n"]),Zn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: left;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: left;\n opacity: 0;\n }\n"]),Hn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: left;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: left;\n opacity: 1;\n }\n"]),Wn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: top;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: top;\n opacity: 0;\n }\n"]),Nn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: top;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: top;\n opacity: 1;\n }\n"]),qn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: bottom left;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: bottom left;\n opacity: 0;\n }\n"]),Mn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: bottom left;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: bottom left;\n opacity: 1;\n }\n"]),Jn=Object.freeze(["\n 0% {\n transform: rotate(0);\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n opacity: 0;\n }\n"]),Gn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n opacity: 0;\n }\n 100% {\n transform: rotate(0);\n opacity: 1;\n }\n"]),Kn={RotateInCenter:e.keyframes(Gn),RotateOutCenter:e.keyframes(Jn),RotateInBottomLeft:e.keyframes(Mn),RotateOutBottomLeft:e.keyframes(qn),RotateInTop:e.keyframes(Nn),RotateOutTop:e.keyframes(Wn),RotateInLeft:e.keyframes(Hn),RotateOutLeft:e.keyframes(Zn),RotateInTopRight:e.keyframes(Un),RotateOutTopRight:e.keyframes(Pn),RotateInTopLeft:e.keyframes(Vn),RotateOutTopLeft:e.keyframes(En),RotateInRight:e.keyframes(Ln),RotateOutRight:e.keyframes(Cn),RotateInHorizontal:e.keyframes(Dn),RotateOutHorizontal:e.keyframes(An),RotateInBottomRight:e.keyframes(Bn),RotateOutBottomRight:e.keyframes(Fn),RotateInVertical:e.keyframes(_n),RotateOutVertical:e.keyframes(Rn),RotateInBottom:e.keyframes(Sn),RotateOutBottom:e.keyframes(Tn),RotateInDiagonal:e.keyframes(In),RotateOutDiagonal:e.keyframes(Xn),RotateInDiagonalReverse:e.keyframes(Yn),RotateOutDiagonalReverse:e.keyframes(vn),RotateIn45Right:e.keyframes(jn),RotateOut45Right:e.keyframes(xn),RotateIn45Left:e.keyframes(wn),RotateOut45Left:e.keyframes(xn),RotateInForwards:e.keyframes(zn),RotateOutForwards:e.keyframes(On),RotateInBackwards:e.keyframes(kn),RotateOutBackwards:e.keyframes(hn)},Qn=Object.freeze(["\n 0% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(1000px) translateX(-1000px);\n opacity: 0;\n }\n"]),$n=Object.freeze(["\n 0% {\n transform: translateY(1000px) translateX(-1000px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n"]),nt=Object.freeze(["\n 0% {\n transform: translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(1000px);\n opacity: 0;\n }\n"]),tt=Object.freeze(["\n 0% {\n transform: translateY(1000px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n"]),et=Object.freeze(["\n 0% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(1000px) translateX(1000px);\n opacity: 0;\n }\n"]),at=Object.freeze(["\n 0% {\n transform: translateY(1000px) translateX(1000px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n"]),rt=Object.freeze(["\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(1000px);\n opacity: 0;\n }\n"]),ot=Object.freeze(["\n 0% {\n transform: translateX(1000px);\n opacity: 0;\n }\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n"]),it=Object.freeze(["\n 0% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(-1000px) translateX(-1000px);\n opacity: 0;\n }\n"]),st=Object.freeze(["\n 0% {\n transform: translateY(-1000px) translateX(-1000px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n"]),ft=Object.freeze(["\n 0% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(-1000px) translateX(1000px);\n opacity: 0;\n }\n"]),mt=Object.freeze(["\n 0% {\n transform: translateY(-1000px) translateX(1000px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n"]),ct=Object.freeze(["\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(-1000px);\n opacity: 0;\n }\n"]),lt=Object.freeze(["\n 0% {\n transform: translateX(-1000px);\n opacity: 0;\n }\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n"]),ut=Object.freeze(["\n 0% {\n transform: translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(-1000px);\n opacity: 0;\n }\n"]),pt=Object.freeze(["\n 0% {\n transform: translateY(-1000px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n"]),yt={SlideInTop:e.keyframes(pt),SlideOutTop:e.keyframes(ut),SlideInLeft:e.keyframes(lt),SlideOutLeft:e.keyframes(ct),SlideInTopRight:e.keyframes(mt),SlideOutTopRight:e.keyframes(ft),SlideInTopLeft:e.keyframes(st),SlideOutTopLeft:e.keyframes(it),SlideInRight:e.keyframes(ot),SlideOutRight:e.keyframes(rt),SlideInBottomRight:e.keyframes(at),SlideOutBottomRight:e.keyframes(et),SlideInBottom:e.keyframes(tt),SlideOutBottom:e.keyframes(nt),SlideInBottomLeft:e.keyframes($n),SlideOutBottomLeft:e.keyframes(Qn)},gt=["--*","-ms-overflow-style","-moz-appearance","-moz-binding","-moz-border-bottom-colors","-moz-border-left-colors","-moz-border-right-colors","-moz-border-top-colors","-moz-context-properties","-moz-float-edge","-moz-force-broken-image-icon","-moz-image-region","-moz-orient","-moz-outline-radius","-moz-outline-radius-bottomleft","-moz-outline-radius-bottomright","-moz-outline-radius-topleft","-moz-outline-radius-topright","-moz-stack-sizing","-moz-text-blink","-moz-user-focus","-moz-user-input","-moz-user-modify","-moz-window-shadow","-webkit-border-before","-webkit-border-before-color","-webkit-border-before-style","-webkit-border-before-width","-webkit-box-reflect","-webkit-mask","-webkit-mask-attachment","-webkit-mask-clip","-webkit-mask-composite","-webkit-mask-image","-webkit-mask-origin","-webkit-mask-position","-webkit-mask-position-x","-webkit-mask-position-y","-webkit-mask-repeat","-webkit-mask-repeat-x","-webkit-mask-repeat-y","-webkit-tap-highlight-color","-webkit-text-fill-color","-webkit-text-stroke","-webkit-text-stroke-color","-webkit-text-stroke-width","-webkit-touch-callout","align-content","align-items","align-self","all","animation","animation-delay","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-name","animation-play-state","animation-timing-function","appearance","azimuth","backdrop-filter","backface-visibility","background","background-attachment","background-blend-mode","background-clip","background-color","background-image","background-origin","background-position","background-position-x","background-position-y","background-repeat","background-size","block-size","border","border-block-end","border-block-end-color","border-block-end-style","border-block-end-width","border-block-start","border-block-start-color","border-block-start-style","border-block-start-width","border-bottom","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-style","border-bottom-width","border-collapse","border-color","border-image","border-image-outset","border-image-repeat","border-image-slice","border-image-source","border-image-width","border-inline-end","border-inline-end-color","border-inline-end-style","border-inline-end-width","border-inline-start","border-inline-start-color","border-inline-start-style","border-inline-start-width","border-left","border-left-color","border-left-style","border-left-width","border-radius","border-right","border-right-color","border-right-style","border-right-width","border-spacing","border-style","border-top","border-top-color","border-top-left-radius","border-top-right-radius","border-top-style","border-top-width","border-width","bottom","box-align","box-decoration-break","box-direction","box-flex","box-flex-group","box-lines","box-ordinal-group","box-orient","box-pack","box-shadow","box-sizing","break-after","break-before","break-inside","caption-side","caret-color","clear","clip","clip-path","color","column-count","column-fill","column-gap","column-rule","column-rule-color","column-rule-style","column-rule-width","column-span","column-width","columns","contain","content","counter-increment","counter-reset","cursor","direction","display","display-inside","display-list","display-outside","empty-cells","filter","flex","flex-basis","flex-direction","flex-flow","flex-grow","flex-shrink","flex-wrap","float","font","font-family","font-feature-settings","font-kerning","font-language-override","font-variation-settings","font-size","font-size-adjust","font-stretch","font-style","font-synthesis","font-variant","font-variant-alternates","font-variant-caps","font-variant-east-asian","font-variant-ligatures","font-variant-numeric","font-variant-position","font-weight","grid","grid-area","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-column","grid-column-end","grid-column-gap","grid-column-start","grid-gap","grid-row","grid-row-end","grid-row-gap","grid-row-start","grid-template","grid-template-areas","grid-template-columns","grid-template-rows","height","hyphens","image-orientation","image-rendering","image-resolution","ime-mode","initial-letter","initial-letter-align","inline-size","isolation","justify-content","left","letter-spacing","line-break","line-height","line-height-step","list-style","list-style-image","list-style-position","list-style-type","margin","margin-block-end","margin-block-start","margin-bottom","margin-inline-end","margin-inline-start","margin-left","margin-right","margin-top","marker-offset","mask","mask-clip","mask-composite","mask-image","mask-mode","mask-origin","mask-position","mask-repeat","mask-size","mask-type","max-block-size","max-height","max-inline-size","max-width","min-block-size","min-height","min-inline-size","min-width","mix-blend-mode","object-fit","object-position","offset","offset-anchor","offset-block-end","offset-block-start","offset-inline-end","offset-inline-start","offset-distance","offset-path","offset-position","offset-rotate","opacity","order","orphans","outline","outline-color","outline-offset","outline-style","outline-width","overflow","overflow-clip-box","overflow-wrap","overflow-x","overflow-y","padding","padding-block-end","padding-block-start","padding-bottom","padding-inline-end","padding-inline-start","padding-left","padding-right","padding-top","page-break-after","page-break-before","page-break-inside","perspective","perspective-origin","pointer-events","position","quotes","resize","right","ruby-align","ruby-merge","ruby-position","scroll-behavior","scroll-snap-coordinate","scroll-snap-destination","scroll-snap-points-x","scroll-snap-points-y","scroll-snap-type","scroll-snap-type-x","scroll-snap-type-y","shape-image-threshold","shape-margin","shape-outside","tab-size","table-layout","text-align","text-align-last","text-combine-upright","text-decoration","text-decoration-color","text-decoration-line","text-decoration-skip","text-decoration-style","text-emphasis","text-emphasis-color","text-emphasis-position","text-emphasis-style","text-indent","text-justify","text-orientation","text-overflow","text-rendering","text-shadow","text-size-adjust","text-transform","text-underline-position","top","touch-action","transform","transform-box","transform-origin","transform-style","transition","transition-delay","transition-duration","transition-property","transition-timing-function","unicode-bidi","user-select","vertical-align","visibility","white-space","widows","width","will-change","word-break","word-spacing","word-wrap","writing-mode","z-index"],dt=["hover","focus","blur","active"],bt=Object.freeze(["\n animation-duration: ",";\n animation-name: ",";\n animation-fill-mode: forwards;\n animation-iteration-count: ",";\n\n > * {\n ",";\n transition: all 0.3s ease-in-out;\n\n &:hover {\n ",";\n }\n }\n\n &:focus {\n ",";\n }\n\n &:active {\n }\n"]),ht=a.div(bt,function(n){var t=n.duration;return t?t+"s":"1s"},function(n){return n.animation||"no-animation"},function(n){return n.iteration||"1"},function(n){var t=n.transitionFrom;return t&&""!==t?t:""},function(n){var t=n.transitionTo;return t&&""!==t?t:""},function(n){var t=n.transitionTo;return t&&""!==t?t:""});exports.Animated=function(n){function e(){for(var t=this,e=[],a=arguments.length;a--;)e[a]=arguments[a];n.apply(this,e),this.state={delay_waited:!1,transite_in:!1,transite_out:!1,transite_continuous:!1},this.waitUntill=function(n){return new Promise(function(t,e){setTimeout(function(){return t()},n)})},this.triggerDelayedTransiteInAnimation=function(n){return t.waitUntill(t.calculateDelayInTime(n)).then(function(){return t.setState(function(n,t){return{transite_in:!0}})})},this.triggerDelayedTransiteOutAnimation=function(n){return t.waitUntill(t.calculateDelayOutTime(n)).then(function(){t.setState(function(n,t){return{transite_out:!0}})})},this.triggerDelayedTransiteOutAnimationWithInAnimation=function(n){return t.waitUntill(t.calculateTimeToExitWithInAnimation(n)).then(function(){t.setState(function(n,t){return{transite_out:!0}})})},this.triggerInAnimation=function(){return t.setState(function(n,t){return{transite_in:!0}})},this.triggerOutAnimation=function(){return t.setState(function(n,t){return{transite_out:!0,transite_continuous:!1}})},this.triggerContinuousAnimation=function(){return t.setState(function(n,t){return{transite_continuous:!0}})},this.triggerDirectContinuousAnimation=function(){return t.setState(function(n,t){return{transite_in:!0,transite_continuous:!0}})},this.triggerContinuousAfterInAnimation=function(n){return t.waitUntill(n.duration_in).then(function(){return t.setState(function(n,t){return{transite_continuous:!0}})})},this.setDelayAsWaited=function(){return t.setState(function(n,t){return{delay_waited:!0}})},this.haveDelayIn=function(n){if(n)return"delay_in"in n},this.haveDelayOut=function(n){if(n)return"delay_out"in n},this.haveAnimationIn=function(n){if(n)return"in"in n},this.haveAnimationOut=function(n){if(n)return"out"in n},this.haveAnimationContinuous=function(n){if(n)return"continuous"in n},this.calculateDelayInTime=function(n){if(n)return 1e3*n.delay_in},this.calculateDelayOutTime=function(n){if(n)return 1e3*n.delay_out},this.calculateDurationInTime=function(n){if(n)return 1e3*n.duration_in},this.calculateDurationContinousTime=function(n){if(n)return 1e3*n.duration_continuous},this.calculateDurationOutTime=function(n){if(n)return 1e3*n.duration_out},this.calculateDurationDelayBetween=function(n){if(n)return 1e3*n.delay_between},this.calculateTimeToExitWithInAnimation=function(n){if(n)return 1e3*(n.delay_in+n.duration_in+n.delay_between)},this.checkForValidCSSProperty=function(n){return gt.includes(n)},this.checkForValidDuration=function(n){return"number"==typeof n&&n>=0},this.checkForValidTransitionType=function(n){return dt.includes(n)},this.checkForValidIteration=function(n){var t=parseInt(n,10);return"number"==typeof t&&t>=1||"infinite"===n},this.checkForValidFromToObject=function(n){return"property"in n&&"value"in n},this.validateAnimation=function(n){if(n){if("in"in n){if(!("duration_in"in n))throw new TypeError("If you have an in animation you need to specify a duration for that animation");if(!t.checkForValidDuration(n.duration_in))throw new TypeError(n.duration_in+" is not a valid duration in for an animation");if("iteration"in n&&!t.checkForValidIteration(n.iteration))throw new TypeError(n.iteration+" is not a valid type of iteration property. Should be real number or the 'inifite' literal")}else if("delay_between"in n)throw new TypeError("You cannot have a delay between in and out animations if you're missing any of them");if("out"in n){if(!("duration_out"in n))throw new TypeError("If you have an out animation you need to specify a duration for that animation")}else if("delay_between"in n)throw new TypeError("You cannot have a delay between in and out animations if you're missing any of them");if("in"in n&&"out"in n){if(!("delay_between"in n))throw new TypeError("If you have an in animation and an out animation you need to specify a delay between those animations");if(!t.checkForValidDuration(n.duration_out))throw new TypeError(n.duration_out+" is not a valid duration out for an animation")}if("continuous"in n){if(!("duration_continuous"in n))throw new TypeError(n.duration_out+" is not a valid duration out for an animation");if(!t.checkForValidDuration(n.duration_continuous))throw new TypeError(n.duration_continuous+" is not a valid duration for a continuous animation")}}},this.validateTransitions=function(n){if(n){if(!("type"in n))throw new TypeError("You're missing the type of transition property. Eg: hover, focus, blur, active, ...");if(!t.checkForValidTransitionType(n.type))throw new TypeError(n.type+" is not a valid type of transition");if(!("from"in n))throw new TypeError("You're missing the from property of the transition that sets the point to start at");if(!t.checkForValidFromToObject(n.from))throw new TypeError(JSON.stringify(n.from)+" is not a valid transition FROM object. It needs to have the following structure: { property: string, value: string || Number }");if(!t.checkForValidCSSProperty(n.from.property))throw new TypeError(n.from.property+" is not a valid CSS property at FROM object");if(!("to"in n))throw new TypeError("You're missing the to property of the transition that sets the point of where to end at");if(!t.checkForValidFromToObject(n.to))throw new TypeError(JSON.stringify(n.from)+" is not a valid transition TO object. It needs to have the following structure: { property: string, value: string || Number }");if(!t.checkForValidCSSProperty(n.to.property))throw new TypeError(n.from.property+" is not a valid CSS property at TO object")}},this.getCurrentAnimation=function(){var n=t.props.animation;if(n){var e=t.state,a=e.transite_out,r=e.transite_in,o=e.transite_continuous;return!r||o||a?r&&o?n.continuous:(r&&!o||!r&&!o)&&a?n.out:null:n.in}},this.getCurrentDuration=function(){var n=t.props.animation;if(n){var e=t.state;return e.transite_in?n.duration_in:e.transite_continuous?n.duration_continuous:e.transite_out?n.duration_out:null}},this.getCurrentIteration=function(){var n=t.props.animation;if(n)return t.state.transite_continuous?"infinite":n.iteration},this.getTransitionFrom=function(){var n=t.props.transition;if(n)return"hover"===n.type?n.from.property+": "+n.from.value:""},this.getTransitionTo=function(){var n=t.props.transition;if(n)return"hover"===n.type?n.to.property+": "+n.to.value+";":""}}return n&&(e.__proto__=n),(e.prototype=Object.create(n&&n.prototype)).constructor=e,e.prototype.componentDidMount=function(){try{var n=this,t=n.props,e=t.animation,a=t.transition;n.validateAnimation(e),n.validateTransitions(a);var r=function(){if(n.haveAnimationIn(e)){var t=function(){if(n.haveDelayIn(e))return Promise.resolve(n.waitUntill(n.calculateDelayInTime(e))).then(function(){n.setDelayAsWaited(),n.triggerInAnimation();var t=function(){if(n.haveAnimationContinuous(e))return Promise.resolve(n.waitUntill(n.calculateDurationInTime(e))).then(function(){n.triggerContinuousAnimation();var t=function(){if(n.haveAnimationOut(e))return Promise.resolve(n.waitUntill(n.calculateDurationDelayBetween(e))).then(function(){n.triggerOutAnimation()})}();if(t&&t.then)return t.then(function(){})});var t=function(){if(n.haveAnimationOut(e))return Promise.resolve(n.waitUntill(n.calculateDurationDelayBetween(e))).then(function(){n.triggerOutAnimation()})}();return t&&t.then?t.then(function(){}):void 0}();if(t&&t.then)return t.then(function(){})});n.setDelayAsWaited(),n.triggerInAnimation();var t=function(){if(n.haveAnimationContinuous(e))return Promise.resolve(n.waitUntill(n.calculateDurationInTime(e))).then(function(){n.triggerContinuousAnimation();var t=function(){if(n.haveAnimationOut(e))return Promise.resolve(n.waitUntill(n.calculateDurationDelayBetween(e))).then(function(){n.triggerOutAnimation()})}();if(t&&t.then)return t.then(function(){})});var t=function(){if(n.haveAnimationOut(e))return Promise.resolve(n.waitUntill(n.calculateDurationDelayBetween(e))).then(function(){n.triggerOutAnimation()})}();return t&&t.then?t.then(function(){}):void 0}();return t&&t.then?t.then(function(){}):void 0}();if(t&&t.then)return t.then(function(){})}else{n.setDelayAsWaited(),n.triggerInAnimation();var a=function(){if(n.haveAnimationContinuous(e)){n.triggerDirectContinuousAnimation();var t=function(){if(n.haveAnimationOut(e))return Promise.resolve(n.waitUntill(n.calculateDelayOutTime(e))).then(function(){n.triggerOutAnimation(),console.log("Out animation triggered after delay out")})}();if(t&&t.then)return t.then(function(){})}else{var a=function(){if(n.haveAnimationOut(e))return Promise.resolve(n.waitUntill(n.calculateDelayOutTime(e))).then(function(){n.triggerOutAnimation(),console.log("Out animation triggered after delay out")})}();if(a&&a.then)return a.then(function(){})}}();if(a&&a.then)return a.then(function(){})}}();return r&&r.then?r.then(function(){}):void 0}catch(n){return Promise.reject(n)}},e.prototype.render=function(){var n=this.props.children;return this.state.delay_waited?t.createElement(ht,{animation:this.getCurrentAnimation(),duration:this.getCurrentDuration(),iteration:this.getCurrentIteration(),transitionFrom:this.getTransitionFrom(),transitionTo:this.getTransitionTo()},n):null},e}(t.Component),exports.FadeAnimations=bn,exports.BounceAnimations=g,exports.ScaleAnimations=N,exports.RotateAnimations=Kn,exports.SlideAnimations=yt; 2 | //# sourceMappingURL=animated.js.map 3 | -------------------------------------------------------------------------------- /lib/animated.umd.js: -------------------------------------------------------------------------------- 1 | !function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("styled-components")):"function"==typeof define&&define.amd?define(["exports","react","styled-components"],t):t(n.animatedStyledComponents={},n.react,n.styled)}(this,function(n,t,e){t=t&&t.hasOwnProperty("default")?t.default:t;var a="default"in e?e.default:e,r=Object.freeze(["\n 0% {\n transform: scale(7);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 38% {\n transform: scale(1);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 55% {\n transform: scale(1.5);\n animation-timing-function: ease-in;\n }\n 72% {\n transform: scale(1);\n animation-timing-function: ease-out;\n }\n 81% {\n transform: scale(1.24);\n animation-timing-function: ease-in;\n }\n 89% {\n transform: scale(1);\n animation-timing-function: ease-out;\n }\n 95% {\n transform: scale(1.04);\n animation-timing-function: ease-in;\n }\n 100% {\n transform: scale(1);\n animation-timing-function: ease-out;\n }\n"]),o=Object.freeze(["\n 0% {\n transform: translateZ(0);\n animation-timing-function: ease-out;\n }\n 5% {\n transform: translateZ(-100px);\n animation-timing-function: ease-in;\n }\n 15% {\n transform: translateZ(0);\n animation-timing-function: ease-out;\n }\n 25% {\n transform: translateZ(-110px);\n animation-timing-function: ease-in;\n }\n 38% {\n transform: translateZ(0);\n animation-timing-function: ease-out;\n }\n 52% {\n transform: translateZ(-200px);\n animation-timing-function: ease-in;\n }\n 70% {\n transform: translateZ(0) scale(1);\n animation-timing-function: ease-out;\n }\n 85% {\n opacity: 1;\n }\n 100% {\n transform: translateZ(-900px) scale(0);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n"]),i=Object.freeze(["\n 0% {\n transform: scale(0);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 38% {\n transform: scale(1);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 55% {\n transform: scale(0.7);\n animation-timing-function: ease-in;\n }\n 72% {\n transform: scale(1);\n animation-timing-function: ease-out;\n }\n 81% {\n transform: scale(0.84);\n animation-timing-function: ease-in;\n }\n 89% {\n transform: scale(1);\n animation-timing-function: ease-out;\n }\n 95% {\n transform: scale(0.95);\n animation-timing-function: ease-in;\n }\n 100% {\n transform: scale(1);\n animation-timing-function: ease-out;\n }\n"]),s=Object.freeze(["\n 0% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 5% {\n transform: translateX(-30px);\n animation-timing-function: ease-in;\n }\n 15% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 25% {\n transform: translateX(-38px);\n animation-timing-function: ease-in;\n }\n 38% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 52% {\n transform: translateX(-80px);\n animation-timing-function: ease-in;\n }\n 70% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 85% {\n opacity: 1;\n }\n 100% {\n transform: translateX(-1000px);\n opacity: 0;\n }\n"]),f=Object.freeze(["\n 0% {\n transform: translateX(-600px);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 38% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 55% {\n transform: translateX(-68px);\n animation-timing-function: ease-in;\n }\n 72% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 81% {\n transform: translateX(-28px);\n animation-timing-function: ease-in;\n }\n 90% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 95% {\n transform: translateX(-8px);\n animation-timing-function: ease-in;\n }\n 100% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n"]),m=Object.freeze(["\n 0% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 5% {\n transform: translateY(30px);\n animation-timing-function: ease-in;\n }\n 15% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 25% {\n transform: translateY(38px);\n animation-timing-function: ease-in;\n }\n 38% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 52% {\n transform: translateY(75px);\n animation-timing-function: ease-in;\n }\n 70% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 85% {\n opacity: 1;\n }\n 100% {\n transform: translateY(800px);\n opacity: 0;\n }\n"]),c=Object.freeze(["\n 0% {\n transform: translateY(500px);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 38% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 55% {\n transform: translateY(65px);\n animation-timing-function: ease-in;\n }\n 72% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 81% {\n transform: translateY(28px);\n animation-timing-function: ease-in;\n }\n 90% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 95% {\n transform: translateY(8px);\n animation-timing-function: ease-in;\n }\n 100% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n"]),l=Object.freeze(["\n 0% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 5% {\n transform: translateX(30px);\n animation-timing-function: ease-in;\n }\n 15% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 25% {\n transform: translateX(38px);\n animation-timing-function: ease-in;\n }\n 38% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 52% {\n transform: translateX(80px);\n animation-timing-function: ease-in;\n }\n 65% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 85% {\n opacity: 1;\n }\n 100% {\n transform: translateX(1000px);\n opacity: 0;\n }\n"]),u=Object.freeze(["\n 0% {\n transform: translateX(600px);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 38% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 55% {\n transform: translateX(68px);\n animation-timing-function: ease-in;\n }\n 72% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 81% {\n transform: translateX(32px);\n animation-timing-function: ease-in;\n }\n 90% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n 95% {\n transform: translateX(8px);\n animation-timing-function: ease-in;\n }\n 100% {\n transform: translateX(0);\n animation-timing-function: ease-out;\n }\n"]),p=Object.freeze(["\n 0% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 5% {\n transform: translateY(-30px);\n animation-timing-function: ease-in;\n }\n 15% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 25% {\n transform: translateY(-38px);\n animation-timing-function: ease-in;\n }\n 38% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 52% {\n transform: translateY(-75px);\n animation-timing-function: ease-in;\n }\n 70% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 85% {\n opacity: 1;\n }\n 100% {\n transform: translateY(-800px);\n opacity: 0;\n }\n"]),y=Object.freeze(["\n 0% {\n transform: translateY(-500px);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 38% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 55% {\n transform: translateY(-65px);\n animation-timing-function: ease-in;\n }\n 72% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 81% {\n transform: translateY(-28px);\n -webkit-animation-timing-function: ease-in;\n }\n 90% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n 95% {\n transform: translateY(-8px);\n animation-timing-function: ease-in;\n }\n 100% {\n transform: translateY(0);\n animation-timing-function: ease-out;\n }\n"]),g={BounceInTop:e.keyframes(y),BounceOutTop:e.keyframes(p),BounceInRight:e.keyframes(u),BounceOutRight:e.keyframes(l),BounceInBottom:e.keyframes(c),BounceOutBottom:e.keyframes(m),BounceInLeft:e.keyframes(f),BounceOutLeft:e.keyframes(s),BounceInForwards:e.keyframes(i),BounceOutForwards:e.keyframes(o),BounceInBackwards:e.keyframes(r),BounceOutBackwards:e.keyframes(o)},d=Object.freeze(["\n 0% {\n transform: scaleX(1);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n 100% {\n transform: scaleX(0);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n"]),b=Object.freeze(["\n 0% {\n transform: scaleX(0);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n 100% {\n transform: scaleX(1);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n"]),h=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 50% 100%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 50% 100%;\n opacity: 1;\n }\n"]),k=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 50% 100%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 50% 100%;\n opacity: 1;\n }\n"]),O=Object.freeze(["\n 0% {\n transform: scaleX(1);\n transform-origin: 0 0;\n opacity: 1;\n }\n 100% {\n transform: scaleX(0);\n transform-origin: 0 0;\n opacity: 1;\n }\n"]),z=Object.freeze(["\n 0% {\n transform: scaleX(0);\n transform-origin: 0% 0%;\n opacity: 1;\n }\n 100% {\n transform: scaleX(1);\n transform-origin: 0% 0%;\n opacity: 1;\n }\n"]),w=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n"]),x=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 100% 100%;\n opacity: 1;\n }\n"]),j=Object.freeze(["\n 0% {\n transform: scaleX(1);\n opacity: 1;\n }\n 100% {\n transform: scaleX(0);\n opacity: 1;\n }\n"]),v=Object.freeze(["\n 0% {\n transform: scaleX(0);\n opacity: 1;\n }\n 100% {\n transform: scaleX(1);\n opacity: 1;\n }\n"]),Y=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 100% 50%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 100% 50%;\n opacity: 1;\n }\n"]),X=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 100% 50%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 100% 50%;\n opacity: 1;\n }\n"]),I=Object.freeze(["\n 0% {\n transform: scaleY(1);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n 100% {\n transform: scaleY(0);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n"]),T=Object.freeze(["\n 0% {\n transform: scaleY(0);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n 100% {\n transform: scaleY(1);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n"]),S=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 0 0;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 0 0;\n opacity: 1;\n }\n"]),R=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 0% 0%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 0% 0%;\n opacity: 1;\n }\n"]),_=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n"]),F=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n"]),B=Object.freeze(["\n 0% {\n transform: scaleY(1);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n 100% {\n transform: scaleY(0);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n"]),A=Object.freeze(["\n 0% {\n transform: scaleY(0);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n 100% {\n transform: scaleY(1);\n transform-origin: 100% 0%;\n opacity: 1;\n }\n"]),D=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 0% 50%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 0% 50%;\n opacity: 1;\n }\n"]),C=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 0% 50%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 0% 50%;\n opacity: 1;\n }\n"]),L=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 50% 0%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 50% 0%;\n opacity: 1;\n }\n"]),E=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 50% 0%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 50% 0%;\n opacity: 1;\n }\n"]),V=Object.freeze(["\n 0% {\n transform: scaleY(1);\n opacity: 1;\n }\n 100% {\n transform: scaleY(0);\n opacity: 1;\n }\n"]),P=Object.freeze(["\n 0% {\n transform: scaleY(0);\n opacity: 1;\n }\n 100% {\n transform: scaleY(1);\n opacity: 1;\n }\n"]),U=Object.freeze(["\n 0% {\n transform: scale(1);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n"]),Z=Object.freeze(["\n 0% {\n transform: scale(0);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n transform-origin: 0% 100%;\n opacity: 1;\n }\n"]),H=Object.freeze(["\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n opacity: 1;\n }\n"]),W=Object.freeze(["\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n"]),N={ScaleInCenter:e.keyframes(W),ScaleOutCenter:e.keyframes(H),ScaleInBottomLeft:e.keyframes(Z),ScaleOutBottomLeft:e.keyframes(U),ScaleInVerticalCenter:e.keyframes(P),ScaleOutVerticalCenter:e.keyframes(V),ScaleInTop:e.keyframes(E),ScaleOutTop:e.keyframes(L),ScaleInLeft:e.keyframes(C),ScaleOutLeft:e.keyframes(D),ScaleInVerticalTop:e.keyframes(A),ScaleOutVerticalTop:e.keyframes(B),ScaleInTopRight:e.keyframes(F),ScaleOutTopRight:e.keyframes(_),ScaleInTopLeft:e.keyframes(R),ScaleOutTopLeft:e.keyframes(S),ScaleInVerticalBottom:e.keyframes(T),ScaleOutVerticalBottom:e.keyframes(I),ScaleInRight:e.keyframes(X),ScaleOutRight:e.keyframes(Y),ScaleInHorizontalCenter:e.keyframes(v),ScaleOutHorizontalCenter:e.keyframes(j),ScaleInBottomRight:e.keyframes(x),ScaleOutBottomRight:e.keyframes(w),ScaleInHorizontalLeft:e.keyframes(z),ScaleOutHorizontalLeft:e.keyframes(O),ScaleInBottom:e.keyframes(k),ScaleOutBottom:e.keyframes(h),ScaleInHorizontalRight:e.keyframes(b),ScaleOutHorizontalRight:e.keyframes(d)},q=Object.freeze(["\n 0% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(50px) translateY(-50px);\n opacity: 0;\n }\n"]),M=Object.freeze(["\n 0% {\n transform: translateX(50px) translateY(-50px);\n opacity: 0;\n }\n 100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n"]),J=Object.freeze(["\n 0% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(-50px) translateY(-50px);\n opacity: 0;\n }\n"]),G=Object.freeze(["\n0% {\n transform: translateX(-50px) translateY(-50px);\n opacity: 0;\n}\n100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n}\n"]),K=Object.freeze(["\n 0% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(50px) translateY(50px);\n opacity: 0;\n }\n"]),Q=Object.freeze(["\n0% {\n transform: translateX(50px) translateY(50px);\n opacity: 0;\n}\n100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n}\n"]),$=Object.freeze(["\n 0% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(-50px) translateY(50px);\n opacity: 0;\n }\n"]),nn=Object.freeze(["\n 0% {\n transform: translateX(-50px) translateY(50px);\n opacity: 0;\n }\n 100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n"]),tn=Object.freeze(["\n0% {\n transform: scale(1);\n opacity: 1;\n}\n100% {\n transform: scale(0.6);\n opacity: 0;\n}\n"]),en=Object.freeze(["\n 0% {\n transform: scale(1.4);\n opacity: 0;\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n"]),an=Object.freeze(["\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 100% {\n transform: scale(1.4);\n opacity: 0;\n }\n"]),rn=Object.freeze(["\n 0% {\n transform: scale(0.6);\n opacity: 0;\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n"]),on=Object.freeze(["\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(50px);\n opacity: 0;\n }\n"]),sn=Object.freeze(["\n 0% {\n transform: translateX(50px);\n opacity: 0;\n }\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n"]),fn=Object.freeze(["\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(-50px);\n opacity: 0;\n }\n"]),mn=Object.freeze(["\n 0% {\n transform: translateX(-50px);\n opacity: 0;\n }\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n"]),cn=Object.freeze(["\n 0% {\n transform: translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(50px);\n opacity: 0;\n }\n"]),ln=Object.freeze(["\n 0% {\n transform: translateY(50px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n"]),un=Object.freeze(["\n0% {\n transform: translateY(0px);\n opacity: 1;\n}\n100% {\n transform: translateY(-50px);\n opacity: 0;\n}\n"]),pn=Object.freeze(["\n 0% {\n transform: translateY(-50px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n"]),yn=Object.freeze(["\n0% {\n opacity: 0;\n}\n50% {\n opacity: 1;\n}\n100% {\n opacity: 0;\n}\n"]),gn=Object.freeze(["\n0% {\n opacity: 1;\n}\n100% {\n opacity: 0;\n}\n"]),dn=Object.freeze(["\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n"]),bn={FadeIn:e.keyframes(dn),FadeOut:e.keyframes(gn),FadeInFadeOut:e.keyframes(yn),FadeInTop:e.keyframes(pn),FadeOutTop:e.keyframes(un),FadeInBottom:e.keyframes(ln),FadeOutBottom:e.keyframes(cn),FadeInLeft:e.keyframes(mn),FadeOutLeft:e.keyframes(fn),FadeInRight:e.keyframes(sn),FadeOutRight:e.keyframes(on),FadeInForwards:e.keyframes(rn),FadeOutForwards:e.keyframes(an),FadeInBackwards:e.keyframes(en),FadeOutBackwards:e.keyframes(tn),FadeInBottomLeft:e.keyframes(nn),FadeOutBottomLeft:e.keyframes($),FadeInBottomRight:e.keyframes(Q),FadeOutBottomRight:e.keyframes(K),FadeInTopLeft:e.keyframes(G),FadeOutTopLeft:e.keyframes(J),FadeInTopRight:e.keyframes(M),FadeOutTopRight:e.keyframes(q)},hn=Object.freeze(["\n 0% {\n transform: rotate(0);\n opacity: 1;\n }\n 100% {\n transform: rotate(-45deg);\n opacity: 0;\n }\n"]),kn=Object.freeze(["\n 0% {\n transform: translateZ(200px) rotate(45deg);\n opacity: 0;\n }\n 100% {\n transform: translateZ(0) rotate(0);\n opacity: 1;\n }\n"]),On=Object.freeze(["\n 0% {\n transform: translateZ(0) rotate(0);\n opacity: 1;\n }\n 100% {\n transform: translateZ(180px) rotate(45deg);\n opacity: 0;\n }\n"]),zn=Object.freeze(["\n 0% {\n transform: translateZ(-200px) rotate(-45deg);\n opacity: 0;\n }\n 100% {\n transform: translateZ(0) rotate(0);\n opacity: 1;\n }\n"]),wn=Object.freeze(["\n 0% {\n transform: rotate(45deg);\n opacity: 0;\n }\n 100% {\n transform: rotate(0);\n opacity: 1;\n }\n"]),xn=Object.freeze(["\n 0% {\n transform: rotate(0);\n opacity: 1;\n }\n 100% {\n transform: rotate(45deg);\n opacity: 0;\n }\n"]),jn=Object.freeze(["\n 0% {\n transform: rotate(-45deg);\n opacity: 0;\n }\n 100% {\n transform: rotate(0);\n opacity: 1;\n }\n"]),vn=Object.freeze(["\n 0% {\n transform: rotate3d(1, 1, 0, 360deg);\n opacity: 1;\n }\n 100% {\n transform: rotate3d(1, 1, 0, 0deg);\n opacity: 0;\n }\n"]),Yn=Object.freeze(["\n 0% {\n transform: rotate3d(1, 1, 0, -360deg);\n opacity: 0;\n }\n 100% {\n transform: rotate3d(1, 1, 0, 0deg);\n opacity: 1;\n }\n"]),Xn=Object.freeze(["\n 0% {\n transform: rotate3d(-1, 1, 0, 360deg);\n opacity: 1;\n }\n 100% {\n transform: rotate3d(-1, 1, 0, 0deg);\n opacity: 0;\n }\n"]),In=Object.freeze(["\n 0% {\n transform: rotate3d(-1, 1, 0, -360deg);\n opacity: 0;\n }\n 100% {\n transform: rotate3d(-1, 1, 0, 0deg);\n opacity: 1;\n }\n"]),Tn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: bottom;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: bottom;\n opacity: 0;\n }\n"]),Sn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: bottom;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: bottom;\n opacity: 1;\n }\n"]),Rn=Object.freeze(["\n 0% {\n transform: rotateY(360deg);\n opacity: 1;\n }\n 100% {\n transform: rotateY(0deg);\n opacity: 0;\n }\n"]),_n=Object.freeze(["\n 0% {\n transform: rotateY(-360deg);\n opacity: 0;\n }\n 100% {\n transform: rotateY(0deg);\n opacity: 1;\n }\n"]),Fn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: bottom right;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: bottom right;\n opacity: 0;\n }\n"]),Bn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: bottom right;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: bottom right;\n opacity: 1;\n }\n"]),An=Object.freeze(["\n 0% {\n transform: rotateX(360deg);\n opacity: 1;\n }\n 100% {\n transform: rotateX(0deg);\n opacity: 0;\n }\n"]),Dn=Object.freeze(["\n 0% {\n transform: rotateX(360deg);\n opacity: 0;\n }\n 100% {\n transform: rotateX(0deg);\n opacity: 1;\n }\n"]),Cn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: right;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: right;\n opacity: 0;\n }\n"]),Ln=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: right;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: right;\n opacity: 1;\n }\n"]),En=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: top left;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: top left;\n opacity: 0;\n }\n"]),Vn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: top left;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: top left;\n opacity: 1;\n }\n"]),Pn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: top right;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: top right;\n opacity: 0;\n }\n"]),Un=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: top right;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: top right;\n opacity: 1;\n }\n"]),Zn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: left;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: left;\n opacity: 0;\n }\n"]),Hn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: left;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: left;\n opacity: 1;\n }\n"]),Wn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: top;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: top;\n opacity: 0;\n }\n"]),Nn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: top;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: top;\n opacity: 1;\n }\n"]),qn=Object.freeze(["\n 0% {\n transform: rotate(0);\n transform-origin: bottom left;\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n transform-origin: bottom left;\n opacity: 0;\n }\n"]),Mn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n transform-origin: bottom left;\n opacity: 0;\n }\n 100% {\n transform: rotate(0deg);\n transform-origin: bottom left;\n opacity: 1;\n }\n"]),Jn=Object.freeze(["\n 0% {\n transform: rotate(0);\n opacity: 1;\n }\n 100% {\n transform: rotate(-360deg);\n opacity: 0;\n }\n"]),Gn=Object.freeze(["\n 0% {\n transform: rotate(-360deg);\n opacity: 0;\n }\n 100% {\n transform: rotate(0);\n opacity: 1;\n }\n"]),Kn={RotateInCenter:e.keyframes(Gn),RotateOutCenter:e.keyframes(Jn),RotateInBottomLeft:e.keyframes(Mn),RotateOutBottomLeft:e.keyframes(qn),RotateInTop:e.keyframes(Nn),RotateOutTop:e.keyframes(Wn),RotateInLeft:e.keyframes(Hn),RotateOutLeft:e.keyframes(Zn),RotateInTopRight:e.keyframes(Un),RotateOutTopRight:e.keyframes(Pn),RotateInTopLeft:e.keyframes(Vn),RotateOutTopLeft:e.keyframes(En),RotateInRight:e.keyframes(Ln),RotateOutRight:e.keyframes(Cn),RotateInHorizontal:e.keyframes(Dn),RotateOutHorizontal:e.keyframes(An),RotateInBottomRight:e.keyframes(Bn),RotateOutBottomRight:e.keyframes(Fn),RotateInVertical:e.keyframes(_n),RotateOutVertical:e.keyframes(Rn),RotateInBottom:e.keyframes(Sn),RotateOutBottom:e.keyframes(Tn),RotateInDiagonal:e.keyframes(In),RotateOutDiagonal:e.keyframes(Xn),RotateInDiagonalReverse:e.keyframes(Yn),RotateOutDiagonalReverse:e.keyframes(vn),RotateIn45Right:e.keyframes(jn),RotateOut45Right:e.keyframes(xn),RotateIn45Left:e.keyframes(wn),RotateOut45Left:e.keyframes(xn),RotateInForwards:e.keyframes(zn),RotateOutForwards:e.keyframes(On),RotateInBackwards:e.keyframes(kn),RotateOutBackwards:e.keyframes(hn)},Qn=Object.freeze(["\n 0% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(1000px) translateX(-1000px);\n opacity: 0;\n }\n"]),$n=Object.freeze(["\n 0% {\n transform: translateY(1000px) translateX(-1000px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n"]),nt=Object.freeze(["\n 0% {\n transform: translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(1000px);\n opacity: 0;\n }\n"]),tt=Object.freeze(["\n 0% {\n transform: translateY(1000px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n"]),et=Object.freeze(["\n 0% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(1000px) translateX(1000px);\n opacity: 0;\n }\n"]),at=Object.freeze(["\n 0% {\n transform: translateY(1000px) translateX(1000px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n"]),rt=Object.freeze(["\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(1000px);\n opacity: 0;\n }\n"]),ot=Object.freeze(["\n 0% {\n transform: translateX(1000px);\n opacity: 0;\n }\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n"]),it=Object.freeze(["\n 0% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(-1000px) translateX(-1000px);\n opacity: 0;\n }\n"]),st=Object.freeze(["\n 0% {\n transform: translateY(-1000px) translateX(-1000px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n"]),ft=Object.freeze(["\n 0% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(-1000px) translateX(1000px);\n opacity: 0;\n }\n"]),mt=Object.freeze(["\n 0% {\n transform: translateY(-1000px) translateX(1000px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n"]),ct=Object.freeze(["\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(-1000px);\n opacity: 0;\n }\n"]),lt=Object.freeze(["\n 0% {\n transform: translateX(-1000px);\n opacity: 0;\n }\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n"]),ut=Object.freeze(["\n 0% {\n transform: translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(-1000px);\n opacity: 0;\n }\n"]),pt=Object.freeze(["\n 0% {\n transform: translateY(-1000px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n"]),yt={SlideInTop:e.keyframes(pt),SlideOutTop:e.keyframes(ut),SlideInLeft:e.keyframes(lt),SlideOutLeft:e.keyframes(ct),SlideInTopRight:e.keyframes(mt),SlideOutTopRight:e.keyframes(ft),SlideInTopLeft:e.keyframes(st),SlideOutTopLeft:e.keyframes(it),SlideInRight:e.keyframes(ot),SlideOutRight:e.keyframes(rt),SlideInBottomRight:e.keyframes(at),SlideOutBottomRight:e.keyframes(et),SlideInBottom:e.keyframes(tt),SlideOutBottom:e.keyframes(nt),SlideInBottomLeft:e.keyframes($n),SlideOutBottomLeft:e.keyframes(Qn)},gt=["--*","-ms-overflow-style","-moz-appearance","-moz-binding","-moz-border-bottom-colors","-moz-border-left-colors","-moz-border-right-colors","-moz-border-top-colors","-moz-context-properties","-moz-float-edge","-moz-force-broken-image-icon","-moz-image-region","-moz-orient","-moz-outline-radius","-moz-outline-radius-bottomleft","-moz-outline-radius-bottomright","-moz-outline-radius-topleft","-moz-outline-radius-topright","-moz-stack-sizing","-moz-text-blink","-moz-user-focus","-moz-user-input","-moz-user-modify","-moz-window-shadow","-webkit-border-before","-webkit-border-before-color","-webkit-border-before-style","-webkit-border-before-width","-webkit-box-reflect","-webkit-mask","-webkit-mask-attachment","-webkit-mask-clip","-webkit-mask-composite","-webkit-mask-image","-webkit-mask-origin","-webkit-mask-position","-webkit-mask-position-x","-webkit-mask-position-y","-webkit-mask-repeat","-webkit-mask-repeat-x","-webkit-mask-repeat-y","-webkit-tap-highlight-color","-webkit-text-fill-color","-webkit-text-stroke","-webkit-text-stroke-color","-webkit-text-stroke-width","-webkit-touch-callout","align-content","align-items","align-self","all","animation","animation-delay","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-name","animation-play-state","animation-timing-function","appearance","azimuth","backdrop-filter","backface-visibility","background","background-attachment","background-blend-mode","background-clip","background-color","background-image","background-origin","background-position","background-position-x","background-position-y","background-repeat","background-size","block-size","border","border-block-end","border-block-end-color","border-block-end-style","border-block-end-width","border-block-start","border-block-start-color","border-block-start-style","border-block-start-width","border-bottom","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-style","border-bottom-width","border-collapse","border-color","border-image","border-image-outset","border-image-repeat","border-image-slice","border-image-source","border-image-width","border-inline-end","border-inline-end-color","border-inline-end-style","border-inline-end-width","border-inline-start","border-inline-start-color","border-inline-start-style","border-inline-start-width","border-left","border-left-color","border-left-style","border-left-width","border-radius","border-right","border-right-color","border-right-style","border-right-width","border-spacing","border-style","border-top","border-top-color","border-top-left-radius","border-top-right-radius","border-top-style","border-top-width","border-width","bottom","box-align","box-decoration-break","box-direction","box-flex","box-flex-group","box-lines","box-ordinal-group","box-orient","box-pack","box-shadow","box-sizing","break-after","break-before","break-inside","caption-side","caret-color","clear","clip","clip-path","color","column-count","column-fill","column-gap","column-rule","column-rule-color","column-rule-style","column-rule-width","column-span","column-width","columns","contain","content","counter-increment","counter-reset","cursor","direction","display","display-inside","display-list","display-outside","empty-cells","filter","flex","flex-basis","flex-direction","flex-flow","flex-grow","flex-shrink","flex-wrap","float","font","font-family","font-feature-settings","font-kerning","font-language-override","font-variation-settings","font-size","font-size-adjust","font-stretch","font-style","font-synthesis","font-variant","font-variant-alternates","font-variant-caps","font-variant-east-asian","font-variant-ligatures","font-variant-numeric","font-variant-position","font-weight","grid","grid-area","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-column","grid-column-end","grid-column-gap","grid-column-start","grid-gap","grid-row","grid-row-end","grid-row-gap","grid-row-start","grid-template","grid-template-areas","grid-template-columns","grid-template-rows","height","hyphens","image-orientation","image-rendering","image-resolution","ime-mode","initial-letter","initial-letter-align","inline-size","isolation","justify-content","left","letter-spacing","line-break","line-height","line-height-step","list-style","list-style-image","list-style-position","list-style-type","margin","margin-block-end","margin-block-start","margin-bottom","margin-inline-end","margin-inline-start","margin-left","margin-right","margin-top","marker-offset","mask","mask-clip","mask-composite","mask-image","mask-mode","mask-origin","mask-position","mask-repeat","mask-size","mask-type","max-block-size","max-height","max-inline-size","max-width","min-block-size","min-height","min-inline-size","min-width","mix-blend-mode","object-fit","object-position","offset","offset-anchor","offset-block-end","offset-block-start","offset-inline-end","offset-inline-start","offset-distance","offset-path","offset-position","offset-rotate","opacity","order","orphans","outline","outline-color","outline-offset","outline-style","outline-width","overflow","overflow-clip-box","overflow-wrap","overflow-x","overflow-y","padding","padding-block-end","padding-block-start","padding-bottom","padding-inline-end","padding-inline-start","padding-left","padding-right","padding-top","page-break-after","page-break-before","page-break-inside","perspective","perspective-origin","pointer-events","position","quotes","resize","right","ruby-align","ruby-merge","ruby-position","scroll-behavior","scroll-snap-coordinate","scroll-snap-destination","scroll-snap-points-x","scroll-snap-points-y","scroll-snap-type","scroll-snap-type-x","scroll-snap-type-y","shape-image-threshold","shape-margin","shape-outside","tab-size","table-layout","text-align","text-align-last","text-combine-upright","text-decoration","text-decoration-color","text-decoration-line","text-decoration-skip","text-decoration-style","text-emphasis","text-emphasis-color","text-emphasis-position","text-emphasis-style","text-indent","text-justify","text-orientation","text-overflow","text-rendering","text-shadow","text-size-adjust","text-transform","text-underline-position","top","touch-action","transform","transform-box","transform-origin","transform-style","transition","transition-delay","transition-duration","transition-property","transition-timing-function","unicode-bidi","user-select","vertical-align","visibility","white-space","widows","width","will-change","word-break","word-spacing","word-wrap","writing-mode","z-index"],dt=["hover","focus","blur","active"],bt=Object.freeze(["\n animation-duration: ",";\n animation-name: ",";\n animation-fill-mode: forwards;\n animation-iteration-count: ",";\n\n > * {\n ",";\n transition: all 0.3s ease-in-out;\n\n &:hover {\n ",";\n }\n }\n\n &:focus {\n ",";\n }\n\n &:active {\n }\n"]),ht=a.div(bt,function(n){var t=n.duration;return t?t+"s":"1s"},function(n){return n.animation||"no-animation"},function(n){return n.iteration||"1"},function(n){var t=n.transitionFrom;return t&&""!==t?t:""},function(n){var t=n.transitionTo;return t&&""!==t?t:""},function(n){var t=n.transitionTo;return t&&""!==t?t:""});n.Animated=function(n){function e(){for(var t=this,e=[],a=arguments.length;a--;)e[a]=arguments[a];n.apply(this,e),this.state={delay_waited:!1,transite_in:!1,transite_out:!1,transite_continuous:!1},this.waitUntill=function(n){return new Promise(function(t,e){setTimeout(function(){return t()},n)})},this.triggerDelayedTransiteInAnimation=function(n){return t.waitUntill(t.calculateDelayInTime(n)).then(function(){return t.setState(function(n,t){return{transite_in:!0}})})},this.triggerDelayedTransiteOutAnimation=function(n){return t.waitUntill(t.calculateDelayOutTime(n)).then(function(){t.setState(function(n,t){return{transite_out:!0}})})},this.triggerDelayedTransiteOutAnimationWithInAnimation=function(n){return t.waitUntill(t.calculateTimeToExitWithInAnimation(n)).then(function(){t.setState(function(n,t){return{transite_out:!0}})})},this.triggerInAnimation=function(){return t.setState(function(n,t){return{transite_in:!0}})},this.triggerOutAnimation=function(){return t.setState(function(n,t){return{transite_out:!0,transite_continuous:!1}})},this.triggerContinuousAnimation=function(){return t.setState(function(n,t){return{transite_continuous:!0}})},this.triggerDirectContinuousAnimation=function(){return t.setState(function(n,t){return{transite_in:!0,transite_continuous:!0}})},this.triggerContinuousAfterInAnimation=function(n){return t.waitUntill(n.duration_in).then(function(){return t.setState(function(n,t){return{transite_continuous:!0}})})},this.setDelayAsWaited=function(){return t.setState(function(n,t){return{delay_waited:!0}})},this.haveDelayIn=function(n){if(n)return"delay_in"in n},this.haveDelayOut=function(n){if(n)return"delay_out"in n},this.haveAnimationIn=function(n){if(n)return"in"in n},this.haveAnimationOut=function(n){if(n)return"out"in n},this.haveAnimationContinuous=function(n){if(n)return"continuous"in n},this.calculateDelayInTime=function(n){if(n)return 1e3*n.delay_in},this.calculateDelayOutTime=function(n){if(n)return 1e3*n.delay_out},this.calculateDurationInTime=function(n){if(n)return 1e3*n.duration_in},this.calculateDurationContinousTime=function(n){if(n)return 1e3*n.duration_continuous},this.calculateDurationOutTime=function(n){if(n)return 1e3*n.duration_out},this.calculateDurationDelayBetween=function(n){if(n)return 1e3*n.delay_between},this.calculateTimeToExitWithInAnimation=function(n){if(n)return 1e3*(n.delay_in+n.duration_in+n.delay_between)},this.checkForValidCSSProperty=function(n){return gt.includes(n)},this.checkForValidDuration=function(n){return"number"==typeof n&&n>=0},this.checkForValidTransitionType=function(n){return dt.includes(n)},this.checkForValidIteration=function(n){var t=parseInt(n,10);return"number"==typeof t&&t>=1||"infinite"===n},this.checkForValidFromToObject=function(n){return"property"in n&&"value"in n},this.validateAnimation=function(n){if(n){if("in"in n){if(!("duration_in"in n))throw new TypeError("If you have an in animation you need to specify a duration for that animation");if(!t.checkForValidDuration(n.duration_in))throw new TypeError(n.duration_in+" is not a valid duration in for an animation");if("iteration"in n&&!t.checkForValidIteration(n.iteration))throw new TypeError(n.iteration+" is not a valid type of iteration property. Should be real number or the 'inifite' literal")}else if("delay_between"in n)throw new TypeError("You cannot have a delay between in and out animations if you're missing any of them");if("out"in n){if(!("duration_out"in n))throw new TypeError("If you have an out animation you need to specify a duration for that animation")}else if("delay_between"in n)throw new TypeError("You cannot have a delay between in and out animations if you're missing any of them");if("in"in n&&"out"in n){if(!("delay_between"in n))throw new TypeError("If you have an in animation and an out animation you need to specify a delay between those animations");if(!t.checkForValidDuration(n.duration_out))throw new TypeError(n.duration_out+" is not a valid duration out for an animation")}if("continuous"in n){if(!("duration_continuous"in n))throw new TypeError(n.duration_out+" is not a valid duration out for an animation");if(!t.checkForValidDuration(n.duration_continuous))throw new TypeError(n.duration_continuous+" is not a valid duration for a continuous animation")}}},this.validateTransitions=function(n){if(n){if(!("type"in n))throw new TypeError("You're missing the type of transition property. Eg: hover, focus, blur, active, ...");if(!t.checkForValidTransitionType(n.type))throw new TypeError(n.type+" is not a valid type of transition");if(!("from"in n))throw new TypeError("You're missing the from property of the transition that sets the point to start at");if(!t.checkForValidFromToObject(n.from))throw new TypeError(JSON.stringify(n.from)+" is not a valid transition FROM object. It needs to have the following structure: { property: string, value: string || Number }");if(!t.checkForValidCSSProperty(n.from.property))throw new TypeError(n.from.property+" is not a valid CSS property at FROM object");if(!("to"in n))throw new TypeError("You're missing the to property of the transition that sets the point of where to end at");if(!t.checkForValidFromToObject(n.to))throw new TypeError(JSON.stringify(n.from)+" is not a valid transition TO object. It needs to have the following structure: { property: string, value: string || Number }");if(!t.checkForValidCSSProperty(n.to.property))throw new TypeError(n.from.property+" is not a valid CSS property at TO object")}},this.getCurrentAnimation=function(){var n=t.props.animation;if(n){var e=t.state,a=e.transite_out,r=e.transite_in,o=e.transite_continuous;return!r||o||a?r&&o?n.continuous:(r&&!o||!r&&!o)&&a?n.out:null:n.in}},this.getCurrentDuration=function(){var n=t.props.animation;if(n){var e=t.state;return e.transite_in?n.duration_in:e.transite_continuous?n.duration_continuous:e.transite_out?n.duration_out:null}},this.getCurrentIteration=function(){var n=t.props.animation;if(n)return t.state.transite_continuous?"infinite":n.iteration},this.getTransitionFrom=function(){var n=t.props.transition;if(n)return"hover"===n.type?n.from.property+": "+n.from.value:""},this.getTransitionTo=function(){var n=t.props.transition;if(n)return"hover"===n.type?n.to.property+": "+n.to.value+";":""}}return n&&(e.__proto__=n),(e.prototype=Object.create(n&&n.prototype)).constructor=e,e.prototype.componentDidMount=function(){try{var n=this,t=n.props,e=t.animation,a=t.transition;n.validateAnimation(e),n.validateTransitions(a);var r=function(){if(n.haveAnimationIn(e)){var t=function(){if(n.haveDelayIn(e))return Promise.resolve(n.waitUntill(n.calculateDelayInTime(e))).then(function(){n.setDelayAsWaited(),n.triggerInAnimation();var t=function(){if(n.haveAnimationContinuous(e))return Promise.resolve(n.waitUntill(n.calculateDurationInTime(e))).then(function(){n.triggerContinuousAnimation();var t=function(){if(n.haveAnimationOut(e))return Promise.resolve(n.waitUntill(n.calculateDurationDelayBetween(e))).then(function(){n.triggerOutAnimation()})}();if(t&&t.then)return t.then(function(){})});var t=function(){if(n.haveAnimationOut(e))return Promise.resolve(n.waitUntill(n.calculateDurationDelayBetween(e))).then(function(){n.triggerOutAnimation()})}();return t&&t.then?t.then(function(){}):void 0}();if(t&&t.then)return t.then(function(){})});n.setDelayAsWaited(),n.triggerInAnimation();var t=function(){if(n.haveAnimationContinuous(e))return Promise.resolve(n.waitUntill(n.calculateDurationInTime(e))).then(function(){n.triggerContinuousAnimation();var t=function(){if(n.haveAnimationOut(e))return Promise.resolve(n.waitUntill(n.calculateDurationDelayBetween(e))).then(function(){n.triggerOutAnimation()})}();if(t&&t.then)return t.then(function(){})});var t=function(){if(n.haveAnimationOut(e))return Promise.resolve(n.waitUntill(n.calculateDurationDelayBetween(e))).then(function(){n.triggerOutAnimation()})}();return t&&t.then?t.then(function(){}):void 0}();return t&&t.then?t.then(function(){}):void 0}();if(t&&t.then)return t.then(function(){})}else{n.setDelayAsWaited(),n.triggerInAnimation();var a=function(){if(n.haveAnimationContinuous(e)){n.triggerDirectContinuousAnimation();var t=function(){if(n.haveAnimationOut(e))return Promise.resolve(n.waitUntill(n.calculateDelayOutTime(e))).then(function(){n.triggerOutAnimation(),console.log("Out animation triggered after delay out")})}();if(t&&t.then)return t.then(function(){})}else{var a=function(){if(n.haveAnimationOut(e))return Promise.resolve(n.waitUntill(n.calculateDelayOutTime(e))).then(function(){n.triggerOutAnimation(),console.log("Out animation triggered after delay out")})}();if(a&&a.then)return a.then(function(){})}}();if(a&&a.then)return a.then(function(){})}}();return r&&r.then?r.then(function(){}):void 0}catch(n){return Promise.reject(n)}},e.prototype.render=function(){var n=this.props.children;return this.state.delay_waited?t.createElement(ht,{animation:this.getCurrentAnimation(),duration:this.getCurrentDuration(),iteration:this.getCurrentIteration(),transitionFrom:this.getTransitionFrom(),transitionTo:this.getTransitionTo()},n):null},e}(t.Component),n.FadeAnimations=bn,n.BounceAnimations=g,n.ScaleAnimations=N,n.RotateAnimations=Kn,n.SlideAnimations=yt}); 2 | //# sourceMappingURL=animated.umd.js.map 3 | --------------------------------------------------------------------------------