From 5a1c6b185b5567999645f3a20b875365b9068ef4 Mon Sep 17 00:00:00 2001 From: Elton Mesquita Date: Thu, 7 May 2020 16:42:33 +0100 Subject: [PATCH] v4 release (#1050) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * New animations added * Update * Update * Update * Update * kill bower * Turn off animations for print media query (#856) * Add a feature to turn off animations for printing as requested. * Add print media type * Update the builds * Moved away from gulp to npx + postcss This PR changes the build system for a simpler one, using only npx as runner and postcss to process all the files. * Solves #618 * Solves #836 * Also solves #758 just for fun ;P * Updated travis and removed animate-config.json * Removed strayed gulpfile and trimmed the header * Moved prefix config to package.json and updated the tasks * Updated travis * Updated dependencies and postcss config * Now using CSS custom properties * Add css module file - solves #933 * Updated README for the new build * Rebulit files * Updated dependencies + added browserlist * Fixed small typo on README * Added imports to Back animations * Added FadeInTopLeft.css file Fade in the animation diagonally * Added fadeInTopRight.css file Fade in the animation diagonally * Added fadeInBottomLeft.css * Added fadeInBottomRight.css * Added fadeOutTopLeft.css * Added fadeOutTopRight.css * Added fadeOutBottomRight.css * Added fadeOutBottomLeft.css * Added imports to diagonal fadings * Aditional formatting * Added diagonal fadings to README * Fixes #966 * Animate.css v4 Updates (#1029) * Update to v4 * Add Iteration-Count CSS utility classes solves #998 * Updated builds * Update lightSpeed animations * Update builds * Fix Invalid CSS Media Query Syntax * Update build * Add gitpod support * Add newline in gitpod file * Update README * Revert * Declare variable * Update builds * Remove Gitpod support Co-authored-by: Waren Gonzaga * Improves building process and package.json tidy up * Improved animations (#901) * Improved bounce * Improved pulse * Improved bounceInDown * Improved bounceInLeft * Improved bounceInRight * Improved bounceInUp * Improved bounceOutDown * Improved bounceOuLeft * Improved bounceOuRight * Improved bounceOutRight * Improved fadeInDown * Improved fadeInDownBig * Improved fadeInLeft * Improved fadeInLeftBig * Improved fadeInRightBig * Improved fadeInUp * Improved fadeInUpBig * Improved fadeInRight * Reverted fade animations * Compiled * Updated prefers-reduced-motion support on README * Add .delay-1s (#982) The .delay-1s is missing from the readme * HTTPS relevant links on README (#972) prevents HTTP redirects * Create CONTRIBUTING.md (#1033) Co-authored-by: Melek REBAI Co-authored-by: Christian Oliff Co-authored-by: Daniel Eden * Updates dependencies * Updates prettier config * refactory transform-origin in styles * animation shake with X and Y options :hammer: * Adds shakeX and shakeY to the build * Set 0 Opacity to Out animation classes (#1043) * Update issue templates * Add 0 opacity to out classes * Update builds * Improved implemenation * Update builds * Update current readme * Update builds Co-authored-by: Elton Mesquita Co-authored-by: Waren Gonzaga * Removes prefix from att selector * Feature/new demo site (#1046) * Simplify & centralize the Animate.css home page. Finally. * Design tweak * Fix Lightspeed demos * Fix Lightspeed demos (cont.) * Trigger animation on change as well as click * Correct jQuery example. Fixes #127 * Remove Readme on gh-pages to prevent mistakes like ee75b81 * Use animate.min.css because whatever * Update demo page with MS animation JS hooks. * Updating home page with rubberBand animation. * Reverse hue animation Red-orange-brown isn’t a great first impression. * Add readme, use cssmin minified CSS instead of csso * Update gh-pages * Remove protocol from urls Fixes Chrome’s SSL issue * Remove Square Cash link Donations are weird, and only US account holders could use this. * Updating Gh-page animate.css to the current version This is a simple commit, bringing animate.css up to date with the current master version. * Updating Gh-page animate.min.css to reflect the current version This is a simply update to the Animate.min.css file, to reflect the current version * Update CSS * Updating Gh-page index.html to the reflect the addition of zooms (in out down etc) This adds the optgroup "zoom", and associated options of: ZoomIn, zoomOut, zoomInDown, zoomInUp, zoomInLeft, zoomInRight, zoomOutLeft, zoomOutRight, zoomOutUp, and zoomOutDown. * refactoring index.html to mimic the current optgroup styling I added zooms, which were absent, but added them in a way that didn't reflect the current optgroup styling and delineation. I fixed that and now exits and entrances are grouped appropriately. * updated index.html to reflect the standard optgroup styling on sliders, added slideInDown In addition to adding slider keyframes that were missing, I placed them into the appropriate optgroups to mimic the similar styling of the other animations. * Merging updated version of animate.min.css As requested, this is the updated version of animate.min.css that @daneden request I include in the pull request. * Updated animate.min.css Made it the new version * added jello to options * Update CSS * Add jackInTheBox to gh-pages (#694) * New Special - jackInTheBox * copy min.css from master branch * fixed the issue of overflow scroll (#740) for more see this issue https://github.com/daneden/animate.css/issues/739 * Adds heartBeat animation demo (#893) * Update animate.min.css to latest version * Updated CSS for current browsers * Updated animate.css * Removed useless test folder * Added warn about prefers-reduced-motion * Adds docs compiler * Adds new base template * Improves the docs compiler * Fixes flipOutY animation * Updates docs template and build * Reorder docs sections * Updates docs animation list template * Updates prettier ignore * Adds syntax highlight to docs * Small fixes to docs content * Updates templates HTML * Styles the demo website * Adds functionality to demo website * Fixes small website demo issue with medium screens * Adds copy animation to demo site * Renames loop classes to repeat * Small adjusts to docs styles * Updates docs template * Updates docs improving copy and adding sections * Reviews the docs copy * Fix some issues with demo-site * Fixes issue with the demo-site playground * Adjusts tooltip on demo-site * Fix layout issues on mobile and update “close” button for animations list Co-authored-by: Daniel Eden Co-authored-by: Matt Willis Co-authored-by: Gabrielmtn Co-authored-by: Indy Prieto Co-authored-by: Robert Pemberton Co-authored-by: Khaled nuur Co-authored-by: Vladimir Jovanović * Updates docs folders * Fix some small documentation issues * Updates edit on github link Co-authored-by: Arda Gedik Co-authored-by: Arda Gedik Co-authored-by: Jabran Rafique Co-authored-by: Waren Gonzaga Co-authored-by: Jabran Rafique⚡️ Co-authored-by: Vaibhav Tandon Co-authored-by: Waren Gonzaga Co-authored-by: Melek REBAI Co-authored-by: Christian Oliff Co-authored-by: Daniel Eden Co-authored-by: Lucas Ferreira Lima Co-authored-by: Matt Willis Co-authored-by: Gabrielmtn Co-authored-by: Indy Prieto Co-authored-by: Robert Pemberton Co-authored-by: Khaled nuur Co-authored-by: Vladimir Jovanović --- .github/ISSUE_TEMPLATE/bug_report.md | 33 +- .github/ISSUE_TEMPLATE/feature_request.md | 13 +- .prettierignore | 3 + .prettierrc | 6 + .travis.yml | 4 +- CODE_OF_CONDUCT.md | 67 +- CONTRIBUTING.md | 2 + README.md | 207 +- animate-config.json | 121 -- animate.compat.css | 9 + animate.css | 1729 +++++++++++------ animate.min.css | 10 +- bower.json | 5 - docs/animate.min.css | 9 + docs/index.html | 1303 +++++++++++++ docs/main.mjs | 14 + docs/modules/buildDocsIndex.mjs | 37 + docs/modules/playground.mjs | 46 + docs/modules/slowDownAnimations.mjs | 18 + docs/modules/startAnimations.mjs | 23 + docs/modules/toggle.mjs | 14 + docs/style.css | 604 ++++++ docsSource/compileAnimationList.js | 66 + docsSource/compileMD.js | 43 + docsSource/index.js | 25 + docsSource/sections/00-intro.md | 3 + docsSource/sections/01-usage.md | 87 + docsSource/sections/02-utilities.md | 90 + docsSource/sections/03-best-practices.md | 60 + docsSource/sections/04-javascript.md | 62 + docsSource/sections/06-migration.md | 47 + docsSource/sections/07-custom-builds.md | 53 + docsSource/sections/08-contributing.md | 15 + docsSource/sections/09-contributors.md | 6 + docsSource/template.html | 133 ++ gulpfile.js | 107 - package.json | 67 +- postcss.config.js | 47 + source/_base.css | 46 +- source/_vars.css | 5 + source/animate.css | 131 ++ source/attention_seekers/bounce.css | 12 +- source/attention_seekers/heartBeat.css | 2 +- source/attention_seekers/pulse.css | 1 + source/attention_seekers/shakeX.css | 25 + source/attention_seekers/shakeY.css | 25 + source/back_entrances/backInDown.css | 20 + source/back_entrances/backInLeft.css | 20 + source/back_entrances/backInRight.css | 20 + source/back_entrances/backInUp.css | 20 + source/back_exits/backOutDown.css | 20 + source/back_exits/backOutLeft.css | 20 + source/back_exits/backOutRight.css | 20 + source/back_exits/backOutUp.css | 20 + source/bouncing_entrances/bounceIn.css | 2 +- source/bouncing_entrances/bounceInDown.css | 8 +- source/bouncing_entrances/bounceInLeft.css | 8 +- source/bouncing_entrances/bounceInRight.css | 8 +- source/bouncing_entrances/bounceInUp.css | 8 +- source/bouncing_exits/bounceOut.css | 2 +- source/bouncing_exits/bounceOutDown.css | 6 +- source/bouncing_exits/bounceOutLeft.css | 4 +- source/bouncing_exits/bounceOutRight.css | 4 +- source/bouncing_exits/bounceOutUp.css | 6 +- source/fading_entrances/fadeInBottomLeft.css | 14 + source/fading_entrances/fadeInBottomRight.css | 14 + source/fading_entrances/fadeInTopLeft.css | 14 + source/fading_entrances/fadeInTopRight.css | 14 + source/fading_exits/fadeOutBottomLeft.css | 14 + source/fading_exits/fadeOutBottomRight.css | 14 + source/fading_exits/fadeOutTopLeft.css | 14 + source/fading_exits/fadeOutTopRight.css | 14 + source/flippers/flipOutX.css | 2 +- source/flippers/flipOutY.css | 2 +- source/lightspeed/lightSpeedInLeft.css | 24 + ...lightSpeedIn.css => lightSpeedInRight.css} | 6 +- source/lightspeed/lightSpeedOutLeft.css | 15 + ...ghtSpeedOut.css => lightSpeedOutRight.css} | 6 +- source/rotating_entrances/rotateIn.css | 3 +- .../rotating_entrances/rotateInDownLeft.css | 3 +- .../rotating_entrances/rotateInDownRight.css | 3 +- source/rotating_entrances/rotateInUpLeft.css | 3 +- source/rotating_entrances/rotateInUpRight.css | 3 +- source/rotating_exits/rotateOut.css | 3 +- source/rotating_exits/rotateOutDownLeft.css | 3 +- source/rotating_exits/rotateOutDownRight.css | 3 +- source/rotating_exits/rotateOutUpLeft.css | 3 +- source/rotating_exits/rotateOutUpRight.css | 3 +- source/specials/hinge.css | 6 +- source/zooming_exits/zoomOutDown.css | 2 +- source/zooming_exits/zoomOutLeft.css | 2 +- source/zooming_exits/zoomOutRight.css | 2 +- source/zooming_exits/zoomOutUp.css | 2 +- 93 files changed, 4605 insertions(+), 1257 deletions(-) create mode 100644 .prettierrc delete mode 100644 animate-config.json create mode 100644 animate.compat.css mode change 100644 => 100755 animate.min.css delete mode 100644 bower.json create mode 100644 docs/animate.min.css create mode 100644 docs/index.html create mode 100644 docs/main.mjs create mode 100644 docs/modules/buildDocsIndex.mjs create mode 100644 docs/modules/playground.mjs create mode 100644 docs/modules/slowDownAnimations.mjs create mode 100644 docs/modules/startAnimations.mjs create mode 100644 docs/modules/toggle.mjs create mode 100644 docs/style.css create mode 100644 docsSource/compileAnimationList.js create mode 100644 docsSource/compileMD.js create mode 100644 docsSource/index.js create mode 100644 docsSource/sections/00-intro.md create mode 100644 docsSource/sections/01-usage.md create mode 100644 docsSource/sections/02-utilities.md create mode 100644 docsSource/sections/03-best-practices.md create mode 100644 docsSource/sections/04-javascript.md create mode 100644 docsSource/sections/06-migration.md create mode 100644 docsSource/sections/07-custom-builds.md create mode 100644 docsSource/sections/08-contributing.md create mode 100644 docsSource/sections/09-contributors.md create mode 100644 docsSource/template.html delete mode 100644 gulpfile.js create mode 100644 postcss.config.js create mode 100644 source/_vars.css create mode 100644 source/animate.css create mode 100644 source/attention_seekers/shakeX.css create mode 100644 source/attention_seekers/shakeY.css create mode 100644 source/back_entrances/backInDown.css create mode 100644 source/back_entrances/backInLeft.css create mode 100644 source/back_entrances/backInRight.css create mode 100644 source/back_entrances/backInUp.css create mode 100644 source/back_exits/backOutDown.css create mode 100644 source/back_exits/backOutLeft.css create mode 100644 source/back_exits/backOutRight.css create mode 100644 source/back_exits/backOutUp.css create mode 100644 source/fading_entrances/fadeInBottomLeft.css create mode 100644 source/fading_entrances/fadeInBottomRight.css create mode 100644 source/fading_entrances/fadeInTopLeft.css create mode 100644 source/fading_entrances/fadeInTopRight.css create mode 100644 source/fading_exits/fadeOutBottomLeft.css create mode 100644 source/fading_exits/fadeOutBottomRight.css create mode 100644 source/fading_exits/fadeOutTopLeft.css create mode 100644 source/fading_exits/fadeOutTopRight.css create mode 100644 source/lightspeed/lightSpeedInLeft.css rename source/lightspeed/{lightSpeedIn.css => lightSpeedInRight.css} (75%) create mode 100644 source/lightspeed/lightSpeedOutLeft.css rename source/lightspeed/{lightSpeedOut.css => lightSpeedOutRight.css} (62%) diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index dd84ea7..9fa08a6 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -4,35 +4,32 @@ about: Create a report to help us improve title: '' labels: '' assignees: '' - --- -**Describe the bug** -A clear and concise description of what the bug is. +**Describe the bug** A clear and concise description of what the bug is. + +**To Reproduce** Steps to reproduce the behavior: -**To Reproduce** -Steps to reproduce the behavior: 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See error -**Expected behavior** -A clear and concise description of what you expected to happen. +**Expected behavior** A clear and concise description of what you expected to happen. -**Screenshots** -If applicable, add screenshots to help explain your problem. +**Screenshots** If applicable, add screenshots to help explain your problem. **Desktop (please complete the following information):** - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] - - Version [e.g. 22] + +- OS: [e.g. iOS] +- Browser [e.g. chrome, safari] +- Version [e.g. 22] **Smartphone (please complete the following information):** - - Device: [e.g. iPhone6] - - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] - - Version [e.g. 22] -**Additional context** -Add any other context about the problem here. +- Device: [e.g. iPhone6] +- OS: [e.g. iOS8.1] +- Browser [e.g. stock browser, safari] +- Version [e.g. 22] + +**Additional context** Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index bbcbbe7..e1cf2ee 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -4,17 +4,12 @@ about: Suggest an idea for this project title: '' labels: '' assignees: '' - --- -**Is your feature request related to a problem? Please describe.** -A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] +**Is your feature request related to a problem? Please describe.** A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -**Describe the solution you'd like** -A clear and concise description of what you want to happen. +**Describe the solution you'd like** A clear and concise description of what you want to happen. -**Describe alternatives you've considered** -A clear and concise description of any alternative solutions or features you've considered. +**Describe alternatives you've considered** A clear and concise description of any alternative solutions or features you've considered. -**Additional context** -Add any other context or screenshots about the feature request here. +**Additional context** Add any other context or screenshots about the feature request here. diff --git a/.prettierignore b/.prettierignore index 39e8726..4edf290 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +1,4 @@ +animate.css animate.min.css +animate.compat.css +docs/dist/animate.min.css diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..dbf4052 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "bracketSpacing": false, + "proseWrap": "never", + "singleQuote": true, + "trailingComma": "all" +} diff --git a/.travis.yml b/.travis.yml index 6c47a38..4072d07 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,5 +2,5 @@ language: node_js node_js: - "10" before_script: - - npm install -g gulp -script: gulp \ No newline at end of file + - npm install +script: npm run start diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index e1731e1..3fd36df 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -2,75 +2,46 @@ ## Our Pledge -In the interest of fostering an open and welcoming environment, we as -contributors and maintainers pledge to making participation in our project and -our community a harassment-free experience for everyone, regardless of age, body -size, disability, ethnicity, sex characteristics, gender identity and expression, -level of experience, education, socio-economic status, nationality, personal -appearance, race, religion, or sexual identity and orientation. +In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. ## Our Standards -Examples of behavior that contributes to creating a positive environment -include: +Examples of behavior that contributes to creating a positive environment include: -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members Examples of unacceptable behavior by participants include: -* The use of sexualized language or imagery and unwelcome sexual attention or - advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic - address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a - professional setting +- The use of sexualized language or imagery and unwelcome sexual attention or advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities -Project maintainers are responsible for clarifying the standards of acceptable -behavior and are expected to take appropriate and fair corrective action in -response to any instances of unacceptable behavior. +Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. -Project maintainers have the right and responsibility to remove, edit, or -reject comments, commits, code, wiki edits, issues, and other contributions -that are not aligned to this Code of Conduct, or to ban temporarily or -permanently any contributor for other behaviors that they deem inappropriate, -threatening, offensive, or harmful. +Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. ## Scope -This Code of Conduct applies both within project spaces and in public spaces -when an individual is representing the project or its community. Examples of -representing a project or community include using an official project e-mail -address, posting via an official social media account, or acting as an appointed -representative at an online or offline event. Representation of a project may be -further defined and clarified by project maintainers. +This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. ## Enforcement -Instances of abusive, harassing, or otherwise unacceptable behavior may be -reported by contacting the project team at callmeelton@gmail.com. All -complaints will be reviewed and investigated and will result in a response that -is deemed necessary and appropriate to the circumstances. The project team is -obligated to maintain confidentiality with regard to the reporter of an incident. -Further details of specific enforcement policies may be posted separately. +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at callmeelton@gmail.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. -Project maintainers who do not follow or enforce the Code of Conduct in good -faith may face temporary or permanent repercussions as determined by other -members of the project's leadership. +Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. ## Attribution -This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, -available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html [homepage]: https://www.contributor-covenant.org -For answers to common questions about this code of conduct, see -https://www.contributor-covenant.org/faq +For answers to common questions about this code of conduct, see https://www.contributor-covenant.org/faq diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 00f63ab..99802eb 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,7 +1,9 @@ # Contributing to Animate.css + Thanks for your interest in contributing to Animate.css! Before contributing, please make sure you understand the guidelines provided here. Animate.css is widely used, so it’s important to maintain a high level of quality and to contribute with the interests of the community in mind. ## Design Guidelines + Animations, like many facets of visual and interaction design, can be highly subjective. Maintaining a consistent library of animations in an active community can be difficult; these design guidelines are designed to help encourage thoughtful criticism of new animations that are proposed for Animate.css. The animations in Animate.css should follow a few key principles: diff --git a/README.md b/README.md index 11c3c1a..5536ac5 100644 --- a/README.md +++ b/README.md @@ -1,210 +1,41 @@ -# Animate.css [![GitHub release](https://img.shields.io/github/release/daneden/animate.css.svg)](https://github.com/daneden/animate.css/releases) [![CDNJS](https://img.shields.io/cdnjs/v/animate.css.svg)](https://cdnjs.com/libraries/animate.css) [![Build Status](https://travis-ci.com/daneden/animate.css.svg?branch=master)](https://travis-ci.com/daneden/animate.css) [![devDependencies Status](https://david-dm.org/daneden/animate.css/dev-status.svg)](https://david-dm.org/daneden/animate.css?type=dev) [![npm version](https://badge.fury.io/js/animate.css.svg)](https://www.npmjs.com/package/animate.css) +# Animate.css -> **We need your help!** animate.css v4 is in the work with lots of improvements and some breaking changes, including CSS custom properties support (aka CSS variables) and classes prefix for a safer use. We need **your feedback**! You can follow the development on the [`dev`](https://github.com/daneden/animate.css/tree/dev) branch and give your feedback on the [issue tracker](https://github.com/daneden/animate.css/issues). -**Every feedback is welcome!** - -_Just-add-water CSS animation_ - -`animate.css` is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. +[![GitHub Version](https://img.shields.io/github/release/daneden/animate.css.svg?style=for-the-badge)](https://github.com/daneden/animate.css) [![Github Star](https://img.shields.io/github/stars/daneden/animate.css.svg?style=for-the-badge)](https://github.com/daneden/animate.css) [![Github Fork](https://img.shields.io/github/forks/daneden/animate.css.svg?style=for-the-badge)](https://github.com/daneden/animate.css) [![License](https://img.shields.io/github/license/daneden/animate.css.svg?style=for-the-badge)](https://github.com/daneden/animate.css) +## _Just-add-water CSS animation_ ## Installation -Install via npm: +Install with npm: -```bash -$ npm install animate.css --save +```shell +npm install animate.css --save ``` -or yarn: +Install with yarn: -```bash -$ yarn add animate.css +```shell +yarn add animate.css ``` +## Getting started -## Usage - -To use animate.css in your website, simply drop the stylesheet into your document's ``, and add the class `animated` to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super! - -```html - - - -``` - -or use a CDN hosted version by [CDNJS](https://cdnjs.com/libraries/animate.css) - -```html - - - -``` - - -### Animations - -To animate an element, add the class `animated` to an element. You can include the class `infinite` for an infinite loop. Finally you need to add one of the following classes to the element: - -| Class Name | | | | -| ----------------- | ------------------ | ------------------- | -------------------- | -| `bounce` | `flash` | `pulse` | `rubberBand` | -| `shake` | `headShake` | `swing` | `tada` | -| `wobble` | `jello` | `bounceIn` | `bounceInDown` | -| `bounceInLeft` | `bounceInRight` | `bounceInUp` | `bounceOut` | -| `bounceOutDown` | `bounceOutLeft` | `bounceOutRight` | `bounceOutUp` | -| `fadeIn` | `fadeInDown` | `fadeInDownBig` | `fadeInLeft` | -| `fadeInLeftBig` | `fadeInRight` | `fadeInRightBig` | `fadeInUp` | -| `fadeInUpBig` | `fadeOut` | `fadeOutDown` | `fadeOutDownBig` | -| `fadeOutLeft` | `fadeOutLeftBig` | `fadeOutRight` | `fadeOutRightBig` | -| `fadeOutUp` | `fadeOutUpBig` | `flipInX` | `flipInY` | -| `flipOutX` | `flipOutY` | `lightSpeedIn` | `lightSpeedOut` | -| `rotateIn` | `rotateInDownLeft` | `rotateInDownRight` | `rotateInUpLeft` | -| `rotateInUpRight` | `rotateOut` | `rotateOutDownLeft` | `rotateOutDownRight` | -| `rotateOutUpLeft` | `rotateOutUpRight` | `hinge` | `jackInTheBox` | -| `rollIn` | `rollOut` | `zoomIn` | `zoomInDown` | -| `zoomInLeft` | `zoomInRight` | `zoomInUp` | `zoomOut` | -| `zoomOutDown` | `zoomOutLeft` | `zoomOutRight` | `zoomOutUp` | -| `slideInDown` | `slideInLeft` | `slideInRight` | `slideInUp` | -| `slideOutDown` | `slideOutLeft` | `slideOutRight` | `slideOutUp` | -| `heartBeat` | - -Full example: - -```html -

Example

-``` - -[Check out all the animations here!](https://daneden.github.io/animate.css/) - -It's possible to change the duration of your animations, add a delay or change the number of times that it plays: - -```css -.yourElement { - animation-duration: 3s; - animation-delay: 2s; - animation-iteration-count: infinite; -} -``` - -## Usage with Javascript - -You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. A simple example: - -```javascript -const element = document.querySelector('.my-element') -element.classList.add('animated', 'bounceOutLeft') -``` - -You can also detect when an animation ends: - -```javascript -const element = document.querySelector('.my-element') -element.classList.add('animated', 'bounceOutLeft') - -element.addEventListener('animationend', function() { doSomething() }) -``` - -You can use this simple function to add and remove the animations: - -```javascript -function animateCSS(element, animationName, callback) { - const node = document.querySelector(element) - node.classList.add('animated', animationName) - - function handleAnimationEnd() { - node.classList.remove('animated', animationName) - node.removeEventListener('animationend', handleAnimationEnd) - - if (typeof callback === 'function') callback() - } - - node.addEventListener('animationend', handleAnimationEnd) -} -``` - -And use it like this: - -```javascript -animateCSS('.my-element', 'bounce') - -// or -animateCSS('.my-element', 'bounce', function() { - // Do something after animation -}) -``` - -Notice that the examples are using ES6's `const` declaration, dropping support for IE10 and some aging browsers. If you prefer, switch the `const` to `var` declarations and IE10 and some old browsers will get support (they still have to provide [classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) support, so do your [research](https://caniuse.com/#feat=classlist)). - -## Setting _Delay_ and _Speed_ - -### Delay Class - -It's possible to add delays directly on the element's class attribute, just like this: - -```html -
Example
-``` - -| Class Name | Delay Time | -| ---------- | ---------- | -| `delay-1s` | `1s` | -| `delay-2s` | `2s` | -| `delay-3s` | `3s` | -| `delay-4s` | `4s` | -| `delay-5s` | `5s` | - -> _**Note**: The default delays are from 1 second to 5 seconds only. If you need custom delays, add it directly to your own CSS code._ - -### Slow, Slower, Fast, and Faster Class - -It's possible to control the speed of the animation by adding these classes, as a sample below: - -```html -
Example
-``` - -| Class Name | Speed Time | -| ---------- | ---------- | -| `slow` | `2s` | -| `slower` | `3s` | -| `fast` | `800ms` | -| `faster` | `500ms` | - -> _**Note**: The `animated` class has a default speed of `1s`. If you need custom duration, add it directly to your own CSS code._ - -## Custom Builds - -Animate.css is powered by [gulp.js](https://gulpjs.com/), which means you can create custom builds pretty easily. First of all, you’ll need Gulp and all other dependencies: - -```sh -$ cd path/to/animate.css/ -$ npm install -``` - -Next, run `npx gulp` to compile your custom builds. For example, if you want only some of the “attention seekers”, simply edit the `animate-config.json` file to select only the animations you want to use. - -```javascript -"attention_seekers": { - "bounce": true, - "flash": false, - "pulse": false, - "shake": true, - "headShake": true, - "swing": true, - "tada": true, - "wobble": true, - "jello":true -} -``` +You can find the Animate.css documentation on the [website](http://daneden.github.io/animate.css). ## Accessibility Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the majors browsers and OS), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required. +## Core team + +| ![](https://avatars2.githubusercontent.com/u/439365?s=460&u=512b4cc5324938ae40bbb8f3b7769d335953cd3a&v=4) | ![](https://avatars2.githubusercontent.com/u/5007208?s=460&u=418401ee605824272e5dcb955fd64ea24546a857&v=4) | ![](https://avatars1.githubusercontent.com/u/15052701?s=460&u=9e58364978379536d3f26c4ce5cae1a2a449a0e4&v=4) | +| --- | --- | --- | +| [Daniel Eden](https://github.com/daneden) | [Elton Mesquita](https://github.com/eltonmesquita) | [Waren Gonzaga](https://github.com/WarenGonzaga) | +| Animate.css creator | Maintainer | Core contributor | + ## License -Animate.css is licensed under the MIT license. (https://opensource.org/licenses/MIT) +Animate.css is licensed under the MIT license. ## Code of Conduct diff --git a/animate-config.json b/animate-config.json deleted file mode 100644 index c67c073..0000000 --- a/animate-config.json +++ /dev/null @@ -1,121 +0,0 @@ -{ - "attention_seekers": { - "bounce": true, - "flash": true, - "pulse": true, - "rubberBand": true, - "shake": true, - "headShake": true, - "swing": true, - "tada": true, - "wobble": true, - "jello": true, - "heartBeat": true - }, - - "bouncing_entrances": { - "bounceIn": true, - "bounceInDown": true, - "bounceInLeft": true, - "bounceInRight": true, - "bounceInUp": true - }, - - "bouncing_exits": { - "bounceOut": true, - "bounceOutDown": true, - "bounceOutLeft": true, - "bounceOutRight": true, - "bounceOutUp": true - }, - - "fading_entrances": { - "fadeIn": true, - "fadeInDown": true, - "fadeInDownBig": true, - "fadeInLeft": true, - "fadeInLeftBig": true, - "fadeInRight": true, - "fadeInRightBig": true, - "fadeInUp": true, - "fadeInUpBig": true - }, - - "fading_exits": { - "fadeOut": true, - "fadeOutDown": true, - "fadeOutDownBig": true, - "fadeOutLeft": true, - "fadeOutLeftBig": true, - "fadeOutRight": true, - "fadeOutRightBig": true, - "fadeOutUp": true, - "fadeOutUpBig": true - }, - - "flippers": { - "flip": true, - "flipInX": true, - "flipInY": true, - "flipOutX": true, - "flipOutY": true - }, - - "lightspeed": { - "lightSpeedIn": true, - "lightSpeedOut": true - }, - - "rotating_entrances": { - "rotateIn": true, - "rotateInDownLeft": true, - "rotateInDownRight": true, - "rotateInUpLeft": true, - "rotateInUpRight": true - }, - - "rotating_exits": { - "rotateOut": true, - "rotateOutDownLeft": true, - "rotateOutDownRight": true, - "rotateOutUpLeft": true, - "rotateOutUpRight": true - }, - - "specials": { - "hinge": true, - "jackInTheBox": true, - "rollIn": true, - "rollOut": true - }, - - "zooming_entrances": { - "zoomIn": true, - "zoomInDown": true, - "zoomInLeft": true, - "zoomInRight": true, - "zoomInUp": true - }, - - "zooming_exits": { - "zoomOut": true, - "zoomOutDown": true, - "zoomOutLeft": true, - "zoomOutRight": true, - "zoomOutUp": true - }, - - "sliding_entrances": { - "slideInDown": true, - "slideInLeft": true, - "slideInRight": true, - "slideInUp": true - }, - - "sliding_exits": { - "slideOutDown": true, - "slideOutLeft": true, - "slideOutRight": true, - "slideOutUp": true - } -} diff --git a/animate.compat.css b/animate.compat.css new file mode 100644 index 0000000..3447a24 --- /dev/null +++ b/animate.compat.css @@ -0,0 +1,9 @@ + +@charset "UTF-8"; +/*! + * animate.css - https://daneden.github.io/animate.css/ + * Version - 3.7.2 + * Licensed under the MIT license - http://opensource.org/licenses/MIT + * + * Copyright (c) 2020 Daniel Eden + */:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-duration:var(--animate-duration);animation-duration:var(--animate-duration);-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.repeat-1{-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-iteration-count:var(--animate-repeat);animation-iteration-count:var(--animate-repeat)}.animated.repeat-2{-webkit-animation-iteration-count:2;animation-iteration-count:2;-webkit-animation-iteration-count:calc(var(--animate-repeat)*2);animation-iteration-count:calc(var(--animate-repeat)*2)}.animated.repeat-3{-webkit-animation-iteration-count:3;animation-iteration-count:3;-webkit-animation-iteration-count:calc(var(--animate-repeat)*3);animation-iteration-count:calc(var(--animate-repeat)*3)}.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-delay:var(--animate-delay);animation-delay:var(--animate-delay)}.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-delay:calc(var(--animate-delay)*2);animation-delay:calc(var(--animate-delay)*2)}.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s;-webkit-animation-delay:calc(var(--animate-delay)*3);animation-delay:calc(var(--animate-delay)*3)}.animated.delay-4s{-webkit-animation-delay:4s;animation-delay:4s;-webkit-animation-delay:calc(var(--animate-delay)*4);animation-delay:calc(var(--animate-delay)*4)}.animated.delay-5s{-webkit-animation-delay:5s;animation-delay:5s;-webkit-animation-delay:calc(var(--animate-delay)*5);animation-delay:calc(var(--animate-delay)*5)}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-duration:calc(var(--animate-duration)/2);animation-duration:calc(var(--animate-duration)/2)}.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-duration:calc(var(--animate-duration)*0.8);animation-duration:calc(var(--animate-duration)*0.8)}.animated.slow{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2)}.animated.slower{-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-duration:calc(var(--animate-duration)*3);animation-duration:calc(var(--animate-duration)*3)}@media (prefers-reduced-motion:reduce),print{.animated{-webkit-animation-duration:1ms!important;animation-duration:1ms!important;-webkit-transition-duration:1ms!important;transition-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important}.animated[class*=Out]{opacity:0}}@-webkit-keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}@keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shakeX{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shakeX{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shakeX{-webkit-animation-name:shakeX;animation-name:shakeX}@-webkit-keyframes shakeY{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}@keyframes shakeY{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}.shakeY{-webkit-animation-name:shakeY;animation-name:shakeY}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}.heartBeat{-webkit-animation-name:heartBeat;animation-name:heartBeat;-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-duration:calc(var(--animate-duration)*1.3);animation-duration:calc(var(--animate-duration)*1.3);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.backInDown{-webkit-animation-name:backInDown;animation-name:backInDown}@-webkit-keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.backInLeft{-webkit-animation-name:backInLeft;animation-name:backInLeft}@-webkit-keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.backInRight{-webkit-animation-name:backInRight;animation-name:backInRight}@-webkit-keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.backInUp{-webkit-animation-name:backInUp;animation-name:backInUp}@-webkit-keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}@keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}.backOutDown{-webkit-animation-name:backOutDown;animation-name:backOutDown}@-webkit-keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}@keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}.backOutLeft{-webkit-animation-name:backOutLeft;animation-name:backOutLeft}@-webkit-keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}@keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}.backOutRight{-webkit-animation-name:backOutRight;animation-name:backOutRight}@-webkit-keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}@keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}.backOutUp{-webkit-animation-name:backOutUp;animation-name:backOutUp}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInTopLeft{-webkit-animation-name:fadeInTopLeft;animation-name:fadeInTopLeft}@-webkit-keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInTopRight{-webkit-animation-name:fadeInTopRight;animation-name:fadeInTopRight}@-webkit-keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInBottomLeft{-webkit-animation-name:fadeInBottomLeft;animation-name:fadeInBottomLeft}@-webkit-keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInBottomRight{-webkit-animation-name:fadeInBottomRight;animation-name:fadeInBottomRight}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}@keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}.fadeOutTopLeft{-webkit-animation-name:fadeOutTopLeft;animation-name:fadeOutTopLeft}@-webkit-keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}@keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}.fadeOutTopRight{-webkit-animation-name:fadeOutTopRight;animation-name:fadeOutTopRight}@-webkit-keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}@keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}.fadeOutBottomRight{-webkit-animation-name:fadeOutBottomRight;animation-name:fadeOutBottomRight}@-webkit-keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}@keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}.fadeOutBottomLeft{-webkit-animation-name:fadeOutBottomLeft;animation-name:fadeOutBottomLeft}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.lightSpeedInRight{-webkit-animation-name:lightSpeedInRight;animation-name:lightSpeedInRight;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.lightSpeedInLeft{-webkit-animation-name:lightSpeedInLeft;animation-name:lightSpeedInLeft;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOutRight{-webkit-animation-name:lightSpeedOutRight;animation-name:lightSpeedOutRight;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}@keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}.lightSpeedOutLeft{-webkit-animation-name:lightSpeedOutLeft;animation-name:lightSpeedOutLeft;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2);-webkit-animation-name:hinge;animation-name:hinge;-webkit-transform-origin:top left;transform-origin:top left}@-webkit-keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft;-webkit-transform-origin:left center;transform-origin:left center}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight;-webkit-transform-origin:right center;transform-origin:right center}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp} \ No newline at end of file diff --git a/animate.css b/animate.css index d26682f..987bbb5 100644 --- a/animate.css +++ b/animate.css @@ -1,18 +1,120 @@ -@charset "UTF-8"; +@charset "UTF-8"; /*! - * animate.css -https://daneden.github.io/animate.css/ + * animate.css - https://daneden.github.io/animate.css/ * Version - 3.7.2 * Licensed under the MIT license - http://opensource.org/licenses/MIT * - * Copyright (c) 2019 Daniel Eden + * Copyright (c) 2020 Daniel Eden */ +:root { + --animate-duration: 1s; + --animate-delay: 1s; + --animate-repeat: 1; +} +.animate__animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-duration: var(--animate-duration); + animation-duration: var(--animate-duration); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} +.animate__animated.animate__infinite { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.animate__animated.animate__repeat-1 { + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-iteration-count: var(--animate-repeat); + animation-iteration-count: var(--animate-repeat); +} +.animate__animated.animate__repeat-2 { + -webkit-animation-iteration-count: calc(1 * 2); + animation-iteration-count: calc(1 * 2); + -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2); + animation-iteration-count: calc(var(--animate-repeat) * 2); +} +.animate__animated.animate__repeat-3 { + -webkit-animation-iteration-count: calc(1 * 3); + animation-iteration-count: calc(1 * 3); + -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3); + animation-iteration-count: calc(var(--animate-repeat) * 3); +} +.animate__animated.animate__delay-1s { + -webkit-animation-delay: 1s; + animation-delay: 1s; + -webkit-animation-delay: var(--animate-delay); + animation-delay: var(--animate-delay); +} +.animate__animated.animate__delay-2s { + -webkit-animation-delay: calc(1s * 2); + animation-delay: calc(1s * 2); + -webkit-animation-delay: calc(var(--animate-delay) * 2); + animation-delay: calc(var(--animate-delay) * 2); +} +.animate__animated.animate__delay-3s { + -webkit-animation-delay: calc(1s * 3); + animation-delay: calc(1s * 3); + -webkit-animation-delay: calc(var(--animate-delay) * 3); + animation-delay: calc(var(--animate-delay) * 3); +} +.animate__animated.animate__delay-4s { + -webkit-animation-delay: calc(1s * 4); + animation-delay: calc(1s * 4); + -webkit-animation-delay: calc(var(--animate-delay) * 4); + animation-delay: calc(var(--animate-delay) * 4); +} +.animate__animated.animate__delay-5s { + -webkit-animation-delay: calc(1s * 5); + animation-delay: calc(1s * 5); + -webkit-animation-delay: calc(var(--animate-delay) * 5); + animation-delay: calc(var(--animate-delay) * 5); +} +.animate__animated.animate__faster { + -webkit-animation-duration: calc(1s / 2); + animation-duration: calc(1s / 2); + -webkit-animation-duration: calc(var(--animate-duration) / 2); + animation-duration: calc(var(--animate-duration) / 2); +} +.animate__animated.animate__fast { + -webkit-animation-duration: calc(1s * 0.8); + animation-duration: calc(1s * 0.8); + -webkit-animation-duration: calc(var(--animate-duration) * 0.8); + animation-duration: calc(var(--animate-duration) * 0.8); +} +.animate__animated.animate__slow { + -webkit-animation-duration: calc(1s * 2); + animation-duration: calc(1s * 2); + -webkit-animation-duration: calc(var(--animate-duration) * 2); + animation-duration: calc(var(--animate-duration) * 2); +} +.animate__animated.animate__slower { + -webkit-animation-duration: calc(1s * 3); + animation-duration: calc(1s * 3); + -webkit-animation-duration: calc(var(--animate-duration) * 3); + animation-duration: calc(var(--animate-duration) * 3); +} +@media print, (prefers-reduced-motion: reduce) { + .animate__animated { + -webkit-animation-duration: 1ms !important; + animation-duration: 1ms !important; + -webkit-transition-duration: 1ms !important; + transition-duration: 1ms !important; + -webkit-animation-iteration-count: 1 !important; + animation-iteration-count: 1 !important; + } + .animate__animated[class*='Out'] { + opacity: 0; + } +} +/* Attention seekers */ @-webkit-keyframes bounce { from, 20%, 53%, - 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); @@ -24,28 +126,33 @@ 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -30px, 0); - transform: translate3d(0, -30px, 0); + -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); + transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -15px, 0); - transform: translate3d(0, -15px, 0); + -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); + transform: translate3d(0, -15px, 0) scaleY(1.05); + } + + 80% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); + transform: translate3d(0, 0, 0) scaleY(0.95); } 90% { - -webkit-transform: translate3d(0, -4px, 0); - transform: translate3d(0, -4px, 0); + -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); + transform: translate3d(0, -4px, 0) scaleY(1.02); } } - @keyframes bounce { from, 20%, 53%, - 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); @@ -57,30 +164,35 @@ 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -30px, 0); - transform: translate3d(0, -30px, 0); + -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); + transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -15px, 0); - transform: translate3d(0, -15px, 0); + -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); + transform: translate3d(0, -15px, 0) scaleY(1.05); + } + + 80% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); + transform: translate3d(0, 0, 0) scaleY(0.95); } 90% { - -webkit-transform: translate3d(0, -4px, 0); - transform: translate3d(0, -4px, 0); + -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); + transform: translate3d(0, -4px, 0) scaleY(1.02); } } - -.bounce { +.animate__bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } - @-webkit-keyframes flash { from, 50%, @@ -93,7 +205,6 @@ opacity: 0; } } - @keyframes flash { from, 50%, @@ -106,14 +217,11 @@ opacity: 0; } } - -.flash { +.animate__flash { -webkit-animation-name: flash; animation-name: flash; } - /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); @@ -130,7 +238,6 @@ transform: scale3d(1, 1, 1); } } - @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); @@ -147,12 +254,12 @@ transform: scale3d(1, 1, 1); } } - -.pulse { +.animate__pulse { -webkit-animation-name: pulse; animation-name: pulse; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; } - @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); @@ -189,7 +296,6 @@ transform: scale3d(1, 1, 1); } } - @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); @@ -226,13 +332,11 @@ transform: scale3d(1, 1, 1); } } - -.rubberBand { +.animate__rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } - -@-webkit-keyframes shake { +@-webkit-keyframes shakeX { from, to { -webkit-transform: translate3d(0, 0, 0); @@ -256,8 +360,7 @@ transform: translate3d(10px, 0, 0); } } - -@keyframes shake { +@keyframes shakeX { from, to { -webkit-transform: translate3d(0, 0, 0); @@ -281,12 +384,62 @@ transform: translate3d(10px, 0, 0); } } - -.shake { - -webkit-animation-name: shake; - animation-name: shake; +.animate__shakeX { + -webkit-animation-name: shakeX; + animation-name: shakeX; } +@-webkit-keyframes shakeY { + from, + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } +} +@keyframes shakeY { + from, + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } +} +.animate__shakeY { + -webkit-animation-name: shakeY; + animation-name: shakeY; +} @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); @@ -318,7 +471,6 @@ transform: translateX(0); } } - @keyframes headShake { 0% { -webkit-transform: translateX(0); @@ -350,14 +502,12 @@ transform: translateX(0); } } - -.headShake { +.animate__headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } - @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); @@ -384,7 +534,6 @@ transform: rotate3d(0, 0, 1, 0deg); } } - @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); @@ -411,14 +560,12 @@ transform: rotate3d(0, 0, 1, 0deg); } } - -.swing { +.animate__swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } - @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); @@ -451,7 +598,6 @@ transform: scale3d(1, 1, 1); } } - @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); @@ -484,14 +630,11 @@ transform: scale3d(1, 1, 1); } } - -.tada { +.animate__tada { -webkit-animation-name: tada; animation-name: tada; } - /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - @-webkit-keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); @@ -528,7 +671,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); @@ -565,12 +707,10 @@ transform: translate3d(0, 0, 0); } } - -.wobble { +.animate__wobble { -webkit-animation-name: wobble; animation-name: wobble; } - @-webkit-keyframes jello { from, 11.1%, @@ -614,7 +754,6 @@ transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } - @keyframes jello { from, 11.1%, @@ -658,14 +797,12 @@ transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } - -.jello { +.animate__jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } - @-webkit-keyframes heartBeat { 0% { -webkit-transform: scale(1); @@ -692,7 +829,6 @@ transform: scale(1); } } - @keyframes heartBeat { 0% { -webkit-transform: scale(1); @@ -719,16 +855,355 @@ transform: scale(1); } } - -.heartBeat { +.animate__heartBeat { -webkit-animation-name: heartBeat; animation-name: heartBeat; - -webkit-animation-duration: 1.3s; - animation-duration: 1.3s; + -webkit-animation-duration: calc(1s * 1.3); + animation-duration: calc(1s * 1.3); + -webkit-animation-duration: calc(var(--animate-duration) * 1.3); + animation-duration: calc(var(--animate-duration) * 1.3); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } +/* Back entrances */ +@-webkit-keyframes backInDown { + 0% { + -webkit-transform: translateY(-1200px) scale(0.7); + transform: translateY(-1200px) scale(0.7); + opacity: 0.7; + } + 80% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +@keyframes backInDown { + 0% { + -webkit-transform: translateY(-1200px) scale(0.7); + transform: translateY(-1200px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.animate__backInDown { + -webkit-animation-name: backInDown; + animation-name: backInDown; +} +@-webkit-keyframes backInLeft { + 0% { + -webkit-transform: translateX(-2000px) scale(0.7); + transform: translateX(-2000px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +@keyframes backInLeft { + 0% { + -webkit-transform: translateX(-2000px) scale(0.7); + transform: translateX(-2000px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.animate__backInLeft { + -webkit-animation-name: backInLeft; + animation-name: backInLeft; +} +@-webkit-keyframes backInRight { + 0% { + -webkit-transform: translateX(2000px) scale(0.7); + transform: translateX(2000px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +@keyframes backInRight { + 0% { + -webkit-transform: translateX(2000px) scale(0.7); + transform: translateX(2000px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.animate__backInRight { + -webkit-animation-name: backInRight; + animation-name: backInRight; +} +@-webkit-keyframes backInUp { + 0% { + -webkit-transform: translateY(1200px) scale(0.7); + transform: translateY(1200px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +@keyframes backInUp { + 0% { + -webkit-transform: translateY(1200px) scale(0.7); + transform: translateY(1200px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +.animate__backInUp { + -webkit-animation-name: backInUp; + animation-name: backInUp; +} +/* Back exists */ +@-webkit-keyframes backOutDown { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateY(700px) scale(0.7); + transform: translateY(700px) scale(0.7); + opacity: 0.7; + } +} +@keyframes backOutDown { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateY(700px) scale(0.7); + transform: translateY(700px) scale(0.7); + opacity: 0.7; + } +} +.animate__backOutDown { + -webkit-animation-name: backOutDown; + animation-name: backOutDown; +} +@-webkit-keyframes backOutLeft { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateX(-2000px) scale(0.7); + transform: translateX(-2000px) scale(0.7); + opacity: 0.7; + } +} +@keyframes backOutLeft { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateX(-2000px) scale(0.7); + transform: translateX(-2000px) scale(0.7); + opacity: 0.7; + } +} +.animate__backOutLeft { + -webkit-animation-name: backOutLeft; + animation-name: backOutLeft; +} +@-webkit-keyframes backOutRight { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateX(2000px) scale(0.7); + transform: translateX(2000px) scale(0.7); + opacity: 0.7; + } +} +@keyframes backOutRight { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateX(2000px) scale(0.7); + transform: translateX(2000px) scale(0.7); + opacity: 0.7; + } +} +.animate__backOutRight { + -webkit-animation-name: backOutRight; + animation-name: backOutRight; +} +@-webkit-keyframes backOutUp { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateY(-700px) scale(0.7); + transform: translateY(-700px) scale(0.7); + opacity: 0.7; + } +} +@keyframes backOutUp { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateY(-700px) scale(0.7); + transform: translateY(-700px) scale(0.7); + opacity: 0.7; + } +} +.animate__backOutUp { + -webkit-animation-name: backOutUp; + animation-name: backOutUp; +} +/* Bouncing entrances */ @-webkit-keyframes bounceIn { from, 20%, @@ -773,7 +1248,6 @@ transform: scale3d(1, 1, 1); } } - @keyframes bounceIn { from, 20%, @@ -818,14 +1292,14 @@ transform: scale3d(1, 1, 1); } } - -.bounceIn { - -webkit-animation-duration: 0.75s; - animation-duration: 0.75s; +.animate__bounceIn { + -webkit-animation-duration: calc(1s * 0.75); + animation-duration: calc(1s * 0.75); + -webkit-animation-duration: calc(var(--animate-duration) * 0.75); + animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: bounceIn; animation-name: bounceIn; } - @-webkit-keyframes bounceInDown { from, 60%, @@ -838,24 +1312,24 @@ 0% { opacity: 0; - -webkit-transform: translate3d(0, -3000px, 0); - transform: translate3d(0, -3000px, 0); + -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); + transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; - -webkit-transform: translate3d(0, 25px, 0); - transform: translate3d(0, 25px, 0); + -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); + transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); + -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); + transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { - -webkit-transform: translate3d(0, 5px, 0); - transform: translate3d(0, 5px, 0); + -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); + transform: translate3d(0, 5px, 0) scaleY(0.985); } to { @@ -863,7 +1337,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes bounceInDown { from, 60%, @@ -876,24 +1349,24 @@ 0% { opacity: 0; - -webkit-transform: translate3d(0, -3000px, 0); - transform: translate3d(0, -3000px, 0); + -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); + transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; - -webkit-transform: translate3d(0, 25px, 0); - transform: translate3d(0, 25px, 0); + -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); + transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); + -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); + transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { - -webkit-transform: translate3d(0, 5px, 0); - transform: translate3d(0, 5px, 0); + -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); + transform: translate3d(0, 5px, 0) scaleY(0.985); } to { @@ -901,12 +1374,10 @@ transform: translate3d(0, 0, 0); } } - -.bounceInDown { +.animate__bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } - @-webkit-keyframes bounceInLeft { from, 60%, @@ -919,24 +1390,24 @@ 0% { opacity: 0; - -webkit-transform: translate3d(-3000px, 0, 0); - transform: translate3d(-3000px, 0, 0); + -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); + transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; - -webkit-transform: translate3d(25px, 0, 0); - transform: translate3d(25px, 0, 0); + -webkit-transform: translate3d(25px, 0, 0) scaleX(1); + transform: translate3d(25px, 0, 0) scaleX(1); } 75% { - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); + -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); + transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { - -webkit-transform: translate3d(5px, 0, 0); - transform: translate3d(5px, 0, 0); + -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); + transform: translate3d(5px, 0, 0) scaleX(0.995); } to { @@ -944,7 +1415,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes bounceInLeft { from, 60%, @@ -957,24 +1427,24 @@ 0% { opacity: 0; - -webkit-transform: translate3d(-3000px, 0, 0); - transform: translate3d(-3000px, 0, 0); + -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); + transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; - -webkit-transform: translate3d(25px, 0, 0); - transform: translate3d(25px, 0, 0); + -webkit-transform: translate3d(25px, 0, 0) scaleX(1); + transform: translate3d(25px, 0, 0) scaleX(1); } 75% { - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); + -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); + transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { - -webkit-transform: translate3d(5px, 0, 0); - transform: translate3d(5px, 0, 0); + -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); + transform: translate3d(5px, 0, 0) scaleX(0.995); } to { @@ -982,12 +1452,10 @@ transform: translate3d(0, 0, 0); } } - -.bounceInLeft { +.animate__bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } - @-webkit-keyframes bounceInRight { from, 60%, @@ -1000,24 +1468,24 @@ from { opacity: 0; - -webkit-transform: translate3d(3000px, 0, 0); - transform: translate3d(3000px, 0, 0); + -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); + transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; - -webkit-transform: translate3d(-25px, 0, 0); - transform: translate3d(-25px, 0, 0); + -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); + transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); + -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); + transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { - -webkit-transform: translate3d(-5px, 0, 0); - transform: translate3d(-5px, 0, 0); + -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); + transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { @@ -1025,7 +1493,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes bounceInRight { from, 60%, @@ -1038,24 +1505,24 @@ from { opacity: 0; - -webkit-transform: translate3d(3000px, 0, 0); - transform: translate3d(3000px, 0, 0); + -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); + transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; - -webkit-transform: translate3d(-25px, 0, 0); - transform: translate3d(-25px, 0, 0); + -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); + transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); + -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); + transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { - -webkit-transform: translate3d(-5px, 0, 0); - transform: translate3d(-5px, 0, 0); + -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); + transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { @@ -1063,12 +1530,10 @@ transform: translate3d(0, 0, 0); } } - -.bounceInRight { +.animate__bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } - @-webkit-keyframes bounceInUp { from, 60%, @@ -1081,24 +1546,24 @@ from { opacity: 0; - -webkit-transform: translate3d(0, 3000px, 0); - transform: translate3d(0, 3000px, 0); + -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); + transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); + -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); + transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); + -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); + transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { - -webkit-transform: translate3d(0, -5px, 0); - transform: translate3d(0, -5px, 0); + -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); + transform: translate3d(0, -5px, 0) scaleY(0.985); } to { @@ -1106,7 +1571,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes bounceInUp { from, 60%, @@ -1119,24 +1583,24 @@ from { opacity: 0; - -webkit-transform: translate3d(0, 3000px, 0); - transform: translate3d(0, 3000px, 0); + -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); + transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); + -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); + transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); + -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); + transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { - -webkit-transform: translate3d(0, -5px, 0); - transform: translate3d(0, -5px, 0); + -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); + transform: translate3d(0, -5px, 0) scaleY(0.985); } to { @@ -1144,12 +1608,11 @@ transform: translate3d(0, 0, 0); } } - -.bounceInUp { +.animate__bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } - +/* Bouncing exits */ @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); @@ -1169,7 +1632,6 @@ transform: scale3d(0.3, 0.3, 0.3); } } - @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); @@ -1189,170 +1651,159 @@ transform: scale3d(0.3, 0.3, 0.3); } } - -.bounceOut { - -webkit-animation-duration: 0.75s; - animation-duration: 0.75s; +.animate__bounceOut { + -webkit-animation-duration: calc(1s * 0.75); + animation-duration: calc(1s * 0.75); + -webkit-animation-duration: calc(var(--animate-duration) * 0.75); + animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: bounceOut; animation-name: bounceOut; } - @-webkit-keyframes bounceOutDown { 20% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); + -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); + transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); + -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); + transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); + -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); + transform: translate3d(0, 2000px, 0) scaleY(3); } } - @keyframes bounceOutDown { 20% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); + -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); + transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); + -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); + transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); + -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); + transform: translate3d(0, 2000px, 0) scaleY(3); } } - -.bounceOutDown { +.animate__bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } - @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; - -webkit-transform: translate3d(20px, 0, 0); - transform: translate3d(20px, 0, 0); + -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); + transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); + -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); + transform: translate3d(-2000px, 0, 0) scaleX(2); } } - @keyframes bounceOutLeft { 20% { opacity: 1; - -webkit-transform: translate3d(20px, 0, 0); - transform: translate3d(20px, 0, 0); + -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); + transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); + -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); + transform: translate3d(-2000px, 0, 0) scaleX(2); } } - -.bounceOutLeft { +.animate__bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } - @-webkit-keyframes bounceOutRight { 20% { opacity: 1; - -webkit-transform: translate3d(-20px, 0, 0); - transform: translate3d(-20px, 0, 0); + -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); + transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); + -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); + transform: translate3d(2000px, 0, 0) scaleX(2); } } - @keyframes bounceOutRight { 20% { opacity: 1; - -webkit-transform: translate3d(-20px, 0, 0); - transform: translate3d(-20px, 0, 0); + -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); + transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); + -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); + transform: translate3d(2000px, 0, 0) scaleX(2); } } - -.bounceOutRight { +.animate__bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } - @-webkit-keyframes bounceOutUp { 20% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); + -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); + transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; - -webkit-transform: translate3d(0, 20px, 0); - transform: translate3d(0, 20px, 0); + -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); + transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); + -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); + transform: translate3d(0, -2000px, 0) scaleY(3); } } - @keyframes bounceOutUp { 20% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); + -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); + transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; - -webkit-transform: translate3d(0, 20px, 0); - transform: translate3d(0, 20px, 0); + -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); + transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); + -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); + transform: translate3d(0, -2000px, 0) scaleY(3); } } - -.bounceOutUp { +.animate__bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } - +/* Fading entrances */ @-webkit-keyframes fadeIn { from { opacity: 0; @@ -1362,7 +1813,6 @@ opacity: 1; } } - @keyframes fadeIn { from { opacity: 0; @@ -1372,12 +1822,10 @@ opacity: 1; } } - -.fadeIn { +.animate__fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } - @-webkit-keyframes fadeInDown { from { opacity: 0; @@ -1391,7 +1839,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes fadeInDown { from { opacity: 0; @@ -1405,12 +1852,10 @@ transform: translate3d(0, 0, 0); } } - -.fadeInDown { +.animate__fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } - @-webkit-keyframes fadeInDownBig { from { opacity: 0; @@ -1424,7 +1869,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes fadeInDownBig { from { opacity: 0; @@ -1438,12 +1882,10 @@ transform: translate3d(0, 0, 0); } } - -.fadeInDownBig { +.animate__fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } - @-webkit-keyframes fadeInLeft { from { opacity: 0; @@ -1457,7 +1899,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes fadeInLeft { from { opacity: 0; @@ -1471,12 +1912,10 @@ transform: translate3d(0, 0, 0); } } - -.fadeInLeft { +.animate__fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } - @-webkit-keyframes fadeInLeftBig { from { opacity: 0; @@ -1490,7 +1929,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes fadeInLeftBig { from { opacity: 0; @@ -1504,12 +1942,10 @@ transform: translate3d(0, 0, 0); } } - -.fadeInLeftBig { +.animate__fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } - @-webkit-keyframes fadeInRight { from { opacity: 0; @@ -1523,7 +1959,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes fadeInRight { from { opacity: 0; @@ -1537,12 +1972,10 @@ transform: translate3d(0, 0, 0); } } - -.fadeInRight { +.animate__fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } - @-webkit-keyframes fadeInRightBig { from { opacity: 0; @@ -1556,7 +1989,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes fadeInRightBig { from { opacity: 0; @@ -1570,12 +2002,10 @@ transform: translate3d(0, 0, 0); } } - -.fadeInRightBig { +.animate__fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } - @-webkit-keyframes fadeInUp { from { opacity: 0; @@ -1589,7 +2019,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes fadeInUp { from { opacity: 0; @@ -1603,12 +2032,10 @@ transform: translate3d(0, 0, 0); } } - -.fadeInUp { +.animate__fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } - @-webkit-keyframes fadeInUpBig { from { opacity: 0; @@ -1622,7 +2049,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes fadeInUpBig { from { opacity: 0; @@ -1636,12 +2062,123 @@ transform: translate3d(0, 0, 0); } } - -.fadeInUpBig { +.animate__fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } - +@-webkit-keyframes fadeInTopLeft { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, -100%, 0); + transform: translate3d(-100%, -100%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes fadeInTopLeft { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, -100%, 0); + transform: translate3d(-100%, -100%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +.animate__fadeInTopLeft { + -webkit-animation-name: fadeInTopLeft; + animation-name: fadeInTopLeft; +} +@-webkit-keyframes fadeInTopRight { + from { + opacity: 0; + -webkit-transform: translate3d(100%, -100%, 0); + transform: translate3d(100%, -100%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes fadeInTopRight { + from { + opacity: 0; + -webkit-transform: translate3d(100%, -100%, 0); + transform: translate3d(100%, -100%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +.animate__fadeInTopRight { + -webkit-animation-name: fadeInTopRight; + animation-name: fadeInTopRight; +} +@-webkit-keyframes fadeInBottomLeft { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 100%, 0); + transform: translate3d(-100%, 100%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes fadeInBottomLeft { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 100%, 0); + transform: translate3d(-100%, 100%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +.animate__fadeInBottomLeft { + -webkit-animation-name: fadeInBottomLeft; + animation-name: fadeInBottomLeft; +} +@-webkit-keyframes fadeInBottomRight { + from { + opacity: 0; + -webkit-transform: translate3d(100%, 100%, 0); + transform: translate3d(100%, 100%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes fadeInBottomRight { + from { + opacity: 0; + -webkit-transform: translate3d(100%, 100%, 0); + transform: translate3d(100%, 100%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +.animate__fadeInBottomRight { + -webkit-animation-name: fadeInBottomRight; + animation-name: fadeInBottomRight; +} +/* Fading exits */ @-webkit-keyframes fadeOut { from { opacity: 1; @@ -1651,7 +2188,6 @@ opacity: 0; } } - @keyframes fadeOut { from { opacity: 1; @@ -1661,12 +2197,10 @@ opacity: 0; } } - -.fadeOut { +.animate__fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } - @-webkit-keyframes fadeOutDown { from { opacity: 1; @@ -1678,7 +2212,6 @@ transform: translate3d(0, 100%, 0); } } - @keyframes fadeOutDown { from { opacity: 1; @@ -1690,12 +2223,10 @@ transform: translate3d(0, 100%, 0); } } - -.fadeOutDown { +.animate__fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } - @-webkit-keyframes fadeOutDownBig { from { opacity: 1; @@ -1707,7 +2238,6 @@ transform: translate3d(0, 2000px, 0); } } - @keyframes fadeOutDownBig { from { opacity: 1; @@ -1719,12 +2249,10 @@ transform: translate3d(0, 2000px, 0); } } - -.fadeOutDownBig { +.animate__fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } - @-webkit-keyframes fadeOutLeft { from { opacity: 1; @@ -1736,7 +2264,6 @@ transform: translate3d(-100%, 0, 0); } } - @keyframes fadeOutLeft { from { opacity: 1; @@ -1748,12 +2275,10 @@ transform: translate3d(-100%, 0, 0); } } - -.fadeOutLeft { +.animate__fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } - @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; @@ -1765,7 +2290,6 @@ transform: translate3d(-2000px, 0, 0); } } - @keyframes fadeOutLeftBig { from { opacity: 1; @@ -1777,12 +2301,10 @@ transform: translate3d(-2000px, 0, 0); } } - -.fadeOutLeftBig { +.animate__fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } - @-webkit-keyframes fadeOutRight { from { opacity: 1; @@ -1794,7 +2316,6 @@ transform: translate3d(100%, 0, 0); } } - @keyframes fadeOutRight { from { opacity: 1; @@ -1806,12 +2327,10 @@ transform: translate3d(100%, 0, 0); } } - -.fadeOutRight { +.animate__fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } - @-webkit-keyframes fadeOutRightBig { from { opacity: 1; @@ -1823,7 +2342,6 @@ transform: translate3d(2000px, 0, 0); } } - @keyframes fadeOutRightBig { from { opacity: 1; @@ -1835,12 +2353,10 @@ transform: translate3d(2000px, 0, 0); } } - -.fadeOutRightBig { +.animate__fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } - @-webkit-keyframes fadeOutUp { from { opacity: 1; @@ -1852,7 +2368,6 @@ transform: translate3d(0, -100%, 0); } } - @keyframes fadeOutUp { from { opacity: 1; @@ -1864,12 +2379,10 @@ transform: translate3d(0, -100%, 0); } } - -.fadeOutUp { +.animate__fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } - @-webkit-keyframes fadeOutUpBig { from { opacity: 1; @@ -1881,7 +2394,6 @@ transform: translate3d(0, -2000px, 0); } } - @keyframes fadeOutUpBig { from { opacity: 1; @@ -1893,16 +2405,126 @@ transform: translate3d(0, -2000px, 0); } } - -.fadeOutUpBig { +.animate__fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } - +@-webkit-keyframes fadeOutTopLeft { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(-100%, -100%, 0); + transform: translate3d(-100%, -100%, 0); + } +} +@keyframes fadeOutTopLeft { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(-100%, -100%, 0); + transform: translate3d(-100%, -100%, 0); + } +} +.animate__fadeOutTopLeft { + -webkit-animation-name: fadeOutTopLeft; + animation-name: fadeOutTopLeft; +} +@-webkit-keyframes fadeOutTopRight { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(100%, -100%, 0); + transform: translate3d(100%, -100%, 0); + } +} +@keyframes fadeOutTopRight { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(100%, -100%, 0); + transform: translate3d(100%, -100%, 0); + } +} +.animate__fadeOutTopRight { + -webkit-animation-name: fadeOutTopRight; + animation-name: fadeOutTopRight; +} +@-webkit-keyframes fadeOutBottomRight { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(100%, 100%, 0); + transform: translate3d(100%, 100%, 0); + } +} +@keyframes fadeOutBottomRight { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(100%, 100%, 0); + transform: translate3d(100%, 100%, 0); + } +} +.animate__fadeOutBottomRight { + -webkit-animation-name: fadeOutBottomRight; + animation-name: fadeOutBottomRight; +} +@-webkit-keyframes fadeOutBottomLeft { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(-100%, 100%, 0); + transform: translate3d(-100%, 100%, 0); + } +} +@keyframes fadeOutBottomLeft { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(-100%, 100%, 0); + transform: translate3d(-100%, 100%, 0); + } +} +.animate__fadeOutBottomLeft { + -webkit-animation-name: fadeOutBottomLeft; + animation-name: fadeOutBottomLeft; +} +/* Flippers */ @-webkit-keyframes flip { from { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) - rotate3d(0, 1, 0, -360deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; @@ -1936,18 +2558,15 @@ } to { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) - rotate3d(0, 1, 0, 0deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } - @keyframes flip { from { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) - rotate3d(0, 1, 0, -360deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; @@ -1981,21 +2600,18 @@ } to { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) - rotate3d(0, 1, 0, 0deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } - -.animated.flip { +.animate__animated.animate__flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } - @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); @@ -2028,7 +2644,6 @@ transform: perspective(400px); } } - @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); @@ -2061,14 +2676,12 @@ transform: perspective(400px); } } - -.flipInX { +.animate__flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } - @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); @@ -2101,7 +2714,6 @@ transform: perspective(400px); } } - @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); @@ -2134,14 +2746,12 @@ transform: perspective(400px); } } - -.flipInY { +.animate__flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } - @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); @@ -2160,7 +2770,6 @@ opacity: 0; } } - @keyframes flipOutX { from { -webkit-transform: perspective(400px); @@ -2179,16 +2788,16 @@ opacity: 0; } } - -.flipOutX { - -webkit-animation-duration: 0.75s; - animation-duration: 0.75s; +.animate__flipOutX { + -webkit-animation-duration: calc(1s * 0.75); + animation-duration: calc(1s * 0.75); + -webkit-animation-duration: calc(var(--animate-duration) * 0.75); + animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } - @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); @@ -2207,7 +2816,6 @@ opacity: 0; } } - @keyframes flipOutY { from { -webkit-transform: perspective(400px); @@ -2226,17 +2834,18 @@ opacity: 0; } } - -.flipOutY { - -webkit-animation-duration: 0.75s; - animation-duration: 0.75s; +.animate__flipOutY { + -webkit-animation-duration: calc(1s * 0.75); + animation-duration: calc(1s * 0.75); + -webkit-animation-duration: calc(var(--animate-duration) * 0.75); + animation-duration: calc(var(--animate-duration) * 0.75); -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } - -@-webkit-keyframes lightSpeedIn { +/* Lightspeed */ +@-webkit-keyframes lightSpeedInRight { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); @@ -2259,8 +2868,7 @@ transform: translate3d(0, 0, 0); } } - -@keyframes lightSpeedIn { +@keyframes lightSpeedInRight { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); @@ -2283,15 +2891,65 @@ transform: translate3d(0, 0, 0); } } - -.lightSpeedIn { - -webkit-animation-name: lightSpeedIn; - animation-name: lightSpeedIn; +.animate__lightSpeedInRight { + -webkit-animation-name: lightSpeedInRight; + animation-name: lightSpeedInRight; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } +@-webkit-keyframes lightSpeedInLeft { + from { + -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); + transform: translate3d(-100%, 0, 0) skewX(30deg); + opacity: 0; + } -@-webkit-keyframes lightSpeedOut { + 60% { + -webkit-transform: skewX(-20deg); + transform: skewX(-20deg); + opacity: 1; + } + + 80% { + -webkit-transform: skewX(5deg); + transform: skewX(5deg); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes lightSpeedInLeft { + from { + -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); + transform: translate3d(-100%, 0, 0) skewX(30deg); + opacity: 0; + } + + 60% { + -webkit-transform: skewX(-20deg); + transform: skewX(-20deg); + opacity: 1; + } + + 80% { + -webkit-transform: skewX(5deg); + transform: skewX(5deg); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +.animate__lightSpeedInLeft { + -webkit-animation-name: lightSpeedInLeft; + animation-name: lightSpeedInLeft; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} +@-webkit-keyframes lightSpeedOutRight { from { opacity: 1; } @@ -2302,8 +2960,7 @@ opacity: 0; } } - -@keyframes lightSpeedOut { +@keyframes lightSpeedOutRight { from { opacity: 1; } @@ -2314,408 +2971,345 @@ opacity: 0; } } - -.lightSpeedOut { - -webkit-animation-name: lightSpeedOut; - animation-name: lightSpeedOut; +.animate__lightSpeedOutRight { + -webkit-animation-name: lightSpeedOutRight; + animation-name: lightSpeedOutRight; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } +@-webkit-keyframes lightSpeedOutLeft { + from { + opacity: 1; + } + to { + -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); + transform: translate3d(-100%, 0, 0) skewX(-30deg); + opacity: 0; + } +} +@keyframes lightSpeedOutLeft { + from { + opacity: 1; + } + + to { + -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); + transform: translate3d(-100%, 0, 0) skewX(-30deg); + opacity: 0; + } +} +.animate__lightSpeedOutLeft { + -webkit-animation-name: lightSpeedOutLeft; + animation-name: lightSpeedOutLeft; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} +/* Rotating entrances */ @-webkit-keyframes rotateIn { from { - -webkit-transform-origin: center; - transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { - -webkit-transform-origin: center; - transform-origin: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } - @keyframes rotateIn { from { - -webkit-transform-origin: center; - transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { - -webkit-transform-origin: center; - transform-origin: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } - -.rotateIn { +.animate__rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; + -webkit-transform-origin: center; + transform-origin: center; } - @-webkit-keyframes rotateInDownLeft { from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } - @keyframes rotateInDownLeft { from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } - -.rotateInDownLeft { +.animate__rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; + -webkit-transform-origin: left bottom; + transform-origin: left bottom; } - @-webkit-keyframes rotateInDownRight { from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } - @keyframes rotateInDownRight { from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } - -.rotateInDownRight { +.animate__rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; + -webkit-transform-origin: right bottom; + transform-origin: right bottom; } - @-webkit-keyframes rotateInUpLeft { from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } - @keyframes rotateInUpLeft { from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } - -.rotateInUpLeft { +.animate__rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; + -webkit-transform-origin: left bottom; + transform-origin: left bottom; } - @-webkit-keyframes rotateInUpRight { from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } - @keyframes rotateInUpRight { from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } - -.rotateInUpRight { +.animate__rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; + -webkit-transform-origin: right bottom; + transform-origin: right bottom; } - +/* Rotating exits */ @-webkit-keyframes rotateOut { from { - -webkit-transform-origin: center; - transform-origin: center; opacity: 1; } to { - -webkit-transform-origin: center; - transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } - @keyframes rotateOut { from { - -webkit-transform-origin: center; - transform-origin: center; opacity: 1; } to { - -webkit-transform-origin: center; - transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } - -.rotateOut { +.animate__rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; + -webkit-transform-origin: center; + transform-origin: center; } - @-webkit-keyframes rotateOutDownLeft { from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; opacity: 1; } to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } - @keyframes rotateOutDownLeft { from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; opacity: 1; } to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } - -.rotateOutDownLeft { +.animate__rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; + -webkit-transform-origin: left bottom; + transform-origin: left bottom; } - @-webkit-keyframes rotateOutDownRight { from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; opacity: 1; } to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } - @keyframes rotateOutDownRight { from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; opacity: 1; } to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } - -.rotateOutDownRight { +.animate__rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; + -webkit-transform-origin: right bottom; + transform-origin: right bottom; } - @-webkit-keyframes rotateOutUpLeft { from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; opacity: 1; } to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } - @keyframes rotateOutUpLeft { from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; opacity: 1; } to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } - -.rotateOutUpLeft { +.animate__rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; + -webkit-transform-origin: left bottom; + transform-origin: left bottom; } - @-webkit-keyframes rotateOutUpRight { from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; opacity: 1; } to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } - @keyframes rotateOutUpRight { from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; opacity: 1; } to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } - -.rotateOutUpRight { +.animate__rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; + -webkit-transform-origin: right bottom; + transform-origin: right bottom; } - +/* Specials */ @-webkit-keyframes hinge { 0% { - -webkit-transform-origin: top left; - transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @@ -2724,8 +3318,6 @@ 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); - -webkit-transform-origin: top left; - transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @@ -2734,8 +3326,6 @@ 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); - -webkit-transform-origin: top left; - transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; @@ -2747,11 +3337,8 @@ opacity: 0; } } - @keyframes hinge { 0% { - -webkit-transform-origin: top left; - transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @@ -2760,8 +3347,6 @@ 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); - -webkit-transform-origin: top left; - transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @@ -2770,8 +3355,6 @@ 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); - -webkit-transform-origin: top left; - transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; @@ -2783,14 +3366,16 @@ opacity: 0; } } - -.hinge { - -webkit-animation-duration: 2s; - animation-duration: 2s; +.animate__hinge { + -webkit-animation-duration: calc(1s * 2); + animation-duration: calc(1s * 2); + -webkit-animation-duration: calc(var(--animate-duration) * 2); + animation-duration: calc(var(--animate-duration) * 2); -webkit-animation-name: hinge; animation-name: hinge; + -webkit-transform-origin: top left; + transform-origin: top left; } - @-webkit-keyframes jackInTheBox { from { opacity: 0; @@ -2816,7 +3401,6 @@ transform: scale(1); } } - @keyframes jackInTheBox { from { opacity: 0; @@ -2842,14 +3426,11 @@ transform: scale(1); } } - -.jackInTheBox { +.animate__jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox; } - /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - @-webkit-keyframes rollIn { from { opacity: 0; @@ -2863,7 +3444,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes rollIn { from { opacity: 0; @@ -2877,14 +3457,11 @@ transform: translate3d(0, 0, 0); } } - -.rollIn { +.animate__rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } - /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - @-webkit-keyframes rollOut { from { opacity: 1; @@ -2896,7 +3473,6 @@ transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } - @keyframes rollOut { from { opacity: 1; @@ -2908,12 +3484,11 @@ transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } - -.rollOut { +.animate__rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } - +/* Zooming entrances */ @-webkit-keyframes zoomIn { from { opacity: 0; @@ -2925,7 +3500,6 @@ opacity: 1; } } - @keyframes zoomIn { from { opacity: 0; @@ -2937,12 +3511,10 @@ opacity: 1; } } - -.zoomIn { +.animate__zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } - @-webkit-keyframes zoomInDown { from { opacity: 0; @@ -2960,7 +3532,6 @@ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomInDown { from { opacity: 0; @@ -2978,12 +3549,10 @@ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - -.zoomInDown { +.animate__zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } - @-webkit-keyframes zoomInLeft { from { opacity: 0; @@ -3001,7 +3570,6 @@ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomInLeft { from { opacity: 0; @@ -3019,12 +3587,10 @@ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - -.zoomInLeft { +.animate__zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } - @-webkit-keyframes zoomInRight { from { opacity: 0; @@ -3042,7 +3608,6 @@ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomInRight { from { opacity: 0; @@ -3060,12 +3625,10 @@ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - -.zoomInRight { +.animate__zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } - @-webkit-keyframes zoomInUp { from { opacity: 0; @@ -3083,7 +3646,6 @@ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomInUp { from { opacity: 0; @@ -3101,12 +3663,11 @@ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - -.zoomInUp { +.animate__zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } - +/* Zooming exits */ @-webkit-keyframes zoomOut { from { opacity: 1; @@ -3122,7 +3683,6 @@ opacity: 0; } } - @keyframes zoomOut { from { opacity: 1; @@ -3138,12 +3698,10 @@ opacity: 0; } } - -.zoomOut { +.animate__zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } - @-webkit-keyframes zoomOutDown { 40% { opacity: 1; @@ -3157,13 +3715,10 @@ opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomOutDown { 40% { opacity: 1; @@ -3177,18 +3732,16 @@ opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - -.zoomOutDown { +.animate__zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; + -webkit-transform-origin: center bottom; + transform-origin: center bottom; } - @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; @@ -3200,11 +3753,8 @@ opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); - -webkit-transform-origin: left center; - transform-origin: left center; } } - @keyframes zoomOutLeft { 40% { opacity: 1; @@ -3216,16 +3766,14 @@ opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); - -webkit-transform-origin: left center; - transform-origin: left center; } } - -.zoomOutLeft { +.animate__zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; + -webkit-transform-origin: left center; + transform-origin: left center; } - @-webkit-keyframes zoomOutRight { 40% { opacity: 1; @@ -3237,11 +3785,8 @@ opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); - -webkit-transform-origin: right center; - transform-origin: right center; } } - @keyframes zoomOutRight { 40% { opacity: 1; @@ -3253,16 +3798,14 @@ opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); - -webkit-transform-origin: right center; - transform-origin: right center; } } - -.zoomOutRight { +.animate__zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; + -webkit-transform-origin: right center; + transform-origin: right center; } - @-webkit-keyframes zoomOutUp { 40% { opacity: 1; @@ -3276,13 +3819,10 @@ opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomOutUp { 40% { opacity: 1; @@ -3296,18 +3836,17 @@ opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - -.zoomOutUp { +.animate__zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; + -webkit-transform-origin: center bottom; + transform-origin: center bottom; } - +/* Sliding entrances */ @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); @@ -3320,7 +3859,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); @@ -3333,12 +3871,10 @@ transform: translate3d(0, 0, 0); } } - -.slideInDown { +.animate__slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } - @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); @@ -3351,7 +3887,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); @@ -3364,12 +3899,10 @@ transform: translate3d(0, 0, 0); } } - -.slideInLeft { +.animate__slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } - @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); @@ -3382,7 +3915,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); @@ -3395,12 +3927,10 @@ transform: translate3d(0, 0, 0); } } - -.slideInRight { +.animate__slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } - @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); @@ -3413,7 +3943,6 @@ transform: translate3d(0, 0, 0); } } - @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); @@ -3426,12 +3955,11 @@ transform: translate3d(0, 0, 0); } } - -.slideInUp { +.animate__slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } - +/* Sliding exits */ @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); @@ -3444,7 +3972,6 @@ transform: translate3d(0, 100%, 0); } } - @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); @@ -3457,12 +3984,10 @@ transform: translate3d(0, 100%, 0); } } - -.slideOutDown { +.animate__slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } - @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); @@ -3475,7 +4000,6 @@ transform: translate3d(-100%, 0, 0); } } - @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); @@ -3488,12 +4012,10 @@ transform: translate3d(-100%, 0, 0); } } - -.slideOutLeft { +.animate__slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } - @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); @@ -3506,7 +4028,6 @@ transform: translate3d(100%, 0, 0); } } - @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); @@ -3519,12 +4040,10 @@ transform: translate3d(100%, 0, 0); } } - -.slideOutRight { +.animate__slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } - @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); @@ -3537,7 +4056,6 @@ transform: translate3d(0, -100%, 0); } } - @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); @@ -3550,76 +4068,7 @@ transform: translate3d(0, -100%, 0); } } - -.slideOutUp { +.animate__slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } - -.animated { - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} - -.animated.infinite { - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; -} - -.animated.delay-1s { - -webkit-animation-delay: 1s; - animation-delay: 1s; -} - -.animated.delay-2s { - -webkit-animation-delay: 2s; - animation-delay: 2s; -} - -.animated.delay-3s { - -webkit-animation-delay: 3s; - animation-delay: 3s; -} - -.animated.delay-4s { - -webkit-animation-delay: 4s; - animation-delay: 4s; -} - -.animated.delay-5s { - -webkit-animation-delay: 5s; - animation-delay: 5s; -} - -.animated.fast { - -webkit-animation-duration: 800ms; - animation-duration: 800ms; -} - -.animated.faster { - -webkit-animation-duration: 500ms; - animation-duration: 500ms; -} - -.animated.slow { - -webkit-animation-duration: 2s; - animation-duration: 2s; -} - -.animated.slower { - -webkit-animation-duration: 3s; - animation-duration: 3s; -} - -@media (print), (prefers-reduced-motion: reduce) { - .animated { - -webkit-animation-duration: 1ms !important; - animation-duration: 1ms !important; - -webkit-transition-duration: 1ms !important; - transition-duration: 1ms !important; - -webkit-animation-iteration-count: 1 !important; - animation-iteration-count: 1 !important; - } -} diff --git a/animate.min.css b/animate.min.css old mode 100644 new mode 100755 index f3f1068..55b9344 --- a/animate.min.css +++ b/animate.min.css @@ -1,11 +1,9 @@ -@charset "UTF-8"; +@charset "UTF-8"; /*! - * animate.css -https://daneden.github.io/animate.css/ + * animate.css - https://daneden.github.io/animate.css/ * Version - 3.7.2 * Licensed under the MIT license - http://opensource.org/licenses/MIT * - * Copyright (c) 2019 Daniel Eden - */ - -@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}.heartBeat{-webkit-animation-name:heartBeat;animation-name:heartBeat;-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s}.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s}.animated.delay-4s{-webkit-animation-delay:4s;animation-delay:4s}.animated.delay-5s{-webkit-animation-delay:5s;animation-delay:5s}.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}@media (prefers-reduced-motion:reduce),(print){.animated{-webkit-animation-duration:1ms!important;animation-duration:1ms!important;-webkit-transition-duration:1ms!important;transition-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important}} \ No newline at end of file + * Copyright (c) 2020 Daniel Eden + */:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animate__animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-duration:var(--animate-duration);animation-duration:var(--animate-duration);-webkit-animation-fill-mode:both;animation-fill-mode:both}.animate__animated.animate__infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animate__animated.animate__repeat-1{-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-iteration-count:var(--animate-repeat);animation-iteration-count:var(--animate-repeat)}.animate__animated.animate__repeat-2{-webkit-animation-iteration-count:2;animation-iteration-count:2;-webkit-animation-iteration-count:calc(var(--animate-repeat)*2);animation-iteration-count:calc(var(--animate-repeat)*2)}.animate__animated.animate__repeat-3{-webkit-animation-iteration-count:3;animation-iteration-count:3;-webkit-animation-iteration-count:calc(var(--animate-repeat)*3);animation-iteration-count:calc(var(--animate-repeat)*3)}.animate__animated.animate__delay-1s{-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-delay:var(--animate-delay);animation-delay:var(--animate-delay)}.animate__animated.animate__delay-2s{-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-delay:calc(var(--animate-delay)*2);animation-delay:calc(var(--animate-delay)*2)}.animate__animated.animate__delay-3s{-webkit-animation-delay:3s;animation-delay:3s;-webkit-animation-delay:calc(var(--animate-delay)*3);animation-delay:calc(var(--animate-delay)*3)}.animate__animated.animate__delay-4s{-webkit-animation-delay:4s;animation-delay:4s;-webkit-animation-delay:calc(var(--animate-delay)*4);animation-delay:calc(var(--animate-delay)*4)}.animate__animated.animate__delay-5s{-webkit-animation-delay:5s;animation-delay:5s;-webkit-animation-delay:calc(var(--animate-delay)*5);animation-delay:calc(var(--animate-delay)*5)}.animate__animated.animate__faster{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-duration:calc(var(--animate-duration)/2);animation-duration:calc(var(--animate-duration)/2)}.animate__animated.animate__fast{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-duration:calc(var(--animate-duration)*0.8);animation-duration:calc(var(--animate-duration)*0.8)}.animate__animated.animate__slow{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2)}.animate__animated.animate__slower{-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-duration:calc(var(--animate-duration)*3);animation-duration:calc(var(--animate-duration)*3)}@media (prefers-reduced-motion:reduce),print{.animate__animated{-webkit-animation-duration:1ms!important;animation-duration:1ms!important;-webkit-transition-duration:1ms!important;transition-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important}.animate__animated[class*=Out]{opacity:0}}@-webkit-keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}@keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}.animate__bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.animate__flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shakeX{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shakeX{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.animate__shakeX{-webkit-animation-name:shakeX;animation-name:shakeX}@-webkit-keyframes shakeY{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}@keyframes shakeY{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}.animate__shakeY{-webkit-animation-name:shakeY;animation-name:shakeY}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.animate__headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.animate__swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.animate__jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}.animate__heartBeat{-webkit-animation-name:heartBeat;animation-name:heartBeat;-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-duration:calc(var(--animate-duration)*1.3);animation-duration:calc(var(--animate-duration)*1.3);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInDown{-webkit-animation-name:backInDown;animation-name:backInDown}@-webkit-keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInLeft{-webkit-animation-name:backInLeft;animation-name:backInLeft}@-webkit-keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInRight{-webkit-animation-name:backInRight;animation-name:backInRight}@-webkit-keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInUp{-webkit-animation-name:backInUp;animation-name:backInUp}@-webkit-keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}@keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}.animate__backOutDown{-webkit-animation-name:backOutDown;animation-name:backOutDown}@-webkit-keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}@keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}.animate__backOutLeft{-webkit-animation-name:backOutLeft;animation-name:backOutLeft}@-webkit-keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}@keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}.animate__backOutRight{-webkit-animation-name:backOutRight;animation-name:backOutRight}@-webkit-keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}@keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}.animate__backOutUp{-webkit-animation-name:backOutUp;animation-name:backOutUp}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.animate__bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}.animate__bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}.animate__bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}.animate__bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}.animate__bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate__fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInTopLeft{-webkit-animation-name:fadeInTopLeft;animation-name:fadeInTopLeft}@-webkit-keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInTopRight{-webkit-animation-name:fadeInTopRight;animation-name:fadeInTopRight}@-webkit-keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInBottomLeft{-webkit-animation-name:fadeInBottomLeft;animation-name:fadeInBottomLeft}@-webkit-keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInBottomRight{-webkit-animation-name:fadeInBottomRight;animation-name:fadeInBottomRight}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.animate__fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.animate__fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.animate__fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.animate__fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.animate__fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.animate__fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.animate__fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.animate__fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.animate__fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}@keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}.animate__fadeOutTopLeft{-webkit-animation-name:fadeOutTopLeft;animation-name:fadeOutTopLeft}@-webkit-keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}@keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}.animate__fadeOutTopRight{-webkit-animation-name:fadeOutTopRight;animation-name:fadeOutTopRight}@-webkit-keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}@keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}.animate__fadeOutBottomRight{-webkit-animation-name:fadeOutBottomRight;animation-name:fadeOutBottomRight}@-webkit-keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}@keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}.animate__fadeOutBottomLeft{-webkit-animation-name:fadeOutBottomLeft;animation-name:fadeOutBottomLeft}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animate__animated.animate__flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.animate__flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.animate__flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.animate__flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.animate__flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__lightSpeedInRight{-webkit-animation-name:lightSpeedInRight;animation-name:lightSpeedInRight;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__lightSpeedInLeft{-webkit-animation-name:lightSpeedInLeft;animation-name:lightSpeedInLeft;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.animate__lightSpeedOutRight{-webkit-animation-name:lightSpeedOutRight;animation-name:lightSpeedOutRight;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}@keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}.animate__lightSpeedOutLeft{-webkit-animation-name:lightSpeedOutLeft;animation-name:lightSpeedOutLeft;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.animate__rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.animate__rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.animate__rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.animate__rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.animate__rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.animate__hinge{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2);-webkit-animation-name:hinge;animation-name:hinge;-webkit-transform-origin:top left;transform-origin:top left}@-webkit-keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.animate__jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.animate__rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.animate__zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.animate__zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}.animate__zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft;-webkit-transform-origin:left center;transform-origin:left center}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}.animate__zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight;-webkit-transform-origin:right center;transform-origin:right center}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.animate__slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.animate__slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.animate__slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.animate__slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp} \ No newline at end of file diff --git a/bower.json b/bower.json deleted file mode 100644 index f641274..0000000 --- a/bower.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "animate.css", - "main": "./animate.css", - "ignore": [".*", "*.yml", "Gemfile", "Gemfile.lock", "*.md"] -} diff --git a/docs/animate.min.css b/docs/animate.min.css new file mode 100644 index 0000000..55b9344 --- /dev/null +++ b/docs/animate.min.css @@ -0,0 +1,9 @@ + +@charset "UTF-8"; +/*! + * animate.css - https://daneden.github.io/animate.css/ + * Version - 3.7.2 + * Licensed under the MIT license - http://opensource.org/licenses/MIT + * + * Copyright (c) 2020 Daniel Eden + */:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animate__animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-duration:var(--animate-duration);animation-duration:var(--animate-duration);-webkit-animation-fill-mode:both;animation-fill-mode:both}.animate__animated.animate__infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animate__animated.animate__repeat-1{-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-iteration-count:var(--animate-repeat);animation-iteration-count:var(--animate-repeat)}.animate__animated.animate__repeat-2{-webkit-animation-iteration-count:2;animation-iteration-count:2;-webkit-animation-iteration-count:calc(var(--animate-repeat)*2);animation-iteration-count:calc(var(--animate-repeat)*2)}.animate__animated.animate__repeat-3{-webkit-animation-iteration-count:3;animation-iteration-count:3;-webkit-animation-iteration-count:calc(var(--animate-repeat)*3);animation-iteration-count:calc(var(--animate-repeat)*3)}.animate__animated.animate__delay-1s{-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-delay:var(--animate-delay);animation-delay:var(--animate-delay)}.animate__animated.animate__delay-2s{-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-delay:calc(var(--animate-delay)*2);animation-delay:calc(var(--animate-delay)*2)}.animate__animated.animate__delay-3s{-webkit-animation-delay:3s;animation-delay:3s;-webkit-animation-delay:calc(var(--animate-delay)*3);animation-delay:calc(var(--animate-delay)*3)}.animate__animated.animate__delay-4s{-webkit-animation-delay:4s;animation-delay:4s;-webkit-animation-delay:calc(var(--animate-delay)*4);animation-delay:calc(var(--animate-delay)*4)}.animate__animated.animate__delay-5s{-webkit-animation-delay:5s;animation-delay:5s;-webkit-animation-delay:calc(var(--animate-delay)*5);animation-delay:calc(var(--animate-delay)*5)}.animate__animated.animate__faster{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-duration:calc(var(--animate-duration)/2);animation-duration:calc(var(--animate-duration)/2)}.animate__animated.animate__fast{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-duration:calc(var(--animate-duration)*0.8);animation-duration:calc(var(--animate-duration)*0.8)}.animate__animated.animate__slow{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2)}.animate__animated.animate__slower{-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-duration:calc(var(--animate-duration)*3);animation-duration:calc(var(--animate-duration)*3)}@media (prefers-reduced-motion:reduce),print{.animate__animated{-webkit-animation-duration:1ms!important;animation-duration:1ms!important;-webkit-transition-duration:1ms!important;transition-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important}.animate__animated[class*=Out]{opacity:0}}@-webkit-keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}@keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}.animate__bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.animate__flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shakeX{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shakeX{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.animate__shakeX{-webkit-animation-name:shakeX;animation-name:shakeX}@-webkit-keyframes shakeY{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}@keyframes shakeY{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}.animate__shakeY{-webkit-animation-name:shakeY;animation-name:shakeY}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.animate__headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.animate__swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.animate__jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}.animate__heartBeat{-webkit-animation-name:heartBeat;animation-name:heartBeat;-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-duration:calc(var(--animate-duration)*1.3);animation-duration:calc(var(--animate-duration)*1.3);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInDown{-webkit-animation-name:backInDown;animation-name:backInDown}@-webkit-keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInLeft{-webkit-animation-name:backInLeft;animation-name:backInLeft}@-webkit-keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInRight{-webkit-animation-name:backInRight;animation-name:backInRight}@-webkit-keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInUp{-webkit-animation-name:backInUp;animation-name:backInUp}@-webkit-keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}@keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}.animate__backOutDown{-webkit-animation-name:backOutDown;animation-name:backOutDown}@-webkit-keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}@keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}.animate__backOutLeft{-webkit-animation-name:backOutLeft;animation-name:backOutLeft}@-webkit-keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}@keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}.animate__backOutRight{-webkit-animation-name:backOutRight;animation-name:backOutRight}@-webkit-keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}@keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}.animate__backOutUp{-webkit-animation-name:backOutUp;animation-name:backOutUp}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.animate__bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}.animate__bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}.animate__bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}.animate__bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}.animate__bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate__fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInTopLeft{-webkit-animation-name:fadeInTopLeft;animation-name:fadeInTopLeft}@-webkit-keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInTopRight{-webkit-animation-name:fadeInTopRight;animation-name:fadeInTopRight}@-webkit-keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInBottomLeft{-webkit-animation-name:fadeInBottomLeft;animation-name:fadeInBottomLeft}@-webkit-keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInBottomRight{-webkit-animation-name:fadeInBottomRight;animation-name:fadeInBottomRight}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.animate__fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.animate__fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.animate__fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.animate__fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.animate__fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.animate__fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.animate__fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.animate__fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.animate__fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}@keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}.animate__fadeOutTopLeft{-webkit-animation-name:fadeOutTopLeft;animation-name:fadeOutTopLeft}@-webkit-keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}@keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}.animate__fadeOutTopRight{-webkit-animation-name:fadeOutTopRight;animation-name:fadeOutTopRight}@-webkit-keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}@keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}.animate__fadeOutBottomRight{-webkit-animation-name:fadeOutBottomRight;animation-name:fadeOutBottomRight}@-webkit-keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}@keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}.animate__fadeOutBottomLeft{-webkit-animation-name:fadeOutBottomLeft;animation-name:fadeOutBottomLeft}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animate__animated.animate__flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.animate__flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.animate__flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.animate__flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.animate__flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__lightSpeedInRight{-webkit-animation-name:lightSpeedInRight;animation-name:lightSpeedInRight;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__lightSpeedInLeft{-webkit-animation-name:lightSpeedInLeft;animation-name:lightSpeedInLeft;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.animate__lightSpeedOutRight{-webkit-animation-name:lightSpeedOutRight;animation-name:lightSpeedOutRight;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}@keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}.animate__lightSpeedOutLeft{-webkit-animation-name:lightSpeedOutLeft;animation-name:lightSpeedOutLeft;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.animate__rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.animate__rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.animate__rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.animate__rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.animate__rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.animate__hinge{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2);-webkit-animation-name:hinge;animation-name:hinge;-webkit-transform-origin:top left;transform-origin:top left}@-webkit-keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.animate__jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.animate__rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.animate__zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.animate__zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}.animate__zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft;-webkit-transform-origin:left center;transform-origin:left center}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}.animate__zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight;-webkit-transform-origin:right center;transform-origin:right center}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.animate__slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.animate__slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.animate__slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.animate__slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..ff58d3c --- /dev/null +++ b/docs/index.html @@ -0,0 +1,1303 @@ + + + + Animate.css + + + + + + + + + + + + +
+
+

Animate.css

+

Just-add-water CSS animations

+

+ +

+
+ +
+ + +
+

Attention seekers

+
    +
  • + bounce + +
    • + +
  • + flash + +
    • + +
  • + pulse + +
    • + +
  • + rubberBand + +
    • + +
  • + shakeX + +
    • + +
  • + shakeY + +
    • + +
  • + headShake + +
    • + +
  • + swing + +
    • + +
  • + tada + +
    • + +
  • + wobble + +
    • + +
  • + jello + +
    • + +
  • + heartBeat + +
+
+ + +
+

Back entrances

+
    +
  • + backInDown + +
    • + +
  • + backInLeft + +
    • + +
  • + backInRight + +
    • + +
  • + backInUp + +
+
+ + +
+

Back exists

+
    +
  • + backOutDown + +
    • + +
  • + backOutLeft + +
    • + +
  • + backOutRight + +
    • + +
  • + backOutUp + +
+
+ + +
+

Bouncing entrances

+
    +
  • + bounceIn + +
    • + +
  • + bounceInDown + +
    • + +
  • + bounceInLeft + +
    • + +
  • + bounceInRight + +
    • + +
  • + bounceInUp + +
+
+ + +
+

Bouncing exits

+
    +
  • + bounceOut + +
    • + +
  • + bounceOutDown + +
    • + +
  • + bounceOutLeft + +
    • + +
  • + bounceOutRight + +
    • + +
  • + bounceOutUp + +
+
+ + +
+

Fading entrances

+
    +
  • + fadeIn + +
    • + +
  • + fadeInDown + +
    • + +
  • + fadeInDownBig + +
    • + +
  • + fadeInLeft + +
    • + +
  • + fadeInLeftBig + +
    • + +
  • + fadeInRight + +
    • + +
  • + fadeInRightBig + +
    • + +
  • + fadeInUp + +
    • + +
  • + fadeInUpBig + +
    • + +
  • + fadeInTopLeft + +
    • + +
  • + fadeInTopRight + +
    • + +
  • + fadeInBottomLeft + +
    • + +
  • + fadeInBottomRight + +
+
+ + +
+

Fading exits

+
    +
  • + fadeOut + +
    • + +
  • + fadeOutDown + +
    • + +
  • + fadeOutDownBig + +
    • + +
  • + fadeOutLeft + +
    • + +
  • + fadeOutLeftBig + +
    • + +
  • + fadeOutRight + +
    • + +
  • + fadeOutRightBig + +
    • + +
  • + fadeOutUp + +
    • + +
  • + fadeOutUpBig + +
    • + +
  • + fadeOutTopLeft + +
    • + +
  • + fadeOutTopRight + +
    • + +
  • + fadeOutBottomRight + +
    • + +
  • + fadeOutBottomLeft + +
+
+ + +
+

Flippers

+
    +
  • + flip + +
    • + +
  • + flipInX + +
    • + +
  • + flipInY + +
    • + +
  • + flipOutX + +
    • + +
  • + flipOutY + +
+
+ + +
+

Lightspeed

+
    +
  • + lightSpeedInRight + +
    • + +
  • + lightSpeedInLeft + +
    • + +
  • + lightSpeedOutRight + +
    • + +
  • + lightSpeedOutLeft + +
+
+ + +
+

Rotating entrances

+
    +
  • + rotateIn + +
    • + +
  • + rotateInDownLeft + +
    • + +
  • + rotateInDownRight + +
    • + +
  • + rotateInUpLeft + +
    • + +
  • + rotateInUpRight + +
+
+ + +
+

Rotating exits

+
    +
  • + rotateOut + +
    • + +
  • + rotateOutDownLeft + +
    • + +
  • + rotateOutDownRight + +
    • + +
  • + rotateOutUpLeft + +
    • + +
  • + rotateOutUpRight + +
+
+ + +
+

Specials

+
    +
  • + hinge + +
    • + +
  • + jackInTheBox + +
    • + +
  • + rollIn + +
    • + +
  • + rollOut + +
+
+ + +
+

Zooming entrances

+
    +
  • + zoomIn + +
    • + +
  • + zoomInDown + +
    • + +
  • + zoomInLeft + +
    • + +
  • + zoomInRight + +
    • + +
  • + zoomInUp + +
+
+ + +
+

Zooming exits

+
    +
  • + zoomOut + +
    • + +
  • + zoomOutDown + +
    • + +
  • + zoomOutLeft + +
    • + +
  • + zoomOutRight + +
    • + +
  • + zoomOutUp + +
+
+ + +
+

Sliding entrances

+
    +
  • + slideInDown + +
    • + +
  • + slideInLeft + +
    • + +
  • + slideInRight + +
    • + +
  • + slideInUp + +
+
+ + +
+

Sliding exits

+
    +
  • + slideOutDown + +
    • + +
  • + slideOutLeft + +
    • + +
  • + slideOutRight + +
    • + +
  • + slideOutUp + +
+
+ +
+ + +
+ +
+
+
+

+ Documentation +

+
+
+ +
+ + + + + + + +
+
+ +
+
+

Animate.css v4 brought some breaking changes, please refer to the migration guide before updating from v3.x and under.

+
+

Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

+ +

Edit this on Github

+
+ + +
+

Installation and usage

+

Installing

+

Install with npm:

+
$ npm install animate.css --save
+
+

with yarn:

+
$ yarn add animate.css
+
+

or add it directly to your webpage using a CDN:

+
<head>
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
+  />
+</head>
+
+

Basic usage

+

After installing Animate.css, add the class animate__animated to an element, along with any of the animation names (don't forget the animate__ prefix!):

+
<h1 class="animate__animated animate__bounce">An animated element</h1>
+
+

That's it! You've got a CSS animated element. Super!

+
+

Animations can improve the UX of an interface, but keep in mind that they can also get in the way of your users! Please read the best practices and gotchas sections to bring your web-things to life in the best way possible.

+
+

Using @keyframes

+

Even though the library provides you a few helper classes like the animated class to get you up running quickly, you can use the provided animations keyframes directly. This provides a flexible way to use Animate.css with your current projects without having to refactor your HTML code.

+

Example:

+
.my-element {
+  display: inline-block;
+  margin: 0 0.5rem;
+
+  animation: bounce; /* referring directly to the animation's @keyframe declaration */
+  animation-duration: 2s; /* don't forget to set a duration! */
+}
+
+

Be aware that some animations are dependent on the animation-timing property set on the animation's class. Changing or not declaring it might lead to unexpected results.

+

CSS Custom Properties (CSS Variables)

+

Since version 4, Animate.css makes use of custom properties (also known as CSS variables) to define the animations duration, delay, and iteractions. This makes Animate.css very flexible and customizable. Need to change an animation duration? Just set a new value to globally or locally.

+

Example:

+
/* This only changes this particular animation duration */
+.animate__animated.animate__bounce {
+  --animate-duration: 2s;
+}
+
+/* This changes all the animations globaly */
+:root {
+  --animate-duration: 800ms;
+  --animation-delay: 0.9s;
+}
+
+

Custom properties also make it easy to change all your animations time-constrained properties on the fly. It means that you can have a slow-motion or time-lapse effect with a javascript one-liner:

+
// All animations will take twice the time to accomplish
+document.documentElement.style.setProperty('--animate-duration', '2s');
+
+// All animations will take half the time to accomplish
+document.documentElement.style.setProperty('--animate-duration', '.5s');
+
+

Even though custom properties are not supported by some aging browsers, Animate.css provides a proper fallback, widening its support for any browser that supports CSS animations.

+ +

Edit this on Github

+
+ + +
+

Utility classes

+

Animate.css comes packed with a few utility classes to simplify its use.

+

Delay classes

+

You can add delays directly on the element's class attribute, just like this:

+
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
+
+

Animate.css provides the following delays:

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Class nameDefault delay time
animate__delay-2s2s
animate__delay-3s3s
animate__delay-4s4s
animate__delay-5s5s
+

The provided delays are from 1 to 5 seconds. You can customize them setting the --animate-delay property to a longer or a shorter duration:

+
/* All delay classes will take 2x longer to start */
+:root {
+  --animate-delay: 2s;
+}
+
+/* All delay classes will take half the time to start */
+:root {
+  --animate-delay: 0.5s;
+}
+
+

Slow, slower, fast, and Faster classes

+

You can control the speed of the animation by adding these classes, as below:

+
<div class="animate__animated animate__bounce animate__faster">Example</div>
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Class nameDefault speed time
animate__slow2s
animate__slower3s
animate__fast800ms
animate__faster500ms
+

The animate__animated class has a default speed of 1s. You can also customize the animations duration through the --animate-duration property, globaly or locally. This will affect both the animations and the utility classes. Example:

+
/* All animations will take twice as long to finish */
+:root {
+  --animation-duration: 2s;
+}
+
+/* Only this element will take half the time to finish */
+.my-element {
+  --animation-duration: 0.5s;
+}
+
+

Notice that some animations have a duration of less than 1 second. As we used the CSS calc() function, setting the duration through the --animation-duration property will respect these ratios. So, when you change the global duration all the animations will respond to that change!

+

Repeating classes

+

You can control the iteration count of the animation by adding these classes, like below:

+
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
+
+ + + + + + + + + + + + + + + + + + + + + +
Class NameDefault iteration count
animate__repeat-11
animate__repeat-22
animate__repeat-33
+

As with the repeat and speed classes, the animate__repeat class is based on the --animate-repeat property and has a default iteration count of 1. You can customize them setting the --animate-repeat property to a longer or a shorter value:

+
/* The element will repeat the animation 2x
+   It's better to set this property only locally and not globally or
+   you might end up with a messy situation */
+.my-element {
+  --animation-repeat: 2;
+}
+
+ +

Edit this on Github

+
+ + +
+

Best practices

+

Animations can greatly improve an interface's UX, but it's important to follow some guidelines to not overdo it and deteriorate the user experience on your web-things. Following the following rules should provide a good start.

+

Meaningful animations

+

You should avoid animating an element just for the sake of it. Keep in mind that animations should make an intention clear. Animations like attention seekers (bounce, flash, pulse, etc) should be used to bring the user's attention to something special in your interface and not only as a way to bring "flashiness" to it.

+

Entrances and exit animations should be used to orientate what is happening in the interface, clearly signaling that it's transitioning into a new state.

+

It doesn't mean that you should avoid adding playfulness to the interface, just be sure that the animations are not getting in the way of your user and that the page's performance is not affected by an exaggerated use of animations.

+

Don't animate large elements

+

Avoid it as it won't bring much value to the user and will probably only cause confusion. Besides that, there is a good chance that the animations will be junky, culminating in bad UX.

+

Don't animate root elements

+

Animating the <html/> or <body/> tags is possible, but you should avoid it. There were some reports pointing out that this could trigger some weird browser bugs. Besides, making the whole page bounce would hardly provide good value to your UX. If you indeed need this sort of effect, wrap your page in an element and animate it, like this:

+
<body>
+  <main class="animate__animated animate__fadeInLeft">
+    <!-- Your code -->
+  </main>
+</body>
+
+

Infinite animations should be avoided

+

Even tough Animate.css provides utility classes for repeating animations, including an infinite one, you should avoid endless animations. It will just distract your users and might annoy a good slice of them. So, use it wisely!

+

Mind the initial and final state of your elements

+

All the Animate.css animations include a CSS property called animation-fill-mode which controls the states of an element before and after animation. You can read more about it here. Animate.css defaults to animation-fill-mode: both, but you can change it to suit your needs.

+

Don't disable the prefers-reduced-motion media query

+

Since version 3.7.0 Animate.css supports the prefers-reduced-motion media query which disables animations based on the OS system's preference on supporting browsers (most current browsers support it). This is a critical accessibility feature and should never be disabled! This is built into browsers to help people with vestibular and seizure disorders. You can read more about it here. If your web-thing needs the animations to function, warn users, but don't disable the feature. You can do it easily with CSS only. Here's a simple example:

+

+ See the Pen + Prefers-reduce-motion media query by Elton Mesquita (@eltonmesquita) + on CodePen. +

+ +

Gotchas

+

You can't animate inline elements

+

Even though some browsers can animate inline elements, this goes against the CSS animation specs and will break on some browsers or eventually cease to work. Always animate block or inline-block level elements (grid and flex containers and children are block-level elements too). You can set an element to display: inline-block when animating an inline-level element.

+

Overflow

+

Most of the Animate.css animations will move elements across the screen and might create scrollbars on your web-thing. This is manageable using the overflow: hidden property. There's no recipe to when and where to use it, but the basic idea is to use it in the parent holding the animated element. It's up to you to figure out when and how to use it, this guide can help you understand it.

+

Intervals between repeats

+

Unfortunately, this isn't possible with pure CSS right now. You have to use Javascript to achieve this result.

+ +

Edit this on Github

+
+ + +
+

Usage with Javascript

+

You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. A simple example:

+
const element = document.querySelector('.my-element');
+element.classList.add('animate__animated', 'animate__bounceOutLeft');
+
+

You can detect when an animation ends:

+
const element = document.querySelector('.my-element');
+element.classList.add('animate__animated', 'animate__bounceOutLeft');
+
+element.addEventListener('animationend', () => {
+  // do something
+});
+
+

or change its duration:

+
const element = document.querySelector('.my-element');
+element.style.setProperty('--animate-duration', '0.5s');
+
+

You can also use a simple function to add the animations classes and remove them automatically:

+
const animateCSS = (element, animation, prefix = 'animate__') =>
+  // We create a Promise and return it
+  new Promise((resolve, reject) => {
+    const animationName = `${prefix}${animation}`;
+    const node = document.querySelector(element);
+
+    node.classList.add(`${prefix}animated`, animationName);
+
+    // When the animation ends, we clean the classes and resolve the Promise
+    function handleAnimationEnd() {
+      node.classList.remove(`${prefix}animated`, animationName);
+      node.removeEventListener('animationend', handleAnimationEnd);
+
+      resolve('Animation ended');
+    }
+
+    node.addEventListener('animationend', handleAnimationEnd);
+  });
+
+

And use it like this:

+
animateCSS('.my-element', 'animate__bounce');
+
+// or
+animateCSS('.my-element', 'animate__bounce').then((message) => {
+  // Do something after the animation
+});
+
+

If you had a hard time understanding the previous function, have a look at const, classList, arrow functions, and Promises.

+ +

Edit this on Github

+
+ + +
+

Migration from v3.x and under

+

Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. But it also comes with a breaking change: we have added prefix for all of the Animate.css classes - defaulting to animate__ - so a direct migration is not possible.

+

But fear not! Although the default build, animate.min.css, brings the animate__ prefix we also provide the animate.compat.css file which brings no prefix at all, like the previous versions (3.x and under).

+

If you're using a bundler, just update your import:

+

from:

+
import 'animate.min.css';
+
+

to

+
import 'animate.compat.css';
+
+

Notice that depending on your project's configuration, this might change a bit.

+

In case of using a CDN, just update the link on your HTML:

+

from:

+
<head>
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
+  />
+</head>
+
+

to

+
<head>
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css"
+  />
+</head>
+
+

In the case of a new project, it's highly recommended to use the default prefixed version as it'll make sure that you'll hardly have classes conflicting with your project. Besides, in later versions, we might decide to discontinue the animate.compat.css file.

+ +

Edit this on Github

+
+ + +
+

Custom Builds

+

Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS today.

+

First of all, you’ll need Node and all other dependencies:

+
$ cd path/to/animate.css/
+$ npm install
+
+

Next, run npm start to compile your custom build. Three files will be generated:

+
    +
  • animate.css: raw build, easy to read and without any optimization
    • +
  • animate.min.css: minified build ready for production
    • +
  • animate.compat.css: minified build ready for production without class prefix. This should only be used as an easy path for migrations.
    • +
+

For example, if you'll only use some of the “attention seekers” animations, simply edit the ./source/animate.css file, delete every @import and the ones you want to use.

+
@import 'attention_seekers/bounce.css';
+@import 'attention_seekers/flash.css';
+@import 'attention_seekers/pulse.css';
+@import 'attention_seekers/rubberBand.css';
+@import 'attention_seekers/shake.css';
+@import 'attention_seekers/headShake.css';
+@import 'attention_seekers/swing.css';
+@import 'attention_seekers/tada.css';
+@import 'attention_seekers/wobble.css';
+@import 'attention_seekers/jello.css';
+@import 'attention_seekers/heartBeat.css';
+
+

Now, just run npm start and your highly optimized build will be generated at the root of the project.

+

Changing the default prefix

+

It's pretty straight forward to change animate's prefix on your custom build. Change the animateConfig's prefix property in the package.json file and rebuild the library with npm start:

+
/* on Animate.css package.json */
+"animateConfig": {
+  "prefix": "myCustomPrefix__"
+},
+
+

then:

+
$ npm start
+
+

Easy peasy!

+ +

Edit this on Github

+
+ + +
+

Accessibility

+

Animate.css supports the prefers-reduced-motion media query so that users with motion sensitivity can opt-out of animations. On supported platforms (currently all the major browsers and OS, including mobile), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.

+

License

+

Animate.css is licensed under the MIT license. (https://opensource.org/licenses/MIT)

+

Code of Conduct

+

This project and everyone participating in it are governed by the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to callmeelton@gmail.com.

+

Contributing

+

Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorized [fades, bounces, etc]) and let us see a demo of submitted animations in a pen. That last one is important.

+ +

Edit this on Github

+
+ + +
+

Core team

+ + + + + + + + + + + + + + + + + + + + +
Daniel EdenElton MesquitaWaren Gonzaga
Animate.css creatorMaintainerCore contributor
+ +

Edit this on Github

+
+ +
+ +
+
+
+ +
+

+ Animate.css is a MIT licensed library. + You can use it freely, respecting the terms included in the license file. +

+
+ + + + + + + diff --git a/docs/main.mjs b/docs/main.mjs new file mode 100644 index 0000000..3f586f4 --- /dev/null +++ b/docs/main.mjs @@ -0,0 +1,14 @@ +import buildDocsIndex from './modules/buildDocsIndex.mjs'; +import playground from './modules/playground.mjs'; +import startAnimations from './modules/startAnimations.mjs'; +import toggleOnClick from './modules/toggle.mjs'; + +buildDocsIndex(); +playground(); + +toggleOnClick('.callout-showList', 'html', 'animationList-active'); +toggleOnClick('.callout-hideList', 'html', 'animationList-active'); +toggleOnClick('.hamburger', 'html', 'hamburger-active'); +toggleOnClick('.docs-index', 'html', 'hamburger-active'); + +requestAnimationFrame(startAnimations); diff --git a/docs/modules/buildDocsIndex.mjs b/docs/modules/buildDocsIndex.mjs new file mode 100644 index 0000000..fa61f31 --- /dev/null +++ b/docs/modules/buildDocsIndex.mjs @@ -0,0 +1,37 @@ +/** + Docs index +*/ + +const indexItemTemplate = (item = '', id) => ` +
  • ${item}
    • +` + +const indexList = (sections = [], container = '.sidebar', heading = 'h2') => { + const containerEl = document.querySelector(container) + const list = document.createElement('ul') + + const children = sections.map(section => { + const title = section.querySelector(heading) + const id = section.getAttribute('id') + + return title && indexItemTemplate(title.innerText, id) + }) + + list.classList.add('docs-index') + list.innerHTML = children.join('\n') + + containerEl.insertAdjacentElement('beforeend', list) + + return list +} + +const buildDocsIndex = (docs = '#documentation', docSection = '[class*="docSection-"]', titles = 'h2') => { + const docsEl = document.querySelector(docs) + const sections = [...docsEl.querySelectorAll(docSection)] + + const list = indexList(sections) + + return list +} + +export default buildDocsIndex diff --git a/docs/modules/playground.mjs b/docs/modules/playground.mjs new file mode 100644 index 0000000..0237e70 --- /dev/null +++ b/docs/modules/playground.mjs @@ -0,0 +1,46 @@ +/** + Animation playground +*/ + +const clearAll = (items = [], className = 'active') => { + items.forEach((item) => item.classList.remove(className)); +}; + +const setEndListener = (target, defaultClass) => { + target.addEventListener('animationend', (e) => { + target.setAttribute('class', defaultClass); + document.documentElement.classList.remove('isPlaying'); + }); +}; + +const playground = ( + container = '.animation-list', + item = '.animation-item', + target = '.callout-title', +) => { + const containerEl = document.querySelector(container); + const items = [...containerEl.querySelectorAll(item)]; + const targetEl = document.querySelector(target); + + setEndListener(targetEl, target.replace('.', '')); + + containerEl.addEventListener('click', (e) => { + const el = e.target + + if(el.classList.contains('animation-item--title')) { + clearAll(items); + const animation = `animate__${el.parentElement.getAttribute('data-animation')}`; + + targetEl.classList.add('animate__animated', animation); + document.documentElement.classList.add('isPlaying'); + document.documentElement.classList.remove('animationList-active'); + } + + if (el.classList.contains('copy-icon')) { + const animation = `animate__${el.parentElement.getAttribute('data-animation')}`; + navigator.clipboard.writeText(animation); + } + }); +}; + +export default playground; diff --git a/docs/modules/slowDownAnimations.mjs b/docs/modules/slowDownAnimations.mjs new file mode 100644 index 0000000..380f988 --- /dev/null +++ b/docs/modules/slowDownAnimations.mjs @@ -0,0 +1,18 @@ +/** + Slows animations +*/ + +const slowDownAnimations = (target) => { + const targetEl = document.querySelector(target) + const doc = document.documentElement + + targetEl.addEventListener('click', () => { + const currentDuration = getComputedStyle(document.documentElement) + .getPropertyValue('--animate-duration') + const newDuration = currentDuration === '1s' ? '2s' : '1s' + + document.documentElement.style.setProperty('--animate-duration', newDuration); + }) +} + +export default slowDownAnimations diff --git a/docs/modules/startAnimations.mjs b/docs/modules/startAnimations.mjs new file mode 100644 index 0000000..8d9b0ff --- /dev/null +++ b/docs/modules/startAnimations.mjs @@ -0,0 +1,23 @@ +/** + Intro animation +*/ + +const startAnimation = () => { + const title = document.querySelector('.callout-title') + const subTitle = document.querySelector('.callout-subtitle') + const sidebar = document.querySelector('.animation-list') + const button = document.querySelector('.callout-showList') + + + const titleAnimation = 'zoomInDown' + const subTitleAnimation = 'zoomInDown' + const buttonAnimation = 'zoomInUp' + const sidebarAnimation = 'fadeInRight' + + title.classList.add('animate__animated', `animate__${titleAnimation}`) + subTitle.classList.add('animate__animated', `animate__${subTitleAnimation}`) + button.classList.add('animate__animated', `animate__${buttonAnimation}`) + sidebar.classList.add('animate__animated', `animate__${sidebarAnimation}`) +} + +export default startAnimation diff --git a/docs/modules/toggle.mjs b/docs/modules/toggle.mjs new file mode 100644 index 0000000..ab8117d --- /dev/null +++ b/docs/modules/toggle.mjs @@ -0,0 +1,14 @@ +/** + Mobile animation list +*/ + +const toggleOnClick = (el, target, className) => { + const element = document.querySelector(el) + const targetEl = document.querySelector(target) + + element.addEventListener('click', e => { + targetEl.classList.toggle(className) + }) +} + +export default toggleOnClick diff --git a/docs/style.css b/docs/style.css new file mode 100644 index 0000000..9c31d90 --- /dev/null +++ b/docs/style.css @@ -0,0 +1,604 @@ +/*-----------------------------------*\ + $BASE +\*-----------------------------------*/ + +:root { + --c-main: #351c75; + --c-secondary: #e69138; + --c-dark: #333; + --c-background: #fce5cd; + --c-background-dark: #f7d7b5; +} + +html, +body { + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; + + color: var(--c-dark); + font-size: 100%; + font-family: 'Work Sans', sans-serif; + line-height: 1.2; +} + +@media screen and (min-width: 700px) { + html { + font-size: 112.5%; + line-height: 1.35; + } +} + +*, +* *, +*::before, +*::after { + box-sizing: border-box; +} + +img { + max-width: 100%; + height: auto; +} + +iframe { + max-width: 100%; +} + +a, +a:visited { + color: var(--c-main); +} + +pre, +table { + display: block; + max-width: 100%; + overflow-x: auto; +} + +code { + font-size: 1em; + background: var(--c-background); +} + +pre { + padding: 1rem; + + background-color: var(--c-dark); + border-radius: 0.25em; + color: #fff; +} + +pre code { + background-color: transparent; + font-size: 0.8rem !important; +} + +/*-----------------------------------*\ + $TYPOGRAPHY +\*-----------------------------------*/ + +p, +ul, +ol, +hr, +table, +pre, +h1, +h2, +h3, +h4, +h5, +h6 { + margin-top: 1.5em; + margin-bottom: 0; +} + +p { + margin-bottom: 1.5rem; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--c-main); +} + +h1 { + font-size: 3.998rem; +} + +h2 { + font-size: 1.999rem; +} + +h3 { + font-size: 1.414rem; +} + +h4 { + font-size: 1.25rem; +} + +h5 { + font-size: 1rem; +} + +/*-----------------------------------*\ + $GENERICS +\*-----------------------------------*/ + +.button { + padding: 0.4em 1em; + + color: var(--c-main); + border-radius: 4px; + border: 2px solid var(--c-main); + background: transparent; + + font-family: inherit; + font-size: 0.9rem; + text-decoration: none; +} + +blockquote { + border-left: 6px solid var(--c-secondary); + padding-left: 1rem; + margin-left: 0; +} + +/*-----------------------------------*\ + $INTRO +\*-----------------------------------*/ + +.intro { + position: relative; + display: grid; + grid-template-columns: [callout] 1fr; + grid-template-rows: 1fr auto; + grid-column-gap: 0; + grid-row-gap: 1rem; + column-gap: 0; + row-gap: 1rem; + grid-template-areas: + 'callout animation-list' + 'footer aimation-list'; + + max-width: 100%; + height: calc(100vh - 2.55rem); + overflow: hidden; + + background-color: var(--c-background); +} + +@media (min-width: 700px) { + .intro { + height: calc(100vh - 2.8rem); + grid-column-gap: 1rem; + column-gap: 1rem; + grid-template-columns: [callout] 1fr [sidebar] 250px; + } +} + +.callout { + grid-area: callout; + align-self: center; + justify-self: center; + + text-align: center; +} + +.callout-title { + margin-bottom: 0; + + animation-delay: 0.25s; + + font-size: 4rem; + font-size: min(14vw, 4rem); +} + +@media (min-width: 700px) { + .callout-title { + animation-delay: 0s; + } +} + +.callout-subtitle { + margin-top: 0; + + animation-delay: 0.3s; + + color: var(--c-secondary); + font-size: 1.3333rem; + font-size: min(10vw, 1.3333rem); +} + +.callout-showList { + margin-top: 2rem; + animation-delay: 0.5s; +} + +@media (min-width: 700px) { + .callout-showList { + display: none; + } +} + +@media (min-width: 1000px) { + .callout-hideList { + display: none; + } +} + +.animation-list { + position: absolute; + top: 0; + left: 100%; + height: 100%; + z-index: 90; + + grid-area: animation-list; + grid-row: 1 / 3; + overflow-y: auto; + padding: 2rem; + + animation-delay: 0.7s; + animation-fill-mode: backwards; + transition: transform 0.2s ease-out; + + background-color: var(--c-background-dark); +} + +.animationList-active .animation-list { + transform: translateX(-100%); +} + +@media (min-width: 700px) { + .animation-list { + position: relative; + left: auto; + transform: none !important; + } +} + +.intro-footer { + grid-area: footer; + justify-self: center; + padding-bottom: 1rem; + + font-size: 0.75rem; + text-align: center; +} + +.animation-item { + cursor: pointer; + display: flex; + justify-content: space-between; +} + +.tooltip { + position: absolute; + bottom: calc(100% + 0.76em); + right: -1em; + padding: 0.5em 0.75em; + + background-color: var(--c-main); + color: #fff; + border-radius: 4px; + + line-height: 1; + white-space: nowrap; + + visibility: hidden; +} + +.tooltip::before { + content: ''; + position: absolute; + top: 100%; + right: 1.1em; + + width: 0; + height: 0; + + border-style: solid; + border-width: 6px 4px 0 4px; + border-color: var(--c-main) transparent transparent transparent; +} + +.copy-icon { + position: relative; + width: 6px; + height: 10px; + align-self: center; + + background-color: transparent; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 477.867 477.867'%3E%3Cpath d='M341.333 85.333H51.2c-28.277 0-51.2 22.923-51.2 51.2v290.133c0 28.277 22.923 51.2 51.2 51.2h290.133c28.277 0 51.2-22.923 51.2-51.2V136.533c0-28.277-22.923-51.2-51.2-51.2zM358.4 426.667c0 9.426-7.641 17.067-17.067 17.067H51.2c-9.426 0-17.067-7.641-17.067-17.067V136.533c0-9.426 7.641-17.067 17.067-17.067h290.133c9.426 0 17.067 7.641 17.067 17.067v290.134z'/%3E%3Cpath d='M426.667 0h-307.2c-28.277 0-51.2 22.923-51.2 51.2 0 9.426 7.641 17.067 17.067 17.067S102.4 60.626 102.4 51.2s7.641-17.067 17.067-17.067h307.2c9.426 0 17.067 7.641 17.067 17.067v307.2c0 9.426-7.641 17.067-17.067 17.067s-17.067 7.641-17.067 17.067 7.641 17.067 17.067 17.067c28.277 0 51.2-22.923 51.2-51.2V51.2c0-28.277-22.923-51.2-51.2-51.2z'/%3E%3C/svg%3E"); + background-position: right bottom; + background-repeat: no-repeat; + background-size: 10px; + + visibility: hidden; + cursor: pointer; + border: 0; + box-shadow: none; +} + +.animation-item:hover .copy-icon { + visibility: visible; +} + +.copy-icon:hover .tooltip { + visibility: visible; +} + +.animation-group, +.animation-title { + font-size: 1rem; +} + +.animation-title { + margin-bottom: 0.2em; + + color: var(--c-dark); +} + +.animation-group { + margin: 0; + padding: 0; + + list-style: none; + line-height: 1.4; +} + +/*-----------------------------------*\ + $DOCS +\*-----------------------------------*/ + +.container { + gap: 1rem; + margin: 0 auto; + + max-width: 100%; +} + +@media (min-width: 1000px) { + .container { + display: grid; + grid-template-rows: 1fr; + grid-template-columns: calc(100% - 300px - 1rem) 300px; + } +} + +@media (min-width: 1520px) { + .container { + grid-template-rows: 1fr; + grid-template-columns: 1fr 1100px 2fr; + } +} + +.docs { + position: relative; +} + +.docs-header { + position: relative; + padding: 0.5rem 0; + + background-color: var(--c-main); + z-index: 100; +} + +.docs-mainTitle { + grid-column: 1 / 2; + padding-left: 1rem; + margin-top: 0; + + font-size: 1.3333rem; +} + +.docs-mainTitle a { + color: var(--c-secondary); + text-decoration: none; +} + +@media (min-width: 1520px) { + .docs-mainTitle { + grid-column: 2 / 3; + } +} + +.meta { + padding-left: 2rem; + margin-top: 1rem; +} + +.content { + padding: 0 1rem; + margin-bottom: 2rem; +} + +@media (min-width: 1520px) { + .content { + grid-column: 2 / 3; + } +} + +.hamburger { + --size: 30px; + + display: flex; + align-items: center; + justify-content: center; + position: sticky; + top: 2rem; + left: 100%; + width: var(--size); + height: var(--size); + + background-color: var(--c-secondary); + transition: transform 0.2s ease-out; + + text-align: center; +} + +.hamburger-active .hamburger { + transform: translateX(-240px); +} + +@media (min-width: 1000px) { + .hamburger { + display: none; + } +} + +.sidebar { + position: fixed; + top: 0; + left: 100%; + z-index: 100; + + width: 240px; + height: 100%; + padding-right: 1rem; + + background: var(--c-background-dark); + transition: transform 0.2s ease-out; +} + +.hamburger-active .sidebar { + transform: translateX(-100%); +} + +@media (min-width: 1000px) { + .sidebar { + position: static; + width: auto; + height: auto; + } + + .hamburger-active .sidebar { + transform: none; + } +} + +.icon-github { + display: inline-block; + margin-right: 0.3em; +} + +.docs-index { + top: 1rem; + padding-left: 2rem; + + list-style: none; +} + +@media (min-width: 1000px) { + .docs-index { + position: sticky; + } +} + +.docs-indexItem { + margin-bottom: 0.4rem; +} + +.edit-github { + font-size: 0.75rem; + text-align: right; +} + +[class*='docSection'] { + border-bottom: 1px solid #eaeaea; +} + +[class*='docSection']:last-of-type { + border-bottom: 0px; +} + +.docSection-contributors table { + text-align: center; +} + +.docSection-contributors table th, +.docSection-contributors table td { + padding: 0 1rem; +} + +.docSection-contributors table img { + width: 150px; + border-radius: 100%; +} + +/*-----------------------------------*\ + $FOOTER +\*-----------------------------------*/ + +.main-footer { + padding: 1rem; + + background-color: var(--c-main); + color: #fff; + + font-size: 0.75rem; + text-align: center; +} + +.main-footer p { + margin: 0; +} + +.main-footer a { + color: #fff; +} + +/*-----------------------------------*\ + $REDUCED MOTION BANNER +\*-----------------------------------*/ + +.motionless__banner a { + color: #fff; +} + +.motionless__banner { + display: none; + position: fixed; + bottom: 0; + left: 0; + z-index: 150; + + width: 100%; + padding: 1rem; + + background: #333; + color: #fff; + border-top: 2px solid #ff5722; + + text-align: center; +} + +.motionless__paragraph { + margin: 0; +} + +@media (print), (prefers-reduced-motion: reduce) { + .motionless__banner { + display: block; + } +} + +.docs { + text-align: left; +} + +.animation-list { + text-align: left; +} diff --git a/docsSource/compileAnimationList.js b/docsSource/compileAnimationList.js new file mode 100644 index 0000000..058d9fd --- /dev/null +++ b/docsSource/compileAnimationList.js @@ -0,0 +1,66 @@ +const fs = require('fs'); +const path = require('path'); + +/** + * Get and categorize all the animation names and compile + * to HTML lists + * @param {string} dir - directory containing the css file + * @param {string} file - css file name + */ + +function compileAnimationlist(dir = '../source', file = 'animate.css') { + const filePath = path.join(__dirname, dir, file); + const content = fs.readFileSync(filePath, 'utf8'); + const globalRegex = /\/(.*)\w/g; + const itemRegex = /(\/)(.*)(\.)/; + + const rawList = content.match(globalRegex); + let currentGroup; + let list = {}; + + rawList.forEach((i) => { + const item = i.match(itemRegex); + + if (item == null) { + const title = i.replace('/* ', ''); + currentGroup = title; + list[title] = []; + + return currentGroup; + } + + return list[currentGroup].push(item[2]); + }, {}); + + const itemTemplate = (item) => ` +
  • + ${item} + +
    • `; + + const listTemplate = (title, items) => { + const parsedTitle = title.toLowerCase().replace(' ', '_'); + + return ` +
    +

    ${title}

    +
      ${items.join('\n')}
    +
    + `; + }; + + const compile = (list) => { + const titles = Object.keys(list); + + return titles.map((title) => { + const items = list[title].map((item) => itemTemplate(item)); + return listTemplate(title, items); + }); + }; + + return compile(list).join('\n'); +} + +module.exports = compileAnimationlist; diff --git a/docsSource/compileMD.js b/docsSource/compileMD.js new file mode 100644 index 0000000..6a3a97a --- /dev/null +++ b/docsSource/compileMD.js @@ -0,0 +1,43 @@ +const path = require('path'); +const fs = require('fs'); +const md = require('markdown-it')({ + html: true, + linkify: true, +}); + +/** + * Gets all the markdown files on a folder, compile them to html and returns + * @param {string} dir - folder containing all the .md files + */ + +function compileMD(dir = 'sections') { + const directory = path.join(__dirname, dir); + const files = fs.readdirSync(directory).sort(); + + const sectionTemplate = (file, content) => { + const message = 'Edit this on Github'; + const fileName = file.replace('.md', '').match(/([a-z])\w+/)[0]; + const editURL = `https://github.com/daneden/animate.css/tree/master/source/docsSource/sections/${file}`; + const parsedContent = md.render(content); + + return ` +
    + ${parsedContent} +

    ${message}

    +
    + `; + }; + + const readMD = (file) => { + const filePath = path.join(__dirname, dir, file); + const content = fs.readFileSync(filePath, 'utf8'); + + return sectionTemplate(file, content); + }; + + const filesContent = files.map((section) => readMD(section)); + + return filesContent.join('\n'); +} + +module.exports = compileMD; diff --git a/docsSource/index.js b/docsSource/index.js new file mode 100644 index 0000000..291cef1 --- /dev/null +++ b/docsSource/index.js @@ -0,0 +1,25 @@ +const path = require('path'); +const fs = require('fs'); + +const {version} = JSON.parse(fs.readFileSync('package.json')); +const compileMD = require('./compileMD'); +const compileAnimationList = require('./compileAnimationList'); + +const templatePath = path.join(__dirname, 'template.html'); +const template = fs.readFileSync(templatePath, 'utf8'); +const outputPath = '../docs'; +const outputFile = 'index.html'; + +const docs = compileMD(); +const list = compileAnimationList(); + +const output = path.join(__dirname, outputPath, outputFile); + +const withDocs = template.replace('{{docs}}', docs); +const withListAndDocs = withDocs.replace('{{list}}', list); +const withVersion = withListAndDocs.replace('{{version}}', version); + +fs.writeFile(output, withVersion, 'utf8', (err) => { + if (err) console.error(err); + console.log('Template compiled succesfully.'); +}); diff --git a/docsSource/sections/00-intro.md b/docsSource/sections/00-intro.md new file mode 100644 index 0000000..5345d80 --- /dev/null +++ b/docsSource/sections/00-intro.md @@ -0,0 +1,3 @@ +> Animate.css v4 brought some **breaking changes**, please refer to the [migration guide](#migration) before updating from v3.x and under. + +**Animate.css** is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints. diff --git a/docsSource/sections/01-usage.md b/docsSource/sections/01-usage.md new file mode 100644 index 0000000..293aba4 --- /dev/null +++ b/docsSource/sections/01-usage.md @@ -0,0 +1,87 @@ +## Installation and usage + +### Installing + +Install with npm: + +```shell +$ npm install animate.css --save +``` + +with yarn: + +```shell +$ yarn add animate.css +``` + +or add it directly to your webpage using a CDN: + +```html + + + +``` + +### Basic usage + +After installing Animate.css, add the class `animate__animated` to an element, along with any of the [animation names](#attention_seekers) (don't forget the `animate__` prefix!): + +```html +

    An animated element

    +``` + +That's it! You've got a CSS animated element. Super! + +> Animations can improve the UX of an interface, but keep in mind that they can also get in the way of your users! Please read the [best practices](#best-practices) and [gotchas](#gotchas) sections to bring your web-things to life in the best way possible. + +#### Using `@keyframes` + +Even though the library provides you a few helper classes like the `animated` class to get you up running quickly, you can use the provided animations `keyframes` directly. This provides a flexible way to use Animate.css with your current projects without having to refactor your HTML code. + +Example: + +```css +.my-element { + display: inline-block; + margin: 0 0.5rem; + + animation: bounce; /* referring directly to the animation's @keyframe declaration */ + animation-duration: 2s; /* don't forget to set a duration! */ +} +``` + +Be aware that some animations are dependent on the `animation-timing` property set on the animation's class. Changing or not declaring it might lead to unexpected results. + +#### CSS Custom Properties (CSS Variables) + +Since version 4, Animate.css makes use of custom properties (also known as CSS variables) to define the animations duration, delay, and iteractions. This makes Animate.css very flexible and customizable. Need to change an animation duration? Just set a new value to globally or locally. + +Example: + +```css +/* This only changes this particular animation duration */ +.animate__animated.animate__bounce { + --animate-duration: 2s; +} + +/* This changes all the animations globaly */ +:root { + --animate-duration: 800ms; + --animation-delay: 0.9s; +} +``` + +Custom properties also make it easy to change all your animations time-constrained properties on the fly. It means that you can have a slow-motion or time-lapse effect with a javascript one-liner: + +```javascript +// All animations will take twice the time to accomplish +document.documentElement.style.setProperty('--animate-duration', '2s'); + +// All animations will take half the time to accomplish +document.documentElement.style.setProperty('--animate-duration', '.5s'); +``` + +Even though custom properties are not supported by some aging browsers, Animate.css provides a proper fallback, widening its support for any browser that supports CSS animations. diff --git a/docsSource/sections/02-utilities.md b/docsSource/sections/02-utilities.md new file mode 100644 index 0000000..b8d0f3e --- /dev/null +++ b/docsSource/sections/02-utilities.md @@ -0,0 +1,90 @@ +## Utility classes + +Animate.css comes packed with a few utility classes to simplify its use. + +### Delay classes + +You can add delays directly on the element's class attribute, just like this: + +```html +
    Example
    +``` + +Animate.css provides the following delays: + +| Class name | Default delay time | +| ------------------- | ------------------ | +| `animate__delay-2s` | `2s` | +| `animate__delay-3s` | `3s` | +| `animate__delay-4s` | `4s` | +| `animate__delay-5s` | `5s` | + +The provided delays are from 1 to 5 seconds. You can customize them setting the `--animate-delay` property to a longer or a shorter duration: + +```css +/* All delay classes will take 2x longer to start */ +:root { + --animate-delay: 2s; +} + +/* All delay classes will take half the time to start */ +:root { + --animate-delay: 0.5s; +} +``` + +### Slow, slower, fast, and Faster classes + +You can control the speed of the animation by adding these classes, as below: + +```html +
    Example
    +``` + +| Class name | Default speed time | +| ----------------- | ------------------ | +| `animate__slow` | `2s` | +| `animate__slower` | `3s` | +| `animate__fast` | `800ms` | +| `animate__faster` | `500ms` | + +The `animate__animated` class has a default speed of `1s`. You can also customize the animations duration through the `--animate-duration` property, globaly or locally. This will affect both the animations and the utility classes. Example: + +```css +/* All animations will take twice as long to finish */ +:root { + --animation-duration: 2s; +} + +/* Only this element will take half the time to finish */ +.my-element { + --animation-duration: 0.5s; +} +``` + +Notice that some animations have a duration of less than 1 second. As we used the CSS `calc()` function, setting the duration through the `--animation-duration` property will respect these ratios. So, when you change the global duration all the animations will respond to that change! + +### Repeating classes + +You can control the iteration count of the animation by adding these classes, like below: + +```html +
    Example
    +``` + +| Class Name | Default iteration count | +| ------------------- | ----------------------- | +| `animate__repeat-1` | `1` | +| `animate__repeat-2` | `2` | +| `animate__repeat-3` | `3` | + +As with the repeat and speed classes, the `animate__repeat` class is based on the `--animate-repeat` property and has a default iteration count of `1`. You can customize them setting the `--animate-repeat` property to a longer or a shorter value: + +```css +/* The element will repeat the animation 2x + It's better to set this property only locally and not globally or + you might end up with a messy situation */ +.my-element { + --animation-repeat: 2; +} +``` diff --git a/docsSource/sections/03-best-practices.md b/docsSource/sections/03-best-practices.md new file mode 100644 index 0000000..ba01092 --- /dev/null +++ b/docsSource/sections/03-best-practices.md @@ -0,0 +1,60 @@ +## Best practices + +Animations can greatly improve an interface's UX, but it's important to follow some guidelines to not overdo it and deteriorate the user experience on your web-things. Following the following rules should provide a good start. + +### Meaningful animations + +You should avoid animating an element just for the sake of it. Keep in mind that animations should make an intention clear. Animations like attention seekers (bounce, flash, pulse, etc) should be used to bring the user's attention to something special in your interface and not only as a way to bring "flashiness" to it. + +Entrances and exit animations should be used to orientate what is happening in the interface, clearly signaling that it's transitioning into a new state. + +It doesn't mean that you should avoid adding playfulness to the interface, just be sure that the animations are not getting in the way of your user and that the page's performance is not affected by an exaggerated use of animations. + +### Don't animate large elements + +Avoid it as it won't bring much value to the user and will probably only cause confusion. Besides that, there is a good chance that the animations will be junky, culminating in bad UX. + +### Don't animate root elements + +Animating the `` or `` tags is possible, but you should avoid it. There were some reports pointing out that this could trigger some weird browser bugs. Besides, making the whole page bounce would hardly provide good value to your UX. If you indeed need this sort of effect, wrap your page in an element and animate it, like this: + +```html + +
    + +
    + +``` + +### Infinite animations should be avoided + +Even tough Animate.css provides utility classes for repeating animations, including an infinite one, you should avoid endless animations. It will just distract your users and might annoy a good slice of them. So, use it wisely! + +### Mind the initial and final state of your elements + +All the Animate.css animations include a CSS property called `animation-fill-mode` which controls the states of an element before and after animation. You can read more about it [here](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode). Animate.css defaults to `animation-fill-mode: both`, but you can change it to suit your needs. + +### Don't disable the `prefers-reduced-motion` media query + +Since version 3.7.0 Animate.css supports the `prefers-reduced-motion` media query which disables animations based on the OS system's preference on supporting browsers (most current browsers support it). This is a **critical accessibility feature** and should never be disabled! This is built into browsers to help people with vestibular and seizure disorders. You can read more about it [here](https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/). If your web-thing needs the animations to function, warn users, but don't disable the feature. You can do it easily with CSS only. Here's a simple example: + +

    + See the Pen + Prefers-reduce-motion media query by Elton Mesquita (@eltonmesquita) + on CodePen. +

    + + +

    Gotchas

    + +### You can't animate inline elements + +Even though some browsers can animate inline elements, this goes against the CSS animation specs and will break on some browsers or eventually cease to work. Always animate block or inline-block level elements (grid and flex containers and children are block-level elements too). You can set an element to `display: inline-block` when animating an inline-level element. + +### Overflow + +Most of the Animate.css animations will move elements across the screen and might create scrollbars on your web-thing. This is manageable using the `overflow: hidden` property. There's no recipe to when and where to use it, but the basic idea is to use it in the parent holding the animated element. It's up to you to figure out when and how to use it, [this guide](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) can help you understand it. + +### Intervals between repeats + +Unfortunately, this isn't possible with pure CSS right now. You have to use Javascript to achieve this result. diff --git a/docsSource/sections/04-javascript.md b/docsSource/sections/04-javascript.md new file mode 100644 index 0000000..46d83ca --- /dev/null +++ b/docsSource/sections/04-javascript.md @@ -0,0 +1,62 @@ +## Usage with Javascript + +You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. A simple example: + +```javascript +const element = document.querySelector('.my-element'); +element.classList.add('animate__animated', 'animate__bounceOutLeft'); +``` + +You can detect when an animation ends: + +```javascript +const element = document.querySelector('.my-element'); +element.classList.add('animate__animated', 'animate__bounceOutLeft'); + +element.addEventListener('animationend', () => { + // do something +}); +``` + +or change its duration: + +```javascript +const element = document.querySelector('.my-element'); +element.style.setProperty('--animate-duration', '0.5s'); +``` + +You can also use a simple function to add the animations classes and remove them automatically: + +```javascript +const animateCSS = (element, animation, prefix = 'animate__') => + // We create a Promise and return it + new Promise((resolve, reject) => { + const animationName = `${prefix}${animation}`; + const node = document.querySelector(element); + + node.classList.add(`${prefix}animated`, animationName); + + // When the animation ends, we clean the classes and resolve the Promise + function handleAnimationEnd() { + node.classList.remove(`${prefix}animated`, animationName); + node.removeEventListener('animationend', handleAnimationEnd); + + resolve('Animation ended'); + } + + node.addEventListener('animationend', handleAnimationEnd); + }); +``` + +And use it like this: + +```javascript +animateCSS('.my-element', 'animate__bounce'); + +// or +animateCSS('.my-element', 'animate__bounce').then((message) => { + // Do something after the animation +}); +``` + +If you had a hard time understanding the previous function, have a look at [const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const), [classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList), [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), and [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). diff --git a/docsSource/sections/06-migration.md b/docsSource/sections/06-migration.md new file mode 100644 index 0000000..a848d73 --- /dev/null +++ b/docsSource/sections/06-migration.md @@ -0,0 +1,47 @@ +## Migration from v3.x and under + +Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. But it also comes with a breaking change: we have added prefix for all of the Animate.css classes - defaulting to `animate__` - so a direct migration is not possible. + +But fear not! Although the default build, `animate.min.css`, brings the `animate__` prefix we also provide the `animate.compat.css` file which brings no prefix at all, like the previous versions (3.x and under). + +If you're using a bundler, just update your import: + +from: + +```js +import 'animate.min.css'; +``` + +to + +```js +import 'animate.compat.css'; +``` + +Notice that depending on your project's configuration, this might change a bit. + +In case of using a CDN, just update the link on your HTML: + +from: + +```html + + + +``` + +to + +```html + + + +``` + +In the case of a new project, it's highly recommended to use the default prefixed version as it'll make sure that you'll hardly have classes conflicting with your project. Besides, in later versions, we might decide to discontinue the `animate.compat.css` file. diff --git a/docsSource/sections/07-custom-builds.md b/docsSource/sections/07-custom-builds.md new file mode 100644 index 0000000..2a63087 --- /dev/null +++ b/docsSource/sections/07-custom-builds.md @@ -0,0 +1,53 @@ +## Custom Builds + +Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS today. + +First of all, you’ll need Node and all other dependencies: + +```shell +$ cd path/to/animate.css/ +$ npm install +``` + +Next, run `npm start` to compile your custom build. Three files will be generated: + +- `animate.css`: raw build, easy to read and without any optimization +- `animate.min.css`: minified build ready for production +- `animate.compat.css`: minified build ready for production **without class prefix**. This should only be used as an easy path for migrations. + +For example, if you'll only use some of the “attention seekers” animations, simply edit the `./source/animate.css` file, delete every `@import` and the ones you want to use. + +```css +@import 'attention_seekers/bounce.css'; +@import 'attention_seekers/flash.css'; +@import 'attention_seekers/pulse.css'; +@import 'attention_seekers/rubberBand.css'; +@import 'attention_seekers/shake.css'; +@import 'attention_seekers/headShake.css'; +@import 'attention_seekers/swing.css'; +@import 'attention_seekers/tada.css'; +@import 'attention_seekers/wobble.css'; +@import 'attention_seekers/jello.css'; +@import 'attention_seekers/heartBeat.css'; +``` + +Now, just run `npm start` and your highly optimized build will be generated at the root of the project. + +### Changing the default prefix + +It's pretty straight forward to change animate's prefix on your custom build. Change the `animateConfig`'s `prefix` property in the `package.json` file and rebuild the library with `npm start`: + +```json +/* on Animate.css package.json */ +"animateConfig": { + "prefix": "myCustomPrefix__" +}, +``` + +then: + +```shell +$ npm start +``` + +Easy peasy! diff --git a/docsSource/sections/08-contributing.md b/docsSource/sections/08-contributing.md new file mode 100644 index 0000000..2a3597c --- /dev/null +++ b/docsSource/sections/08-contributing.md @@ -0,0 +1,15 @@ +## Accessibility + +Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) so that users with motion sensitivity can opt-out of animations. On supported platforms (currently all the major browsers and OS, including mobile), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required. + +## License + +Animate.css is licensed under the MIT license. (https://opensource.org/licenses/MIT) + +## Code of Conduct + +This project and everyone participating in it are governed by the [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [callmeelton@gmail.com](mailto:callmeelton@gmail.com). + +## Contributing + +Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorized [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](https://codepen.io). That **last one is important**. diff --git a/docsSource/sections/09-contributors.md b/docsSource/sections/09-contributors.md new file mode 100644 index 0000000..2d4f495 --- /dev/null +++ b/docsSource/sections/09-contributors.md @@ -0,0 +1,6 @@ +## Core team + +| ![](https://avatars2.githubusercontent.com/u/439365?s=460&u=512b4cc5324938ae40bbb8f3b7769d335953cd3a&v=4) | ![](https://avatars2.githubusercontent.com/u/5007208?s=460&u=418401ee605824272e5dcb955fd64ea24546a857&v=4) | ![](https://avatars1.githubusercontent.com/u/15052701?s=460&u=9e58364978379536d3f26c4ce5cae1a2a449a0e4&v=4) | +| --- | --- | --- | +| [Daniel Eden](https://github.com/daneden) | [Elton Mesquita](https://github.com/eltonmesquita) | [Waren Gonzaga](https://github.com/WarenGonzaga) | +| Animate.css creator | Maintainer | Core contributor | diff --git a/docsSource/template.html b/docsSource/template.html new file mode 100644 index 0000000..b82b226 --- /dev/null +++ b/docsSource/template.html @@ -0,0 +1,133 @@ + + + + Animate.css + + + + + + + + + + + + +
    +
    +

    Animate.css

    +

    Just-add-water CSS animations

    +

    + +

    +
    + +
    + + {{list}} +
    + + +
    + +
    +
    +
    +

    + Documentation +

    +
    +
    + +
    + + + + + + + +
    +
    + {{docs}} +
    + +
    +
    +
    + +
    +

    + Animate.css is a MIT licensed library. + You can use it freely, respecting the terms included in the license file. +

    +
    + + + + + + + diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index 44ae391..0000000 --- a/gulpfile.js +++ /dev/null @@ -1,107 +0,0 @@ -// Utilities -var autoprefixer = require('autoprefixer'); -var cssnano = require('cssnano'); -var fs = require('fs'); - -// Gulp -var gulp = require('gulp'); - -// Gulp plugins -var concat = require('gulp-concat'); -var gutil = require('gulp-util'); -var header = require('gulp-header'); -var postcss = require('gulp-postcss'); -var rename = require('gulp-rename'); -var runSequence = require('run-sequence'); - -// Misc/global vars -var pkg = JSON.parse(fs.readFileSync('package.json')); -var activatedAnimations = activateAnimations(); - -// Task options -var opts = { - destPath: './', - concatName: 'animate.css', - - autoprefixer: { - browsers: ['> 1%', 'last 2 versions', 'Firefox ESR'], - cascade: false, - }, - - minRename: { - suffix: '.min', - }, - - banner: [ - '@charset "UTF-8";\n', - '/*!', - ' * <%= name %> -<%= homepage %>', - ' * Version - <%= version %>', - ' * Licensed under the MIT license - https://opensource.org/licenses/MIT', - ' *', - ' * Copyright (c) <%= new Date().getFullYear() %> <%= author.name %>', - ' */\n\n', - ].join('\n'), -}; - -// ---------------------------- -// Gulp task definitions -// ---------------------------- - -gulp.task('createCSS', function() { - return gulp - .src(activatedAnimations) - .pipe(concat(opts.concatName)) - .pipe(postcss([autoprefixer(opts.autoprefixer)])) - .pipe(gulp.dest(opts.destPath)) - .pipe(postcss([cssnano({reduceIdents: {keyframes: false}})])) - .pipe(rename(opts.minRename)) - .pipe(gulp.dest(opts.destPath)); -}); - -gulp.task('addHeader', function() { - return gulp - .src('*.css') - .pipe(header(opts.banner, pkg)) - .pipe(gulp.dest(opts.destPath)); -}); - -gulp.task('default', gulp.series('createCSS', 'addHeader')); - -// ---------------------------- -// Helpers/functions -// ---------------------------- - -// Read the config file and return an array of the animations to be activated -function activateAnimations() { - var categories = JSON.parse(fs.readFileSync('animate-config.json')), - category, - files, - file, - target = [], - count = 0; - - for (category in categories) { - if (categories.hasOwnProperty(category)) { - files = categories[category]; - - for (file in files) { - if (files[file]) { - // marked as true - target.push('source/' + category + '/' + file + '.css'); - count += 1; - } - } - } - } - // prepend base CSS - target.push('source/_base.css'); - - if (!count) { - gutil.log('No animations activated.'); - } else { - gutil.log(count + (count > 1 ? ' animations' : ' animation') + ' activated.'); - } - - return target; -} diff --git a/package.json b/package.json index f926654..1b2665d 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,25 @@ }, "homepage": "https://daneden.github.io/animate.css/", "license": "MIT", + "animateConfig": { + "prefix": "animate__" + }, + "scripts": { + "start": "npm-run-all raw prod compat", + "compat": "npx postcss source/animate.css -o animate.compat.css --no-map --env compat", + "dev": "npx postcss source/animate.css -o animate.css --no-map --env development -w", + "raw": "npx postcss source/animate.css -o animate.css --no-map --env development", + "prod": "npx postcss source/animate.css -o animate.min.css --no-map --env production", + "format": "prettier --write \"**/*.{js,json,md,css}\"", + "precommit": "lint-staged", + "docs:library": "npx postcss source/animate.css -o ./docs/animate.min.css --no-map --env production", + "docs:pages": "node ./docsSource/index.js", + "docs": "npm-run-all docs:library docs:pages" + }, + "browserslist": [ + "> 3%", + "last 2 versions" + ], "style": "./animate.css", "jspm": { "main": "animate.css!", @@ -20,39 +39,29 @@ } }, "devDependencies": { - "autoprefixer": "^9.0.1", - "cssnano": "^4.0.3", - "eslint": "^5.2.0", - "gulp": "^4.0.0", - "gulp-concat": "^2.6.1", - "gulp-header": "^2.0.1", - "gulp-postcss": "^8.0.0", - "gulp-rename": "^1.2.2", - "gulp-util": "^3.0.8", - "husky": "^1.2.0", - "lint-staged": "^8.1.0", - "prettier": "^1.10.2", - "run-sequence": "^2.2.1" + "autoprefixer": "^9.7.6", + "cssnano": "^4.1.10", + "eslint": "^6.8.0", + "husky": "^4.2.5", + "lint-staged": "^10.1.6", + "markdown-it": "^10.0.0", + "npm-run-all": "^4.1.5", + "postcss": "^7.0.27", + "postcss-cli": "^7.1.0", + "postcss-header": "^2.0.0", + "postcss-import": "^12.0.1", + "postcss-prefixer": "^2.1.2", + "postcss-preset-env": "^6.7.0", + "prettier": "^2.0.4" }, "lint-staged": { "*.{js,json,md,css}": [ - "prettier --write", - "git add" + "prettier --write" ] }, - "prettier": { - "bracketSpacing": false, - "proseWrap": "never", - "singleQuote": true, - "trailingComma": "all" - }, - "scripts": { - "gulp": "./node_modules/gulp/bin/gulp.js", - "start": "gulp", - "prettier": "prettier --write \"**/*.{js,json,md,css}\"", - "precommit": "lint-staged" - }, - "spm": { - "main": "./animate.css" + "husky": { + "hooks": { + "pre-commit": "npm-run-all start precommit" + } } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..59fd603 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,47 @@ +const fs = require('fs'); +const {homepage, version, author, animateConfig} = JSON.parse(fs.readFileSync('package.json')); + +const header = ` +@charset "UTF-8"; + +/*! + * animate.css - ${homepage} + * Version - ${version} + * Licensed under the MIT license - http://opensource.org/licenses/MIT + * + * Copyright (c) ${new Date().getFullYear()} ${author.name} + */ + + + `; + +module.exports = (ctx) => { + const prefix = ctx.env === 'compat' ? '' : animateConfig.prefix; + const devMessage = `🎉🎉🎉🎉 \nanimate.css ${ctx.env} build was compiled sucessfully! \n`; + + console.log(devMessage); + + return { + map: ctx.options.map, + parser: ctx.options.parser, + plugins: { + 'postcss-import': {root: ctx.file.dirname}, + 'postcss-prefixer': { + prefix, + ignore: [/\[class\*=.*\]/], + }, + 'postcss-preset-env': { + autoprefixer: { + cascade: false, + }, + features: { + 'custom-properties': true, + }, + }, + cssnano: ctx.env === 'production' || ctx.env === 'compat' ? {} : false, + 'postcss-header': { + header, + }, + }, + }; +}; diff --git a/source/_base.css b/source/_base.css index 28b21a3..ccbfd15 100644 --- a/source/_base.css +++ b/source/_base.css @@ -1,5 +1,5 @@ .animated { - animation-duration: 1s; + animation-duration: var(--animate-duration); animation-fill-mode: both; } @@ -7,46 +7,62 @@ animation-iteration-count: infinite; } +.animated.repeat-1 { + animation-iteration-count: var(--animate-repeat); +} + +.animated.repeat-2 { + animation-iteration-count: calc(var(--animate-repeat) * 2); +} + +.animated.repeat-3 { + animation-iteration-count: calc(var(--animate-repeat) * 3); +} + .animated.delay-1s { - animation-delay: 1s; + animation-delay: var(--animate-delay); } .animated.delay-2s { - animation-delay: 2s; + animation-delay: calc(var(--animate-delay) * 2); } .animated.delay-3s { - animation-delay: 3s; + animation-delay: calc(var(--animate-delay) * 3); } .animated.delay-4s { - animation-delay: 4s; + animation-delay: calc(var(--animate-delay) * 4); } .animated.delay-5s { - animation-delay: 5s; -} - -.animated.fast { - animation-duration: 800ms; + animation-delay: calc(var(--animate-delay) * 5); } .animated.faster { - animation-duration: 500ms; + animation-duration: calc(var(--animate-duration) / 2); +} + +.animated.fast { + animation-duration: calc(var(--animate-duration) * 0.8); } .animated.slow { - animation-duration: 2s; + animation-duration: calc(var(--animate-duration) * 2); } .animated.slower { - animation-duration: 3s; + animation-duration: calc(var(--animate-duration) * 3); } -@media (print), (prefers-reduced-motion: reduce) { +@media print, (prefers-reduced-motion: reduce) { .animated { animation-duration: 1ms !important; transition-duration: 1ms !important; - animation-iteration-count: 1 !important; + animation-iteration-count: 1 !important; + } + + .animated[class*='Out'] { + opacity: 0; } } diff --git a/source/_vars.css b/source/_vars.css new file mode 100644 index 0000000..43ea190 --- /dev/null +++ b/source/_vars.css @@ -0,0 +1,5 @@ +:root { + --animate-duration: 1s; + --animate-delay: 1s; + --animate-repeat: 1; +} diff --git a/source/animate.css b/source/animate.css new file mode 100644 index 0000000..d9a962a --- /dev/null +++ b/source/animate.css @@ -0,0 +1,131 @@ +@import '_vars.css'; +@import '_base.css'; + +/* Attention seekers */ +@import 'attention_seekers/bounce.css'; +@import 'attention_seekers/flash.css'; +@import 'attention_seekers/pulse.css'; +@import 'attention_seekers/rubberBand.css'; +@import 'attention_seekers/shakeX.css'; +@import 'attention_seekers/shakeY.css'; +@import 'attention_seekers/headShake.css'; +@import 'attention_seekers/swing.css'; +@import 'attention_seekers/tada.css'; +@import 'attention_seekers/wobble.css'; +@import 'attention_seekers/jello.css'; +@import 'attention_seekers/heartBeat.css'; + +/* Back entrances */ +@import 'back_entrances/backInDown.css'; +@import 'back_entrances/backInLeft.css'; +@import 'back_entrances/backInRight.css'; +@import 'back_entrances/backInUp.css'; + +/* Back exists */ +@import 'back_exits/backOutDown.css'; +@import 'back_exits/backOutLeft.css'; +@import 'back_exits/backOutRight.css'; +@import 'back_exits/backOutUp.css'; + +/* Bouncing entrances */ +@import 'bouncing_entrances/bounceIn.css'; +@import 'bouncing_entrances/bounceInDown.css'; +@import 'bouncing_entrances/bounceInLeft.css'; +@import 'bouncing_entrances/bounceInRight.css'; +@import 'bouncing_entrances/bounceInUp.css'; + +/* Bouncing exits */ +@import 'bouncing_exits/bounceOut.css'; +@import 'bouncing_exits/bounceOutDown.css'; +@import 'bouncing_exits/bounceOutLeft.css'; +@import 'bouncing_exits/bounceOutRight.css'; +@import 'bouncing_exits/bounceOutUp.css'; + +/* Fading entrances */ +@import 'fading_entrances/fadeIn.css'; +@import 'fading_entrances/fadeInDown.css'; +@import 'fading_entrances/fadeInDownBig.css'; +@import 'fading_entrances/fadeInLeft.css'; +@import 'fading_entrances/fadeInLeftBig.css'; +@import 'fading_entrances/fadeInRight.css'; +@import 'fading_entrances/fadeInRightBig.css'; +@import 'fading_entrances/fadeInUp.css'; +@import 'fading_entrances/fadeInUpBig.css'; +@import 'fading_entrances/fadeInTopLeft.css'; +@import 'fading_entrances/fadeInTopRight.css'; +@import 'fading_entrances/fadeInBottomLeft.css'; +@import 'fading_entrances/fadeInBottomRight.css'; + +/* Fading exits */ +@import 'fading_exits/fadeOut.css'; +@import 'fading_exits/fadeOutDown.css'; +@import 'fading_exits/fadeOutDownBig.css'; +@import 'fading_exits/fadeOutLeft.css'; +@import 'fading_exits/fadeOutLeftBig.css'; +@import 'fading_exits/fadeOutRight.css'; +@import 'fading_exits/fadeOutRightBig.css'; +@import 'fading_exits/fadeOutUp.css'; +@import 'fading_exits/fadeOutUpBig.css'; +@import 'fading_exits/fadeOutTopLeft.css'; +@import 'fading_exits/fadeOutTopRight.css'; +@import 'fading_exits/fadeOutBottomRight.css'; +@import 'fading_exits/fadeOutBottomLeft.css'; + +/* Flippers */ +@import 'flippers/flip.css'; +@import 'flippers/flipInX.css'; +@import 'flippers/flipInY.css'; +@import 'flippers/flipOutX.css'; +@import 'flippers/flipOutY.css'; + +/* Lightspeed */ +@import 'lightspeed/lightSpeedInRight.css'; +@import 'lightspeed/lightSpeedInLeft.css'; +@import 'lightspeed/lightSpeedOutRight.css'; +@import 'lightspeed/lightSpeedOutLeft.css'; + +/* Rotating entrances */ +@import 'rotating_entrances/rotateIn.css'; +@import 'rotating_entrances/rotateInDownLeft.css'; +@import 'rotating_entrances/rotateInDownRight.css'; +@import 'rotating_entrances/rotateInUpLeft.css'; +@import 'rotating_entrances/rotateInUpRight.css'; + +/* Rotating exits */ +@import 'rotating_exits/rotateOut.css'; +@import 'rotating_exits/rotateOutDownLeft.css'; +@import 'rotating_exits/rotateOutDownRight.css'; +@import 'rotating_exits/rotateOutUpLeft.css'; +@import 'rotating_exits/rotateOutUpRight.css'; + +/* Specials */ +@import 'specials/hinge.css'; +@import 'specials/jackInTheBox.css'; +@import 'specials/rollIn.css'; +@import 'specials/rollOut.css'; + +/* Zooming entrances */ +@import 'zooming_entrances/zoomIn.css'; +@import 'zooming_entrances/zoomInDown.css'; +@import 'zooming_entrances/zoomInLeft.css'; +@import 'zooming_entrances/zoomInRight.css'; +@import 'zooming_entrances/zoomInUp.css'; + +/* Zooming exits */ +@import 'zooming_exits/zoomOut.css'; +@import 'zooming_exits/zoomOutDown.css'; +@import 'zooming_exits/zoomOutLeft.css'; +@import 'zooming_exits/zoomOutRight.css'; +@import 'zooming_exits/zoomOutUp.css'; + +/* Sliding entrances */ +@import 'sliding_entrances/slideInDown.css'; +@import 'sliding_entrances/slideInLeft.css'; +@import 'sliding_entrances/slideInRight.css'; +@import 'sliding_entrances/slideInUp.css'; + +/* Sliding exits */ +@import 'sliding_exits/slideOutDown.css'; +@import 'sliding_exits/slideOutLeft.css'; +@import 'sliding_exits/slideOutRight.css'; +@import 'sliding_exits/slideOutUp.css'; diff --git a/source/attention_seekers/bounce.css b/source/attention_seekers/bounce.css index b43a8f0..d0cf19b 100644 --- a/source/attention_seekers/bounce.css +++ b/source/attention_seekers/bounce.css @@ -2,7 +2,6 @@ from, 20%, 53%, - 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0); @@ -11,16 +10,21 @@ 40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0) scaleY(1.05); + } + + 80% { + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transform: translate3d(0, 0, 0) scaleY(0.95); } 90% { - transform: translate3d(0, -4px, 0); + transform: translate3d(0, -4px, 0) scaleY(1.02); } } diff --git a/source/attention_seekers/heartBeat.css b/source/attention_seekers/heartBeat.css index 96b8a78..59204ba 100644 --- a/source/attention_seekers/heartBeat.css +++ b/source/attention_seekers/heartBeat.css @@ -22,6 +22,6 @@ .heartBeat { animation-name: heartBeat; - animation-duration: 1.3s; + animation-duration: calc(var(--animate-duration) * 1.3); animation-timing-function: ease-in-out; } diff --git a/source/attention_seekers/pulse.css b/source/attention_seekers/pulse.css index 3386a7b..28d2803 100644 --- a/source/attention_seekers/pulse.css +++ b/source/attention_seekers/pulse.css @@ -16,4 +16,5 @@ .pulse { animation-name: pulse; + animation-timing-function: ease-in-out; } diff --git a/source/attention_seekers/shakeX.css b/source/attention_seekers/shakeX.css new file mode 100644 index 0000000..860fd5e --- /dev/null +++ b/source/attention_seekers/shakeX.css @@ -0,0 +1,25 @@ +@keyframes shakeX { + from, + to { + transform: translate3d(0, 0, 0); + } + + 10%, + 30%, + 50%, + 70%, + 90% { + transform: translate3d(-10px, 0, 0); + } + + 20%, + 40%, + 60%, + 80% { + transform: translate3d(10px, 0, 0); + } +} + +.shakeX { + animation-name: shakeX; +} diff --git a/source/attention_seekers/shakeY.css b/source/attention_seekers/shakeY.css new file mode 100644 index 0000000..07bfdab --- /dev/null +++ b/source/attention_seekers/shakeY.css @@ -0,0 +1,25 @@ +@keyframes shakeY { + from, + to { + transform: translate3d(0, 0, 0); + } + + 10%, + 30%, + 50%, + 70%, + 90% { + transform: translate3d(0, -10px, 0); + } + + 20%, + 40%, + 60%, + 80% { + transform: translate3d(0, 10px, 0); + } +} + +.shakeY { + animation-name: shakeY; +} diff --git a/source/back_entrances/backInDown.css b/source/back_entrances/backInDown.css new file mode 100644 index 0000000..36e358a --- /dev/null +++ b/source/back_entrances/backInDown.css @@ -0,0 +1,20 @@ +@keyframes backInDown { + 0% { + transform: translateY(-1200px) scale(0.7); + opacity: 0.7; + } + + 80% { + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +.backInDown { + animation-name: backInDown; +} diff --git a/source/back_entrances/backInLeft.css b/source/back_entrances/backInLeft.css new file mode 100644 index 0000000..ca7628b --- /dev/null +++ b/source/back_entrances/backInLeft.css @@ -0,0 +1,20 @@ +@keyframes backInLeft { + 0% { + transform: translateX(-2000px) scale(0.7); + opacity: 0.7; + } + + 80% { + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +.backInLeft { + animation-name: backInLeft; +} diff --git a/source/back_entrances/backInRight.css b/source/back_entrances/backInRight.css new file mode 100644 index 0000000..4bf8930 --- /dev/null +++ b/source/back_entrances/backInRight.css @@ -0,0 +1,20 @@ +@keyframes backInRight { + 0% { + transform: translateX(2000px) scale(0.7); + opacity: 0.7; + } + + 80% { + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +.backInRight { + animation-name: backInRight; +} diff --git a/source/back_entrances/backInUp.css b/source/back_entrances/backInUp.css new file mode 100644 index 0000000..621fc68 --- /dev/null +++ b/source/back_entrances/backInUp.css @@ -0,0 +1,20 @@ +@keyframes backInUp { + 0% { + transform: translateY(1200px) scale(0.7); + opacity: 0.7; + } + + 80% { + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +.backInUp { + animation-name: backInUp; +} diff --git a/source/back_exits/backOutDown.css b/source/back_exits/backOutDown.css new file mode 100644 index 0000000..4273c9b --- /dev/null +++ b/source/back_exits/backOutDown.css @@ -0,0 +1,20 @@ +@keyframes backOutDown { + 0% { + transform: scale(1); + opacity: 1; + } + + 20% { + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + transform: translateY(700px) scale(0.7); + opacity: 0.7; + } +} + +.backOutDown { + animation-name: backOutDown; +} diff --git a/source/back_exits/backOutLeft.css b/source/back_exits/backOutLeft.css new file mode 100644 index 0000000..35b4114 --- /dev/null +++ b/source/back_exits/backOutLeft.css @@ -0,0 +1,20 @@ +@keyframes backOutLeft { + 0% { + transform: scale(1); + opacity: 1; + } + + 20% { + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + transform: translateX(-2000px) scale(0.7); + opacity: 0.7; + } +} + +.backOutLeft { + animation-name: backOutLeft; +} diff --git a/source/back_exits/backOutRight.css b/source/back_exits/backOutRight.css new file mode 100644 index 0000000..8ceeb19 --- /dev/null +++ b/source/back_exits/backOutRight.css @@ -0,0 +1,20 @@ +@keyframes backOutRight { + 0% { + transform: scale(1); + opacity: 1; + } + + 20% { + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + transform: translateX(2000px) scale(0.7); + opacity: 0.7; + } +} + +.backOutRight { + animation-name: backOutRight; +} diff --git a/source/back_exits/backOutUp.css b/source/back_exits/backOutUp.css new file mode 100644 index 0000000..8d4e5f4 --- /dev/null +++ b/source/back_exits/backOutUp.css @@ -0,0 +1,20 @@ +@keyframes backOutUp { + 0% { + transform: scale(1); + opacity: 1; + } + + 20% { + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + transform: translateY(-700px) scale(0.7); + opacity: 0.7; + } +} + +.backOutUp { + animation-name: backOutUp; +} diff --git a/source/bouncing_entrances/bounceIn.css b/source/bouncing_entrances/bounceIn.css index 2c37bfe..d0bbf34 100644 --- a/source/bouncing_entrances/bounceIn.css +++ b/source/bouncing_entrances/bounceIn.css @@ -37,6 +37,6 @@ } .bounceIn { - animation-duration: 0.75s; + animation-duration: calc(var(--animate-duration) * 0.75); animation-name: bounceIn; } diff --git a/source/bouncing_entrances/bounceInDown.css b/source/bouncing_entrances/bounceInDown.css index 48912e0..3063365 100644 --- a/source/bouncing_entrances/bounceInDown.css +++ b/source/bouncing_entrances/bounceInDown.css @@ -9,20 +9,20 @@ 0% { opacity: 0; - transform: translate3d(0, -3000px, 0); + transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; - transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { - transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { - transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0) scaleY(0.985); } to { diff --git a/source/bouncing_entrances/bounceInLeft.css b/source/bouncing_entrances/bounceInLeft.css index db35c59..c0ac842 100644 --- a/source/bouncing_entrances/bounceInLeft.css +++ b/source/bouncing_entrances/bounceInLeft.css @@ -9,20 +9,20 @@ 0% { opacity: 0; - transform: translate3d(-3000px, 0, 0); + transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; - transform: translate3d(25px, 0, 0); + transform: translate3d(25px, 0, 0) scaleX(1); } 75% { - transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { - transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0) scaleX(0.995); } to { diff --git a/source/bouncing_entrances/bounceInRight.css b/source/bouncing_entrances/bounceInRight.css index b61913e..7c4b4af 100644 --- a/source/bouncing_entrances/bounceInRight.css +++ b/source/bouncing_entrances/bounceInRight.css @@ -9,20 +9,20 @@ from { opacity: 0; - transform: translate3d(3000px, 0, 0); + transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; - transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { - transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { - transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { diff --git a/source/bouncing_entrances/bounceInUp.css b/source/bouncing_entrances/bounceInUp.css index eca199c..954caf9 100644 --- a/source/bouncing_entrances/bounceInUp.css +++ b/source/bouncing_entrances/bounceInUp.css @@ -9,20 +9,20 @@ from { opacity: 0; - transform: translate3d(0, 3000px, 0); + transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; - transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { - transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { - transform: translate3d(0, -5px, 0); + transform: translate3d(0, -5px, 0) scaleY(0.985); } to { diff --git a/source/bouncing_exits/bounceOut.css b/source/bouncing_exits/bounceOut.css index 5b26b69..f19ddad 100644 --- a/source/bouncing_exits/bounceOut.css +++ b/source/bouncing_exits/bounceOut.css @@ -16,6 +16,6 @@ } .bounceOut { - animation-duration: 0.75s; + animation-duration: calc(var(--animate-duration) * 0.75); animation-name: bounceOut; } diff --git a/source/bouncing_exits/bounceOutDown.css b/source/bouncing_exits/bounceOutDown.css index de29f35..61c83c6 100644 --- a/source/bouncing_exits/bounceOutDown.css +++ b/source/bouncing_exits/bounceOutDown.css @@ -1,17 +1,17 @@ @keyframes bounceOutDown { 20% { - transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; - transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; - transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0) scaleY(3); } } diff --git a/source/bouncing_exits/bounceOutLeft.css b/source/bouncing_exits/bounceOutLeft.css index 0c03a9e..8d08e94 100644 --- a/source/bouncing_exits/bounceOutLeft.css +++ b/source/bouncing_exits/bounceOutLeft.css @@ -1,12 +1,12 @@ @keyframes bounceOutLeft { 20% { opacity: 1; - transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; - transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0) scaleX(2); } } diff --git a/source/bouncing_exits/bounceOutRight.css b/source/bouncing_exits/bounceOutRight.css index 0f0bf9d..f0684ba 100644 --- a/source/bouncing_exits/bounceOutRight.css +++ b/source/bouncing_exits/bounceOutRight.css @@ -1,12 +1,12 @@ @keyframes bounceOutRight { 20% { opacity: 1; - transform: translate3d(-20px, 0, 0); + transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; - transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0) scaleX(2); } } diff --git a/source/bouncing_exits/bounceOutUp.css b/source/bouncing_exits/bounceOutUp.css index d2b6233..4811adf 100644 --- a/source/bouncing_exits/bounceOutUp.css +++ b/source/bouncing_exits/bounceOutUp.css @@ -1,17 +1,17 @@ @keyframes bounceOutUp { 20% { - transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; - transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; - transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0) scaleY(3); } } diff --git a/source/fading_entrances/fadeInBottomLeft.css b/source/fading_entrances/fadeInBottomLeft.css new file mode 100644 index 0000000..1efef19 --- /dev/null +++ b/source/fading_entrances/fadeInBottomLeft.css @@ -0,0 +1,14 @@ +@keyframes fadeInBottomLeft { + from { + opacity: 0; + transform: translate3d(-100%, 100%, 0); + } + to { + opacity: 1; + transform: translate3d(0, 0, 0); + } +} + +.fadeInBottomLeft { + animation-name: fadeInBottomLeft; +} diff --git a/source/fading_entrances/fadeInBottomRight.css b/source/fading_entrances/fadeInBottomRight.css new file mode 100644 index 0000000..f551c57 --- /dev/null +++ b/source/fading_entrances/fadeInBottomRight.css @@ -0,0 +1,14 @@ +@keyframes fadeInBottomRight { + from { + opacity: 0; + transform: translate3d(100%, 100%, 0); + } + to { + opacity: 1; + transform: translate3d(0, 0, 0); + } +} + +.fadeInBottomRight { + animation-name: fadeInBottomRight; +} diff --git a/source/fading_entrances/fadeInTopLeft.css b/source/fading_entrances/fadeInTopLeft.css new file mode 100644 index 0000000..cfcf37f --- /dev/null +++ b/source/fading_entrances/fadeInTopLeft.css @@ -0,0 +1,14 @@ +@keyframes fadeInTopLeft { + from { + opacity: 0; + transform: translate3d(-100%, -100%, 0); + } + to { + opacity: 1; + transform: translate3d(0, 0, 0); + } +} + +.fadeInTopLeft { + animation-name: fadeInTopLeft; +} diff --git a/source/fading_entrances/fadeInTopRight.css b/source/fading_entrances/fadeInTopRight.css new file mode 100644 index 0000000..900cfd9 --- /dev/null +++ b/source/fading_entrances/fadeInTopRight.css @@ -0,0 +1,14 @@ +@keyframes fadeInTopRight { + from { + opacity: 0; + transform: translate3d(100%, -100%, 0); + } + to { + opacity: 1; + transform: translate3d(0, 0, 0); + } +} + +.fadeInTopRight { + animation-name: fadeInTopRight; +} diff --git a/source/fading_exits/fadeOutBottomLeft.css b/source/fading_exits/fadeOutBottomLeft.css new file mode 100644 index 0000000..72f33e9 --- /dev/null +++ b/source/fading_exits/fadeOutBottomLeft.css @@ -0,0 +1,14 @@ +@keyframes fadeOutBottomLeft { + from { + opacity: 1; + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + transform: translate3d(-100%, 100%, 0); + } +} + +.fadeOutBottomLeft { + animation-name: fadeOutBottomLeft; +} diff --git a/source/fading_exits/fadeOutBottomRight.css b/source/fading_exits/fadeOutBottomRight.css new file mode 100644 index 0000000..dcc5f38 --- /dev/null +++ b/source/fading_exits/fadeOutBottomRight.css @@ -0,0 +1,14 @@ +@keyframes fadeOutBottomRight { + from { + opacity: 1; + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + transform: translate3d(100%, 100%, 0); + } +} + +.fadeOutBottomRight { + animation-name: fadeOutBottomRight; +} diff --git a/source/fading_exits/fadeOutTopLeft.css b/source/fading_exits/fadeOutTopLeft.css new file mode 100644 index 0000000..87d4de0 --- /dev/null +++ b/source/fading_exits/fadeOutTopLeft.css @@ -0,0 +1,14 @@ +@keyframes fadeOutTopLeft { + from { + opacity: 1; + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + transform: translate3d(-100%, -100%, 0); + } +} + +.fadeOutTopLeft { + animation-name: fadeOutTopLeft; +} diff --git a/source/fading_exits/fadeOutTopRight.css b/source/fading_exits/fadeOutTopRight.css new file mode 100644 index 0000000..65bcc18 --- /dev/null +++ b/source/fading_exits/fadeOutTopRight.css @@ -0,0 +1,14 @@ +@keyframes fadeOutTopRight { + from { + opacity: 1; + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + transform: translate3d(100%, -100%, 0); + } +} + +.fadeOutTopRight { + animation-name: fadeOutTopRight; +} diff --git a/source/flippers/flipOutX.css b/source/flippers/flipOutX.css index 38c51e2..67720ab 100644 --- a/source/flippers/flipOutX.css +++ b/source/flippers/flipOutX.css @@ -15,7 +15,7 @@ } .flipOutX { - animation-duration: 0.75s; + animation-duration: calc(var(--animate-duration) * 0.75); animation-name: flipOutX; backface-visibility: visible !important; } diff --git a/source/flippers/flipOutY.css b/source/flippers/flipOutY.css index 04073c8..cd791b3 100644 --- a/source/flippers/flipOutY.css +++ b/source/flippers/flipOutY.css @@ -15,7 +15,7 @@ } .flipOutY { - animation-duration: 0.75s; + animation-duration: calc(var(--animate-duration) * 0.75); backface-visibility: visible !important; animation-name: flipOutY; } diff --git a/source/lightspeed/lightSpeedInLeft.css b/source/lightspeed/lightSpeedInLeft.css new file mode 100644 index 0000000..8d57912 --- /dev/null +++ b/source/lightspeed/lightSpeedInLeft.css @@ -0,0 +1,24 @@ +@keyframes lightSpeedInLeft { + from { + transform: translate3d(-100%, 0, 0) skewX(30deg); + opacity: 0; + } + + 60% { + transform: skewX(-20deg); + opacity: 1; + } + + 80% { + transform: skewX(5deg); + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.lightSpeedInLeft { + animation-name: lightSpeedInLeft; + animation-timing-function: ease-out; +} diff --git a/source/lightspeed/lightSpeedIn.css b/source/lightspeed/lightSpeedInRight.css similarity index 75% rename from source/lightspeed/lightSpeedIn.css rename to source/lightspeed/lightSpeedInRight.css index 0f6d005..e52e917 100644 --- a/source/lightspeed/lightSpeedIn.css +++ b/source/lightspeed/lightSpeedInRight.css @@ -1,4 +1,4 @@ -@keyframes lightSpeedIn { +@keyframes lightSpeedInRight { from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; @@ -18,7 +18,7 @@ } } -.lightSpeedIn { - animation-name: lightSpeedIn; +.lightSpeedInRight { + animation-name: lightSpeedInRight; animation-timing-function: ease-out; } diff --git a/source/lightspeed/lightSpeedOutLeft.css b/source/lightspeed/lightSpeedOutLeft.css new file mode 100644 index 0000000..55edc44 --- /dev/null +++ b/source/lightspeed/lightSpeedOutLeft.css @@ -0,0 +1,15 @@ +@keyframes lightSpeedOutLeft { + from { + opacity: 1; + } + + to { + transform: translate3d(-100%, 0, 0) skewX(-30deg); + opacity: 0; + } +} + +.lightSpeedOutLeft { + animation-name: lightSpeedOutLeft; + animation-timing-function: ease-in; +} diff --git a/source/lightspeed/lightSpeedOut.css b/source/lightspeed/lightSpeedOutRight.css similarity index 62% rename from source/lightspeed/lightSpeedOut.css rename to source/lightspeed/lightSpeedOutRight.css index b328dcc..dabaf61 100644 --- a/source/lightspeed/lightSpeedOut.css +++ b/source/lightspeed/lightSpeedOutRight.css @@ -1,4 +1,4 @@ -@keyframes lightSpeedOut { +@keyframes lightSpeedOutRight { from { opacity: 1; } @@ -9,7 +9,7 @@ } } -.lightSpeedOut { - animation-name: lightSpeedOut; +.lightSpeedOutRight { + animation-name: lightSpeedOutRight; animation-timing-function: ease-in; } diff --git a/source/rotating_entrances/rotateIn.css b/source/rotating_entrances/rotateIn.css index f5bb1ae..e62b2ea 100644 --- a/source/rotating_entrances/rotateIn.css +++ b/source/rotating_entrances/rotateIn.css @@ -1,12 +1,10 @@ @keyframes rotateIn { from { - transform-origin: center; transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { - transform-origin: center; transform: translate3d(0, 0, 0); opacity: 1; } @@ -14,4 +12,5 @@ .rotateIn { animation-name: rotateIn; + transform-origin: center; } diff --git a/source/rotating_entrances/rotateInDownLeft.css b/source/rotating_entrances/rotateInDownLeft.css index 6b90b76..85af5c6 100644 --- a/source/rotating_entrances/rotateInDownLeft.css +++ b/source/rotating_entrances/rotateInDownLeft.css @@ -1,12 +1,10 @@ @keyframes rotateInDownLeft { from { - transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { - transform-origin: left bottom; transform: translate3d(0, 0, 0); opacity: 1; } @@ -14,4 +12,5 @@ .rotateInDownLeft { animation-name: rotateInDownLeft; + transform-origin: left bottom; } diff --git a/source/rotating_entrances/rotateInDownRight.css b/source/rotating_entrances/rotateInDownRight.css index 885cf18..00029d8 100644 --- a/source/rotating_entrances/rotateInDownRight.css +++ b/source/rotating_entrances/rotateInDownRight.css @@ -1,12 +1,10 @@ @keyframes rotateInDownRight { from { - transform-origin: right bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { - transform-origin: right bottom; transform: translate3d(0, 0, 0); opacity: 1; } @@ -14,4 +12,5 @@ .rotateInDownRight { animation-name: rotateInDownRight; + transform-origin: right bottom; } diff --git a/source/rotating_entrances/rotateInUpLeft.css b/source/rotating_entrances/rotateInUpLeft.css index b70caf4..b29ce91 100644 --- a/source/rotating_entrances/rotateInUpLeft.css +++ b/source/rotating_entrances/rotateInUpLeft.css @@ -1,12 +1,10 @@ @keyframes rotateInUpLeft { from { - transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { - transform-origin: left bottom; transform: translate3d(0, 0, 0); opacity: 1; } @@ -14,4 +12,5 @@ .rotateInUpLeft { animation-name: rotateInUpLeft; + transform-origin: left bottom; } diff --git a/source/rotating_entrances/rotateInUpRight.css b/source/rotating_entrances/rotateInUpRight.css index 77a5a17..8b0ea1b 100644 --- a/source/rotating_entrances/rotateInUpRight.css +++ b/source/rotating_entrances/rotateInUpRight.css @@ -1,12 +1,10 @@ @keyframes rotateInUpRight { from { - transform-origin: right bottom; transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { - transform-origin: right bottom; transform: translate3d(0, 0, 0); opacity: 1; } @@ -14,4 +12,5 @@ .rotateInUpRight { animation-name: rotateInUpRight; + transform-origin: right bottom; } diff --git a/source/rotating_exits/rotateOut.css b/source/rotating_exits/rotateOut.css index 6325006..914c904 100644 --- a/source/rotating_exits/rotateOut.css +++ b/source/rotating_exits/rotateOut.css @@ -1,11 +1,9 @@ @keyframes rotateOut { from { - transform-origin: center; opacity: 1; } to { - transform-origin: center; transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } @@ -13,4 +11,5 @@ .rotateOut { animation-name: rotateOut; + transform-origin: center; } diff --git a/source/rotating_exits/rotateOutDownLeft.css b/source/rotating_exits/rotateOutDownLeft.css index 11595b4..c4ccabc 100644 --- a/source/rotating_exits/rotateOutDownLeft.css +++ b/source/rotating_exits/rotateOutDownLeft.css @@ -1,11 +1,9 @@ @keyframes rotateOutDownLeft { from { - transform-origin: left bottom; opacity: 1; } to { - transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } @@ -13,4 +11,5 @@ .rotateOutDownLeft { animation-name: rotateOutDownLeft; + transform-origin: left bottom; } diff --git a/source/rotating_exits/rotateOutDownRight.css b/source/rotating_exits/rotateOutDownRight.css index 9bf03da..81113fe 100644 --- a/source/rotating_exits/rotateOutDownRight.css +++ b/source/rotating_exits/rotateOutDownRight.css @@ -1,11 +1,9 @@ @keyframes rotateOutDownRight { from { - transform-origin: right bottom; opacity: 1; } to { - transform-origin: right bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } @@ -13,4 +11,5 @@ .rotateOutDownRight { animation-name: rotateOutDownRight; + transform-origin: right bottom; } diff --git a/source/rotating_exits/rotateOutUpLeft.css b/source/rotating_exits/rotateOutUpLeft.css index 6f6815d..885c9d0 100644 --- a/source/rotating_exits/rotateOutUpLeft.css +++ b/source/rotating_exits/rotateOutUpLeft.css @@ -1,11 +1,9 @@ @keyframes rotateOutUpLeft { from { - transform-origin: left bottom; opacity: 1; } to { - transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } @@ -13,4 +11,5 @@ .rotateOutUpLeft { animation-name: rotateOutUpLeft; + transform-origin: left bottom; } diff --git a/source/rotating_exits/rotateOutUpRight.css b/source/rotating_exits/rotateOutUpRight.css index 2fdeb6b..3ac68fb 100644 --- a/source/rotating_exits/rotateOutUpRight.css +++ b/source/rotating_exits/rotateOutUpRight.css @@ -1,11 +1,9 @@ @keyframes rotateOutUpRight { from { - transform-origin: right bottom; opacity: 1; } to { - transform-origin: right bottom; transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } @@ -13,4 +11,5 @@ .rotateOutUpRight { animation-name: rotateOutUpRight; + transform-origin: right bottom; } diff --git a/source/specials/hinge.css b/source/specials/hinge.css index ee0e7b2..a728ea7 100644 --- a/source/specials/hinge.css +++ b/source/specials/hinge.css @@ -1,20 +1,17 @@ @keyframes hinge { 0% { - transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate3d(0, 0, 1, 80deg); - transform-origin: top left; animation-timing-function: ease-in-out; } 40%, 80% { transform: rotate3d(0, 0, 1, 60deg); - transform-origin: top left; animation-timing-function: ease-in-out; opacity: 1; } @@ -26,6 +23,7 @@ } .hinge { - animation-duration: 2s; + animation-duration: calc(var(--animate-duration) * 2); animation-name: hinge; + transform-origin: top left; } diff --git a/source/zooming_exits/zoomOutDown.css b/source/zooming_exits/zoomOutDown.css index b463d10..168e0a7 100644 --- a/source/zooming_exits/zoomOutDown.css +++ b/source/zooming_exits/zoomOutDown.css @@ -8,11 +8,11 @@ to { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); - transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { animation-name: zoomOutDown; + transform-origin: center bottom; } diff --git a/source/zooming_exits/zoomOutLeft.css b/source/zooming_exits/zoomOutLeft.css index 9b82a74..6875365 100644 --- a/source/zooming_exits/zoomOutLeft.css +++ b/source/zooming_exits/zoomOutLeft.css @@ -7,10 +7,10 @@ to { opacity: 0; transform: scale(0.1) translate3d(-2000px, 0, 0); - transform-origin: left center; } } .zoomOutLeft { animation-name: zoomOutLeft; + transform-origin: left center; } diff --git a/source/zooming_exits/zoomOutRight.css b/source/zooming_exits/zoomOutRight.css index e574758..76ec95a 100644 --- a/source/zooming_exits/zoomOutRight.css +++ b/source/zooming_exits/zoomOutRight.css @@ -7,10 +7,10 @@ to { opacity: 0; transform: scale(0.1) translate3d(2000px, 0, 0); - transform-origin: right center; } } .zoomOutRight { animation-name: zoomOutRight; + transform-origin: right center; } diff --git a/source/zooming_exits/zoomOutUp.css b/source/zooming_exits/zoomOutUp.css index e398d51..a4e5051 100644 --- a/source/zooming_exits/zoomOutUp.css +++ b/source/zooming_exits/zoomOutUp.css @@ -8,11 +8,11 @@ to { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); - transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { animation-name: zoomOutUp; + transform-origin: center bottom; }