├── .husky ├── .gitignore └── pre-commit ├── docs ├── CNAME ├── img │ ├── favicon.ico │ └── animatecss-opengraph.jpg ├── modules │ ├── toggle.mjs │ ├── slowDownAnimations.mjs │ ├── darkMode.mjs │ ├── startAnimations.mjs │ ├── buildDocsIndex.mjs │ └── playground.mjs ├── main.mjs └── style.css ├── .prettierignore ├── source ├── _vars.css ├── fading_entrances │ ├── fadeIn.css │ ├── fadeInUp.css │ ├── fadeInDown.css │ ├── fadeInLeft.css │ ├── fadeInRight.css │ ├── fadeInUpBig.css │ ├── fadeInTopLeft.css │ ├── fadeInDownBig.css │ ├── fadeInLeftBig.css │ ├── fadeInTopRight.css │ ├── fadeInBottomLeft.css │ ├── fadeInRightBig.css │ └── fadeInBottomRight.css ├── fading_exits │ ├── fadeOut.css │ ├── fadeOutUp.css │ ├── fadeOutDown.css │ ├── fadeOutLeft.css │ ├── fadeOutRight.css │ ├── fadeOutUpBig.css │ ├── fadeOutDownBig.css │ ├── fadeOutLeftBig.css │ ├── fadeOutRightBig.css │ ├── fadeOutTopLeft.css │ ├── fadeOutTopRight.css │ ├── fadeOutBottomLeft.css │ └── fadeOutBottomRight.css ├── attention_seekers │ ├── flash.css │ ├── shake.css │ ├── shakeX.css │ ├── shakeY.css │ ├── pulse.css │ ├── swing.css │ ├── heartBeat.css │ ├── tada.css │ ├── headShake.css │ ├── rubberBand.css │ ├── wobble.css │ ├── jello.css │ └── bounce.css ├── zooming_entrances │ ├── zoomIn.css │ ├── zoomInUp.css │ ├── zoomInDown.css │ ├── zoomInLeft.css │ └── zoomInRight.css ├── rotating_exits │ ├── rotateOut.css │ ├── rotateOutUpLeft.css │ ├── rotateOutUpRight.css │ ├── rotateOutDownLeft.css │ └── rotateOutDownRight.css ├── sliding_entrances │ ├── slideInUp.css │ ├── slideInDown.css │ ├── slideInLeft.css │ └── slideInRight.css ├── sliding_exits │ ├── slideOutUp.css │ ├── slideOutDown.css │ ├── slideOutLeft.css │ └── slideOutRight.css ├── zooming_exits │ ├── zoomOut.css │ ├── zoomOutLeft.css │ ├── zoomOutRight.css │ ├── zoomOutUp.css │ └── zoomOutDown.css ├── rotating_entrances │ ├── rotateIn.css │ ├── rotateInUpLeft.css │ ├── rotateInDownLeft.css │ ├── rotateInUpRight.css │ └── rotateInDownRight.css ├── bouncing_exits │ ├── bounceOutLeft.css │ ├── bounceOutRight.css │ ├── bounceOutUp.css │ ├── bounceOutDown.css │ └── bounceOut.css ├── lightspeed │ ├── lightSpeedOutLeft.css │ ├── lightSpeedOutRight.css │ ├── lightSpeedInLeft.css │ └── lightSpeedInRight.css ├── specials │ ├── rollOut.css │ ├── rollIn.css │ ├── jackInTheBox.css │ └── hinge.css ├── back_entrances │ ├── backInUp.css │ ├── backInDown.css │ ├── backInLeft.css │ └── backInRight.css ├── back_exits │ ├── backOutUp.css │ ├── backOutDown.css │ ├── backOutLeft.css │ └── backOutRight.css ├── flippers │ ├── flipOutX.css │ ├── flipOutY.css │ ├── flipInX.css │ ├── flipInY.css │ └── flip.css ├── bouncing_entrances │ ├── bounceInUp.css │ ├── bounceInLeft.css │ ├── bounceInDown.css │ ├── bounceInRight.css │ └── bounceIn.css ├── _base.css └── animate.css ├── .travis.yml ├── .prettierrc ├── .gitignore ├── .github ├── dependabot.yml ├── ISSUE_TEMPLATE │ ├── features.yml │ └── bugs.yml └── workflows │ └── codeql-analysis.yml ├── .editorconfig ├── SECURITY.md ├── docsSource ├── sections │ ├── 00-intro.md │ ├── 08-accessibility.md │ ├── 09-contributors.md │ ├── 09-license-contributing.md │ ├── 06-migration.md │ ├── 07-custom-builds.md │ ├── 04-javascript.md │ ├── 01-usage.md │ ├── 02-utilities.md │ └── 03-best-practices.md ├── index.js ├── compileMD.js ├── compileAnimationList.js └── template.html ├── postcss.config.js ├── package.json ├── CONTRIBUTING.md ├── README.md ├── CODE_OF_CONDUCT.md ├── LICENSE └── animate.compat.css /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | animate.style -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /docs/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/malaidev/Animate-CSS/HEAD/docs/img/favicon.ico -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | animate.css 2 | animate.min.css 3 | animate.compat.css 4 | docs/dist/animate.min.css 5 | -------------------------------------------------------------------------------- /source/_vars.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --animate-duration: 1s; 3 | --animate-delay: 1s; 4 | --animate-repeat: 1; 5 | } 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "10" 4 | before_script: 5 | - npm install 6 | script: npm run start 7 | -------------------------------------------------------------------------------- /docs/img/animatecss-opengraph.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/malaidev/Animate-CSS/HEAD/docs/img/animatecss-opengraph.jpg -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "bracketSpacing": false, 3 | "proseWrap": "never", 4 | "singleQuote": true, 5 | "trailingComma": "all" 6 | } 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .db 2 | .DS_Store 3 | .idea 4 | .ini 5 | .log 6 | .sass-cache 7 | node_modules/ 8 | test/ 9 | npm-shrinkwrap.json 10 | package-lock.json 11 | .jshintrc -------------------------------------------------------------------------------- /source/fading_entrances/fadeIn.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeIn { 2 | from { 3 | opacity: 0; 4 | } 5 | 6 | to { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | .fadeIn { 12 | animation-name: fadeIn; 13 | } 14 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOut.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOut { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | } 9 | } 10 | 11 | .fadeOut { 12 | animation-name: fadeOut; 13 | } 14 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: "/" 5 | schedule: 6 | interval: daily 7 | open-pull-requests-limit: 10 8 | reviewers: 9 | - "daneden" 10 | - "eltonmesquita" 11 | -------------------------------------------------------------------------------- /source/attention_seekers/flash.css: -------------------------------------------------------------------------------- 1 | @keyframes flash { 2 | from, 3 | 50%, 4 | to { 5 | opacity: 1; 6 | } 7 | 8 | 25%, 9 | 75% { 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .flash { 15 | animation-name: flash; 16 | } 17 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomIn.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomIn { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(0.3, 0.3, 0.3); 5 | } 6 | 7 | 50% { 8 | opacity: 1; 9 | } 10 | } 11 | 12 | .zoomIn { 13 | animation-name: zoomIn; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutUp { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | transform: translate3d(0, -100%, 0); 9 | } 10 | } 11 | 12 | .fadeOutUp { 13 | animation-name: fadeOutUp; 14 | } 15 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_size = 2 8 | indent_style = space 9 | insert_final_newline = true 10 | max_line_length = 100 11 | tab_width = 2 12 | trim_trailing_whitespace = true 13 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | If you discover a security issue in this repository, please contact us with this email animate@eltonmesquita.com. 4 | 5 | Thanks for helping make our open-source projects safe for everyone, we really appreciate it. 6 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutDown { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | transform: translate3d(0, 100%, 0); 9 | } 10 | } 11 | 12 | .fadeOutDown { 13 | animation-name: fadeOutDown; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutLeft { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | transform: translate3d(-100%, 0, 0); 9 | } 10 | } 11 | 12 | .fadeOutLeft { 13 | animation-name: fadeOutLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutRight { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | transform: translate3d(100%, 0, 0); 9 | } 10 | } 11 | 12 | .fadeOutRight { 13 | animation-name: fadeOutRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutUpBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutUpBig { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | transform: translate3d(0, -2000px, 0); 9 | } 10 | } 11 | 12 | .fadeOutUpBig { 13 | animation-name: fadeOutUpBig; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutDownBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutDownBig { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | transform: translate3d(0, 2000px, 0); 9 | } 10 | } 11 | 12 | .fadeOutDownBig { 13 | animation-name: fadeOutDownBig; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutLeftBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutLeftBig { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | transform: translate3d(-2000px, 0, 0); 9 | } 10 | } 11 | 12 | .fadeOutLeftBig { 13 | animation-name: fadeOutLeftBig; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutRightBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutRightBig { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | transform: translate3d(2000px, 0, 0); 9 | } 10 | } 11 | 12 | .fadeOutRightBig { 13 | animation-name: fadeOutRightBig; 14 | } 15 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOut.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOut { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | transform: rotate3d(0, 0, 1, 200deg); 8 | opacity: 0; 9 | } 10 | } 11 | 12 | .rotateOut { 13 | animation-name: rotateOut; 14 | transform-origin: center; 15 | } 16 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInUp { 2 | from { 3 | transform: translate3d(0, 100%, 0); 4 | visibility: visible; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .slideInUp { 13 | animation-name: slideInUp; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutUp { 2 | from { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | to { 7 | visibility: hidden; 8 | transform: translate3d(0, -100%, 0); 9 | } 10 | } 11 | 12 | .slideOutUp { 13 | animation-name: slideOutUp; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInUp { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(0, 100%, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: translate3d(0, 0, 0); 10 | } 11 | } 12 | 13 | .fadeInUp { 14 | animation-name: fadeInUp; 15 | } 16 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutDown { 2 | from { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | to { 7 | visibility: hidden; 8 | transform: translate3d(0, 100%, 0); 9 | } 10 | } 11 | 12 | .slideOutDown { 13 | animation-name: slideOutDown; 14 | } 15 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOut.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOut { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | 50% { 7 | opacity: 0; 8 | transform: scale3d(0.3, 0.3, 0.3); 9 | } 10 | 11 | to { 12 | opacity: 0; 13 | } 14 | } 15 | 16 | .zoomOut { 17 | animation-name: zoomOut; 18 | } 19 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInDown { 2 | from { 3 | transform: translate3d(0, -100%, 0); 4 | visibility: visible; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .slideInDown { 13 | animation-name: slideInDown; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInLeft { 2 | from { 3 | transform: translate3d(-100%, 0, 0); 4 | visibility: visible; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .slideInLeft { 13 | animation-name: slideInLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInRight { 2 | from { 3 | transform: translate3d(100%, 0, 0); 4 | visibility: visible; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .slideInRight { 13 | animation-name: slideInRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutLeft { 2 | from { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | to { 7 | visibility: hidden; 8 | transform: translate3d(-100%, 0, 0); 9 | } 10 | } 11 | 12 | .slideOutLeft { 13 | animation-name: slideOutLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutRight { 2 | from { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | to { 7 | visibility: hidden; 8 | transform: translate3d(100%, 0, 0); 9 | } 10 | } 11 | 12 | .slideOutRight { 13 | animation-name: slideOutRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInDown { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(0, -100%, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: translate3d(0, 0, 0); 10 | } 11 | } 12 | 13 | .fadeInDown { 14 | animation-name: fadeInDown; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInLeft { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(-100%, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: translate3d(0, 0, 0); 10 | } 11 | } 12 | 13 | .fadeInLeft { 14 | animation-name: fadeInLeft; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInRight { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(100%, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: translate3d(0, 0, 0); 10 | } 11 | } 12 | 13 | .fadeInRight { 14 | animation-name: fadeInRight; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInUpBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInUpBig { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(0, 2000px, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: translate3d(0, 0, 0); 10 | } 11 | } 12 | 13 | .fadeInUpBig { 14 | animation-name: fadeInUpBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInTopLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInTopLeft { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(-100%, -100%, 0); 5 | } 6 | to { 7 | opacity: 1; 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .fadeInTopLeft { 13 | animation-name: fadeInTopLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutTopLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutTopLeft { 2 | from { 3 | opacity: 1; 4 | transform: translate3d(0, 0, 0); 5 | } 6 | to { 7 | opacity: 0; 8 | transform: translate3d(-100%, -100%, 0); 9 | } 10 | } 11 | 12 | .fadeOutTopLeft { 13 | animation-name: fadeOutTopLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInDownBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInDownBig { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(0, -2000px, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: translate3d(0, 0, 0); 10 | } 11 | } 12 | 13 | .fadeInDownBig { 14 | animation-name: fadeInDownBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInLeftBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInLeftBig { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(-2000px, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: translate3d(0, 0, 0); 10 | } 11 | } 12 | 13 | .fadeInLeftBig { 14 | animation-name: fadeInLeftBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInTopRight.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInTopRight { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(100%, -100%, 0); 5 | } 6 | to { 7 | opacity: 1; 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .fadeInTopRight { 13 | animation-name: fadeInTopRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutTopRight.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutTopRight { 2 | from { 3 | opacity: 1; 4 | transform: translate3d(0, 0, 0); 5 | } 6 | to { 7 | opacity: 0; 8 | transform: translate3d(100%, -100%, 0); 9 | } 10 | } 11 | 12 | .fadeOutTopRight { 13 | animation-name: fadeOutTopRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutUpLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutUpLeft { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | transform: rotate3d(0, 0, 1, -45deg); 8 | opacity: 0; 9 | } 10 | } 11 | 12 | .rotateOutUpLeft { 13 | animation-name: rotateOutUpLeft; 14 | transform-origin: left bottom; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInBottomLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInBottomLeft { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(-100%, 100%, 0); 5 | } 6 | to { 7 | opacity: 1; 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .fadeInBottomLeft { 13 | animation-name: fadeInBottomLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInRightBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInRightBig { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(2000px, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: translate3d(0, 0, 0); 10 | } 11 | } 12 | 13 | .fadeInRightBig { 14 | animation-name: fadeInRightBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutBottomLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutBottomLeft { 2 | from { 3 | opacity: 1; 4 | transform: translate3d(0, 0, 0); 5 | } 6 | to { 7 | opacity: 0; 8 | transform: translate3d(-100%, 100%, 0); 9 | } 10 | } 11 | 12 | .fadeOutBottomLeft { 13 | animation-name: fadeOutBottomLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutUpRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutUpRight { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | transform: rotate3d(0, 0, 1, 90deg); 8 | opacity: 0; 9 | } 10 | } 11 | 12 | .rotateOutUpRight { 13 | animation-name: rotateOutUpRight; 14 | transform-origin: right bottom; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInBottomRight.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInBottomRight { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(100%, 100%, 0); 5 | } 6 | to { 7 | opacity: 1; 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .fadeInBottomRight { 13 | animation-name: fadeInBottomRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutBottomRight.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutBottomRight { 2 | from { 3 | opacity: 1; 4 | transform: translate3d(0, 0, 0); 5 | } 6 | to { 7 | opacity: 0; 8 | transform: translate3d(100%, 100%, 0); 9 | } 10 | } 11 | 12 | .fadeOutBottomRight { 13 | animation-name: fadeOutBottomRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutDownLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutDownLeft { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | transform: rotate3d(0, 0, 1, 45deg); 8 | opacity: 0; 9 | } 10 | } 11 | 12 | .rotateOutDownLeft { 13 | animation-name: rotateOutDownLeft; 14 | transform-origin: left bottom; 15 | } 16 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateIn.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateIn { 2 | from { 3 | transform: rotate3d(0, 0, 1, -200deg); 4 | opacity: 0; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | opacity: 1; 10 | } 11 | } 12 | 13 | .rotateIn { 14 | animation-name: rotateIn; 15 | transform-origin: center; 16 | } 17 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutDownRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutDownRight { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | transform: rotate3d(0, 0, 1, -45deg); 8 | opacity: 0; 9 | } 10 | } 11 | 12 | .rotateOutDownRight { 13 | animation-name: rotateOutDownRight; 14 | transform-origin: right bottom; 15 | } 16 | -------------------------------------------------------------------------------- /docsSource/sections/00-intro.md: -------------------------------------------------------------------------------- 1 | > Animate.css v4 brought some **breaking changes**, please refer to the [migration guide](#migration) before updating from v3.x and under. 2 | 3 | **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. 4 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutLeft { 2 | 20% { 3 | opacity: 1; 4 | transform: translate3d(20px, 0, 0) scaleX(0.9); 5 | } 6 | 7 | to { 8 | opacity: 0; 9 | transform: translate3d(-2000px, 0, 0) scaleX(2); 10 | } 11 | } 12 | 13 | .bounceOutLeft { 14 | animation-name: bounceOutLeft; 15 | } 16 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutRight { 2 | 20% { 3 | opacity: 1; 4 | transform: translate3d(-20px, 0, 0) scaleX(0.9); 5 | } 6 | 7 | to { 8 | opacity: 0; 9 | transform: translate3d(2000px, 0, 0) scaleX(2); 10 | } 11 | } 12 | 13 | .bounceOutRight { 14 | animation-name: bounceOutRight; 15 | } 16 | -------------------------------------------------------------------------------- /source/lightspeed/lightSpeedOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes lightSpeedOutLeft { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | transform: translate3d(-100%, 0, 0) skewX(-30deg); 8 | opacity: 0; 9 | } 10 | } 11 | 12 | .lightSpeedOutLeft { 13 | animation-name: lightSpeedOutLeft; 14 | animation-timing-function: ease-in; 15 | } 16 | -------------------------------------------------------------------------------- /source/lightspeed/lightSpeedOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes lightSpeedOutRight { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | transform: translate3d(100%, 0, 0) skewX(30deg); 8 | opacity: 0; 9 | } 10 | } 11 | 12 | .lightSpeedOutRight { 13 | animation-name: lightSpeedOutRight; 14 | animation-timing-function: ease-in; 15 | } 16 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInUpLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInUpLeft { 2 | from { 3 | transform: rotate3d(0, 0, 1, 45deg); 4 | opacity: 0; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | opacity: 1; 10 | } 11 | } 12 | 13 | .rotateInUpLeft { 14 | animation-name: rotateInUpLeft; 15 | transform-origin: left bottom; 16 | } 17 | -------------------------------------------------------------------------------- /source/specials/rollOut.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes rollOut { 4 | from { 5 | opacity: 1; 6 | } 7 | 8 | to { 9 | opacity: 0; 10 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 11 | } 12 | } 13 | 14 | .rollOut { 15 | animation-name: rollOut; 16 | } 17 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInDownLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInDownLeft { 2 | from { 3 | transform: rotate3d(0, 0, 1, -45deg); 4 | opacity: 0; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | opacity: 1; 10 | } 11 | } 12 | 13 | .rotateInDownLeft { 14 | animation-name: rotateInDownLeft; 15 | transform-origin: left bottom; 16 | } 17 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInUpRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInUpRight { 2 | from { 3 | transform: rotate3d(0, 0, 1, -90deg); 4 | opacity: 0; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | opacity: 1; 10 | } 11 | } 12 | 13 | .rotateInUpRight { 14 | animation-name: rotateInUpRight; 15 | transform-origin: right bottom; 16 | } 17 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInDownRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInDownRight { 2 | from { 3 | transform: rotate3d(0, 0, 1, 45deg); 4 | opacity: 0; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | opacity: 1; 10 | } 11 | } 12 | 13 | .rotateInDownRight { 14 | animation-name: rotateInDownRight; 15 | transform-origin: right bottom; 16 | } 17 | -------------------------------------------------------------------------------- /docs/modules/toggle.mjs: -------------------------------------------------------------------------------- 1 | /** 2 | Mobile animation list 3 | */ 4 | 5 | const toggleOnClick = (el, target, className) => { 6 | const element = document.querySelector(el) 7 | const targetEl = document.querySelector(target) 8 | 9 | element.addEventListener('click', e => { 10 | targetEl.classList.toggle(className) 11 | }) 12 | } 13 | 14 | export default toggleOnClick 15 | -------------------------------------------------------------------------------- /source/back_entrances/backInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes backInUp { 2 | 0% { 3 | transform: translateY(1200px) scale(0.7); 4 | opacity: 0.7; 5 | } 6 | 7 | 80% { 8 | transform: translateY(0px) scale(0.7); 9 | opacity: 0.7; 10 | } 11 | 12 | 100% { 13 | transform: scale(1); 14 | opacity: 1; 15 | } 16 | } 17 | 18 | .backInUp { 19 | animation-name: backInUp; 20 | } 21 | -------------------------------------------------------------------------------- /source/back_exits/backOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes backOutUp { 2 | 0% { 3 | transform: scale(1); 4 | opacity: 1; 5 | } 6 | 7 | 20% { 8 | transform: translateY(0px) scale(0.7); 9 | opacity: 0.7; 10 | } 11 | 12 | 100% { 13 | transform: translateY(-700px) scale(0.7); 14 | opacity: 0.7; 15 | } 16 | } 17 | 18 | .backOutUp { 19 | animation-name: backOutUp; 20 | } 21 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutLeft { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 0; 9 | transform: scale(0.1) translate3d(-2000px, 0, 0); 10 | } 11 | } 12 | 13 | .zoomOutLeft { 14 | animation-name: zoomOutLeft; 15 | transform-origin: left center; 16 | } 17 | -------------------------------------------------------------------------------- /source/back_exits/backOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes backOutDown { 2 | 0% { 3 | transform: scale(1); 4 | opacity: 1; 5 | } 6 | 7 | 20% { 8 | transform: translateY(0px) scale(0.7); 9 | opacity: 0.7; 10 | } 11 | 12 | 100% { 13 | transform: translateY(700px) scale(0.7); 14 | opacity: 0.7; 15 | } 16 | } 17 | 18 | .backOutDown { 19 | animation-name: backOutDown; 20 | } 21 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutRight { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 0; 9 | transform: scale(0.1) translate3d(2000px, 0, 0); 10 | } 11 | } 12 | 13 | .zoomOutRight { 14 | animation-name: zoomOutRight; 15 | transform-origin: right center; 16 | } 17 | -------------------------------------------------------------------------------- /source/back_entrances/backInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes backInDown { 2 | 0% { 3 | transform: translateY(-1200px) scale(0.7); 4 | opacity: 0.7; 5 | } 6 | 7 | 80% { 8 | transform: translateY(0px) scale(0.7); 9 | opacity: 0.7; 10 | } 11 | 12 | 100% { 13 | transform: scale(1); 14 | opacity: 1; 15 | } 16 | } 17 | 18 | .backInDown { 19 | animation-name: backInDown; 20 | } 21 | -------------------------------------------------------------------------------- /source/back_entrances/backInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes backInLeft { 2 | 0% { 3 | transform: translateX(-2000px) scale(0.7); 4 | opacity: 0.7; 5 | } 6 | 7 | 80% { 8 | transform: translateX(0px) scale(0.7); 9 | opacity: 0.7; 10 | } 11 | 12 | 100% { 13 | transform: scale(1); 14 | opacity: 1; 15 | } 16 | } 17 | 18 | .backInLeft { 19 | animation-name: backInLeft; 20 | } 21 | -------------------------------------------------------------------------------- /source/back_entrances/backInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes backInRight { 2 | 0% { 3 | transform: translateX(2000px) scale(0.7); 4 | opacity: 0.7; 5 | } 6 | 7 | 80% { 8 | transform: translateX(0px) scale(0.7); 9 | opacity: 0.7; 10 | } 11 | 12 | 100% { 13 | transform: scale(1); 14 | opacity: 1; 15 | } 16 | } 17 | 18 | .backInRight { 19 | animation-name: backInRight; 20 | } 21 | -------------------------------------------------------------------------------- /source/back_exits/backOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes backOutLeft { 2 | 0% { 3 | transform: scale(1); 4 | opacity: 1; 5 | } 6 | 7 | 20% { 8 | transform: translateX(0px) scale(0.7); 9 | opacity: 0.7; 10 | } 11 | 12 | 100% { 13 | transform: translateX(-2000px) scale(0.7); 14 | opacity: 0.7; 15 | } 16 | } 17 | 18 | .backOutLeft { 19 | animation-name: backOutLeft; 20 | } 21 | -------------------------------------------------------------------------------- /source/back_exits/backOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes backOutRight { 2 | 0% { 3 | transform: scale(1); 4 | opacity: 1; 5 | } 6 | 7 | 20% { 8 | transform: translateX(0px) scale(0.7); 9 | opacity: 0.7; 10 | } 11 | 12 | 100% { 13 | transform: translateX(2000px) scale(0.7); 14 | opacity: 0.7; 15 | } 16 | } 17 | 18 | .backOutRight { 19 | animation-name: backOutRight; 20 | } 21 | -------------------------------------------------------------------------------- /source/specials/rollIn.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes rollIn { 4 | from { 5 | opacity: 0; 6 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 7 | } 8 | 9 | to { 10 | opacity: 1; 11 | transform: translate3d(0, 0, 0); 12 | } 13 | } 14 | 15 | .rollIn { 16 | animation-name: rollIn; 17 | } 18 | -------------------------------------------------------------------------------- /source/attention_seekers/shake.css: -------------------------------------------------------------------------------- 1 | @keyframes shake { 2 | from, 3 | to { 4 | transform: translate3d(0, 0, 0); 5 | } 6 | 7 | 10%, 8 | 30%, 9 | 50%, 10 | 70%, 11 | 90% { 12 | transform: translate3d(-10px, 0, 0); 13 | } 14 | 15 | 20%, 16 | 40%, 17 | 60%, 18 | 80% { 19 | transform: translate3d(10px, 0, 0); 20 | } 21 | } 22 | 23 | .shake { 24 | animation-name: shake; 25 | } 26 | -------------------------------------------------------------------------------- /source/attention_seekers/shakeX.css: -------------------------------------------------------------------------------- 1 | @keyframes shakeX { 2 | from, 3 | to { 4 | transform: translate3d(0, 0, 0); 5 | } 6 | 7 | 10%, 8 | 30%, 9 | 50%, 10 | 70%, 11 | 90% { 12 | transform: translate3d(-10px, 0, 0); 13 | } 14 | 15 | 20%, 16 | 40%, 17 | 60%, 18 | 80% { 19 | transform: translate3d(10px, 0, 0); 20 | } 21 | } 22 | 23 | .shakeX { 24 | animation-name: shakeX; 25 | } 26 | -------------------------------------------------------------------------------- /source/attention_seekers/shakeY.css: -------------------------------------------------------------------------------- 1 | @keyframes shakeY { 2 | from, 3 | to { 4 | transform: translate3d(0, 0, 0); 5 | } 6 | 7 | 10%, 8 | 30%, 9 | 50%, 10 | 70%, 11 | 90% { 12 | transform: translate3d(0, -10px, 0); 13 | } 14 | 15 | 20%, 16 | 40%, 17 | 60%, 18 | 80% { 19 | transform: translate3d(0, 10px, 0); 20 | } 21 | } 22 | 23 | .shakeY { 24 | animation-name: shakeY; 25 | } 26 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutUp { 2 | 20% { 3 | transform: translate3d(0, -10px, 0) scaleY(0.985); 4 | } 5 | 6 | 40%, 7 | 45% { 8 | opacity: 1; 9 | transform: translate3d(0, 20px, 0) scaleY(0.9); 10 | } 11 | 12 | to { 13 | opacity: 0; 14 | transform: translate3d(0, -2000px, 0) scaleY(3); 15 | } 16 | } 17 | 18 | .bounceOutUp { 19 | animation-name: bounceOutUp; 20 | } 21 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutDown { 2 | 20% { 3 | transform: translate3d(0, 10px, 0) scaleY(0.985); 4 | } 5 | 6 | 40%, 7 | 45% { 8 | opacity: 1; 9 | transform: translate3d(0, -20px, 0) scaleY(0.9); 10 | } 11 | 12 | to { 13 | opacity: 0; 14 | transform: translate3d(0, 2000px, 0) scaleY(3); 15 | } 16 | } 17 | 18 | .bounceOutDown { 19 | animation-name: bounceOutDown; 20 | } 21 | -------------------------------------------------------------------------------- /source/attention_seekers/pulse.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes pulse { 4 | from { 5 | transform: scale3d(1, 1, 1); 6 | } 7 | 8 | 50% { 9 | transform: scale3d(1.05, 1.05, 1.05); 10 | } 11 | 12 | to { 13 | transform: scale3d(1, 1, 1); 14 | } 15 | } 16 | 17 | .pulse { 18 | animation-name: pulse; 19 | animation-timing-function: ease-in-out; 20 | } 21 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOut.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOut { 2 | 20% { 3 | transform: scale3d(0.9, 0.9, 0.9); 4 | } 5 | 6 | 50%, 7 | 55% { 8 | opacity: 1; 9 | transform: scale3d(1.1, 1.1, 1.1); 10 | } 11 | 12 | to { 13 | opacity: 0; 14 | transform: scale3d(0.3, 0.3, 0.3); 15 | } 16 | } 17 | 18 | .bounceOut { 19 | animation-duration: calc(var(--animate-duration) * 0.75); 20 | animation-name: bounceOut; 21 | } 22 | -------------------------------------------------------------------------------- /source/specials/jackInTheBox.css: -------------------------------------------------------------------------------- 1 | @keyframes jackInTheBox { 2 | from { 3 | opacity: 0; 4 | transform: scale(0.1) rotate(30deg); 5 | transform-origin: center bottom; 6 | } 7 | 8 | 50% { 9 | transform: rotate(-10deg); 10 | } 11 | 12 | 70% { 13 | transform: rotate(3deg); 14 | } 15 | 16 | to { 17 | opacity: 1; 18 | transform: scale(1); 19 | } 20 | } 21 | 22 | .jackInTheBox { 23 | animation-name: jackInTheBox; 24 | } 25 | -------------------------------------------------------------------------------- /docsSource/sections/08-accessibility.md: -------------------------------------------------------------------------------- 1 | ## Accessibility 2 | 3 | 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. 4 | -------------------------------------------------------------------------------- /source/attention_seekers/swing.css: -------------------------------------------------------------------------------- 1 | @keyframes swing { 2 | 20% { 3 | transform: rotate3d(0, 0, 1, 15deg); 4 | } 5 | 6 | 40% { 7 | transform: rotate3d(0, 0, 1, -10deg); 8 | } 9 | 10 | 60% { 11 | transform: rotate3d(0, 0, 1, 5deg); 12 | } 13 | 14 | 80% { 15 | transform: rotate3d(0, 0, 1, -5deg); 16 | } 17 | 18 | to { 19 | transform: rotate3d(0, 0, 1, 0deg); 20 | } 21 | } 22 | 23 | .swing { 24 | transform-origin: top center; 25 | animation-name: swing; 26 | } 27 | -------------------------------------------------------------------------------- /source/lightspeed/lightSpeedInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes lightSpeedInLeft { 2 | from { 3 | transform: translate3d(-100%, 0, 0) skewX(30deg); 4 | opacity: 0; 5 | } 6 | 7 | 60% { 8 | transform: skewX(-20deg); 9 | opacity: 1; 10 | } 11 | 12 | 80% { 13 | transform: skewX(5deg); 14 | } 15 | 16 | to { 17 | transform: translate3d(0, 0, 0); 18 | } 19 | } 20 | 21 | .lightSpeedInLeft { 22 | animation-name: lightSpeedInLeft; 23 | animation-timing-function: ease-out; 24 | } 25 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInUp { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); 5 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 12 | } 13 | } 14 | 15 | .zoomInUp { 16 | animation-name: zoomInUp; 17 | } 18 | -------------------------------------------------------------------------------- /source/lightspeed/lightSpeedInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes lightSpeedInRight { 2 | from { 3 | transform: translate3d(100%, 0, 0) skewX(-30deg); 4 | opacity: 0; 5 | } 6 | 7 | 60% { 8 | transform: skewX(20deg); 9 | opacity: 1; 10 | } 11 | 12 | 80% { 13 | transform: skewX(-5deg); 14 | } 15 | 16 | to { 17 | transform: translate3d(0, 0, 0); 18 | } 19 | } 20 | 21 | .lightSpeedInRight { 22 | animation-name: lightSpeedInRight; 23 | animation-timing-function: ease-out; 24 | } 25 | -------------------------------------------------------------------------------- /source/flippers/flipOutX.css: -------------------------------------------------------------------------------- 1 | @keyframes flipOutX { 2 | from { 3 | transform: perspective(400px); 4 | } 5 | 6 | 30% { 7 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 8 | opacity: 1; 9 | } 10 | 11 | to { 12 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 13 | opacity: 0; 14 | } 15 | } 16 | 17 | .flipOutX { 18 | animation-duration: calc(var(--animate-duration) * 0.75); 19 | animation-name: flipOutX; 20 | backface-visibility: visible !important; 21 | } 22 | -------------------------------------------------------------------------------- /source/flippers/flipOutY.css: -------------------------------------------------------------------------------- 1 | @keyframes flipOutY { 2 | from { 3 | transform: perspective(400px); 4 | } 5 | 6 | 30% { 7 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 8 | opacity: 1; 9 | } 10 | 11 | to { 12 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 13 | opacity: 0; 14 | } 15 | } 16 | 17 | .flipOutY { 18 | animation-duration: calc(var(--animate-duration) * 0.75); 19 | backface-visibility: visible !important; 20 | animation-name: flipOutY; 21 | } 22 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInDown { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); 5 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 12 | } 13 | } 14 | 15 | .zoomInDown { 16 | animation-name: zoomInDown; 17 | } 18 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInLeft { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); 5 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 12 | } 13 | } 14 | 15 | .zoomInLeft { 16 | animation-name: zoomInLeft; 17 | } 18 | -------------------------------------------------------------------------------- /source/attention_seekers/heartBeat.css: -------------------------------------------------------------------------------- 1 | @keyframes heartBeat { 2 | 0% { 3 | transform: scale(1); 4 | } 5 | 6 | 14% { 7 | transform: scale(1.3); 8 | } 9 | 10 | 28% { 11 | transform: scale(1); 12 | } 13 | 14 | 42% { 15 | transform: scale(1.3); 16 | } 17 | 18 | 70% { 19 | transform: scale(1); 20 | } 21 | } 22 | 23 | .heartBeat { 24 | animation-name: heartBeat; 25 | animation-duration: calc(var(--animate-duration) * 1.3); 26 | animation-timing-function: ease-in-out; 27 | } 28 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInRight { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); 5 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 12 | } 13 | } 14 | 15 | .zoomInRight { 16 | animation-name: zoomInRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutUp { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 5 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 6 | } 7 | 8 | to { 9 | opacity: 0; 10 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 12 | } 13 | } 14 | 15 | .zoomOutUp { 16 | animation-name: zoomOutUp; 17 | transform-origin: center bottom; 18 | } 19 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutDown { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 5 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 6 | } 7 | 8 | to { 9 | opacity: 0; 10 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 12 | } 13 | } 14 | 15 | .zoomOutDown { 16 | animation-name: zoomOutDown; 17 | transform-origin: center bottom; 18 | } 19 | -------------------------------------------------------------------------------- /source/attention_seekers/tada.css: -------------------------------------------------------------------------------- 1 | @keyframes tada { 2 | from { 3 | transform: scale3d(1, 1, 1); 4 | } 5 | 6 | 10%, 7 | 20% { 8 | transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); 9 | } 10 | 11 | 30%, 12 | 50%, 13 | 70%, 14 | 90% { 15 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 16 | } 17 | 18 | 40%, 19 | 60%, 20 | 80% { 21 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 22 | } 23 | 24 | to { 25 | transform: scale3d(1, 1, 1); 26 | } 27 | } 28 | 29 | .tada { 30 | animation-name: tada; 31 | } 32 | -------------------------------------------------------------------------------- /docsSource/sections/09-contributors.md: -------------------------------------------------------------------------------- 1 | ## Core Team 2 | 3 | | ![](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) | 4 | | --- | --- | --- | 5 | | [Daniel Eden](https://github.com/daneden) | [Elton Mesquita](https://github.com/eltonmesquita) | [Waren Gonzaga](https://github.com/warengonzaga) | 6 | | Animate.css Creator | Maintainer | Core Contributor | 7 | -------------------------------------------------------------------------------- /source/attention_seekers/headShake.css: -------------------------------------------------------------------------------- 1 | @keyframes headShake { 2 | 0% { 3 | transform: translateX(0); 4 | } 5 | 6 | 6.5% { 7 | transform: translateX(-6px) rotateY(-9deg); 8 | } 9 | 10 | 18.5% { 11 | transform: translateX(5px) rotateY(7deg); 12 | } 13 | 14 | 31.5% { 15 | transform: translateX(-3px) rotateY(-5deg); 16 | } 17 | 18 | 43.5% { 19 | transform: translateX(2px) rotateY(3deg); 20 | } 21 | 22 | 50% { 23 | transform: translateX(0); 24 | } 25 | } 26 | 27 | .headShake { 28 | animation-timing-function: ease-in-out; 29 | animation-name: headShake; 30 | } 31 | -------------------------------------------------------------------------------- /source/attention_seekers/rubberBand.css: -------------------------------------------------------------------------------- 1 | @keyframes rubberBand { 2 | from { 3 | transform: scale3d(1, 1, 1); 4 | } 5 | 6 | 30% { 7 | transform: scale3d(1.25, 0.75, 1); 8 | } 9 | 10 | 40% { 11 | transform: scale3d(0.75, 1.25, 1); 12 | } 13 | 14 | 50% { 15 | transform: scale3d(1.15, 0.85, 1); 16 | } 17 | 18 | 65% { 19 | transform: scale3d(0.95, 1.05, 1); 20 | } 21 | 22 | 75% { 23 | transform: scale3d(1.05, 0.95, 1); 24 | } 25 | 26 | to { 27 | transform: scale3d(1, 1, 1); 28 | } 29 | } 30 | 31 | .rubberBand { 32 | animation-name: rubberBand; 33 | } 34 | -------------------------------------------------------------------------------- /docs/modules/slowDownAnimations.mjs: -------------------------------------------------------------------------------- 1 | /** 2 | Slows animations 3 | */ 4 | 5 | const slowDownAnimations = (target) => { 6 | const targetEl = document.querySelector(target) 7 | const doc = document.documentElement 8 | 9 | targetEl.addEventListener('click', () => { 10 | const currentDuration = getComputedStyle(document.documentElement) 11 | .getPropertyValue('--animate-duration') 12 | const newDuration = currentDuration === '1s' ? '2s' : '1s' 13 | 14 | document.documentElement.style.setProperty('--animate-duration', newDuration); 15 | }) 16 | } 17 | 18 | export default slowDownAnimations 19 | -------------------------------------------------------------------------------- /docs/modules/darkMode.mjs: -------------------------------------------------------------------------------- 1 | const darkModeControl = () => { 2 | const darkCheck = document.getElementById('night-light-checkbox'); 3 | 4 | darkCheck.addEventListener('click', () => { 5 | if (darkCheck.checked) { 6 | document.body.classList.add('dark'); 7 | localStorage.setItem('animate-css', 'dark'); 8 | } else { 9 | document.body.classList.remove('dark'); 10 | localStorage.removeItem('animate-css'); 11 | } 12 | }) 13 | 14 | if (localStorage.getItem('animate-css')) { 15 | document.body.className = 'dark'; 16 | darkCheck.checked = true; 17 | } 18 | } 19 | 20 | export default darkModeControl; -------------------------------------------------------------------------------- /source/specials/hinge.css: -------------------------------------------------------------------------------- 1 | @keyframes hinge { 2 | 0% { 3 | animation-timing-function: ease-in-out; 4 | } 5 | 6 | 20%, 7 | 60% { 8 | transform: rotate3d(0, 0, 1, 80deg); 9 | animation-timing-function: ease-in-out; 10 | } 11 | 12 | 40%, 13 | 80% { 14 | transform: rotate3d(0, 0, 1, 60deg); 15 | animation-timing-function: ease-in-out; 16 | opacity: 1; 17 | } 18 | 19 | to { 20 | transform: translate3d(0, 700px, 0); 21 | opacity: 0; 22 | } 23 | } 24 | 25 | .hinge { 26 | animation-duration: calc(var(--animate-duration) * 2); 27 | animation-name: hinge; 28 | transform-origin: top left; 29 | } 30 | -------------------------------------------------------------------------------- /source/flippers/flipInX.css: -------------------------------------------------------------------------------- 1 | @keyframes flipInX { 2 | from { 3 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 4 | animation-timing-function: ease-in; 5 | opacity: 0; 6 | } 7 | 8 | 40% { 9 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 10 | animation-timing-function: ease-in; 11 | } 12 | 13 | 60% { 14 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 15 | opacity: 1; 16 | } 17 | 18 | 80% { 19 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 20 | } 21 | 22 | to { 23 | transform: perspective(400px); 24 | } 25 | } 26 | 27 | .flipInX { 28 | backface-visibility: visible !important; 29 | animation-name: flipInX; 30 | } 31 | -------------------------------------------------------------------------------- /source/flippers/flipInY.css: -------------------------------------------------------------------------------- 1 | @keyframes flipInY { 2 | from { 3 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 4 | animation-timing-function: ease-in; 5 | opacity: 0; 6 | } 7 | 8 | 40% { 9 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 10 | animation-timing-function: ease-in; 11 | } 12 | 13 | 60% { 14 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 15 | opacity: 1; 16 | } 17 | 18 | 80% { 19 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 20 | } 21 | 22 | to { 23 | transform: perspective(400px); 24 | } 25 | } 26 | 27 | .flipInY { 28 | backface-visibility: visible !important; 29 | animation-name: flipInY; 30 | } 31 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInUp { 2 | from, 3 | 60%, 4 | 75%, 5 | 90%, 6 | to { 7 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 8 | } 9 | 10 | from { 11 | opacity: 0; 12 | transform: translate3d(0, 3000px, 0) scaleY(5); 13 | } 14 | 15 | 60% { 16 | opacity: 1; 17 | transform: translate3d(0, -20px, 0) scaleY(0.9); 18 | } 19 | 20 | 75% { 21 | transform: translate3d(0, 10px, 0) scaleY(0.95); 22 | } 23 | 24 | 90% { 25 | transform: translate3d(0, -5px, 0) scaleY(0.985); 26 | } 27 | 28 | to { 29 | transform: translate3d(0, 0, 0); 30 | } 31 | } 32 | 33 | .bounceInUp { 34 | animation-name: bounceInUp; 35 | } 36 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInLeft { 2 | from, 3 | 60%, 4 | 75%, 5 | 90%, 6 | to { 7 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 8 | } 9 | 10 | 0% { 11 | opacity: 0; 12 | transform: translate3d(-3000px, 0, 0) scaleX(3); 13 | } 14 | 15 | 60% { 16 | opacity: 1; 17 | transform: translate3d(25px, 0, 0) scaleX(1); 18 | } 19 | 20 | 75% { 21 | transform: translate3d(-10px, 0, 0) scaleX(0.98); 22 | } 23 | 24 | 90% { 25 | transform: translate3d(5px, 0, 0) scaleX(0.995); 26 | } 27 | 28 | to { 29 | transform: translate3d(0, 0, 0); 30 | } 31 | } 32 | 33 | .bounceInLeft { 34 | animation-name: bounceInLeft; 35 | } 36 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInDown { 2 | from, 3 | 60%, 4 | 75%, 5 | 90%, 6 | to { 7 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 8 | } 9 | 10 | 0% { 11 | opacity: 0; 12 | transform: translate3d(0, -3000px, 0) scaleY(3); 13 | } 14 | 15 | 60% { 16 | opacity: 1; 17 | transform: translate3d(0, 25px, 0) scaleY(0.9); 18 | } 19 | 20 | 75% { 21 | transform: translate3d(0, -10px, 0) scaleY(0.95); 22 | } 23 | 24 | 90% { 25 | transform: translate3d(0, 5px, 0) scaleY(0.985); 26 | } 27 | 28 | to { 29 | transform: translate3d(0, 0, 0); 30 | } 31 | } 32 | 33 | .bounceInDown { 34 | animation-name: bounceInDown; 35 | } 36 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInRight { 2 | from, 3 | 60%, 4 | 75%, 5 | 90%, 6 | to { 7 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 8 | } 9 | 10 | from { 11 | opacity: 0; 12 | transform: translate3d(3000px, 0, 0) scaleX(3); 13 | } 14 | 15 | 60% { 16 | opacity: 1; 17 | transform: translate3d(-25px, 0, 0) scaleX(1); 18 | } 19 | 20 | 75% { 21 | transform: translate3d(10px, 0, 0) scaleX(0.98); 22 | } 23 | 24 | 90% { 25 | transform: translate3d(-5px, 0, 0) scaleX(0.995); 26 | } 27 | 28 | to { 29 | transform: translate3d(0, 0, 0); 30 | } 31 | } 32 | 33 | .bounceInRight { 34 | animation-name: bounceInRight; 35 | } 36 | -------------------------------------------------------------------------------- /source/attention_seekers/wobble.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes wobble { 4 | from { 5 | transform: translate3d(0, 0, 0); 6 | } 7 | 8 | 15% { 9 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 10 | } 11 | 12 | 30% { 13 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 14 | } 15 | 16 | 45% { 17 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 18 | } 19 | 20 | 60% { 21 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 22 | } 23 | 24 | 75% { 25 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 26 | } 27 | 28 | to { 29 | transform: translate3d(0, 0, 0); 30 | } 31 | } 32 | 33 | .wobble { 34 | animation-name: wobble; 35 | } 36 | -------------------------------------------------------------------------------- /source/attention_seekers/jello.css: -------------------------------------------------------------------------------- 1 | @keyframes jello { 2 | from, 3 | 11.1%, 4 | to { 5 | transform: translate3d(0, 0, 0); 6 | } 7 | 8 | 22.2% { 9 | transform: skewX(-12.5deg) skewY(-12.5deg); 10 | } 11 | 12 | 33.3% { 13 | transform: skewX(6.25deg) skewY(6.25deg); 14 | } 15 | 16 | 44.4% { 17 | transform: skewX(-3.125deg) skewY(-3.125deg); 18 | } 19 | 20 | 55.5% { 21 | transform: skewX(1.5625deg) skewY(1.5625deg); 22 | } 23 | 24 | 66.6% { 25 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 26 | } 27 | 28 | 77.7% { 29 | transform: skewX(0.390625deg) skewY(0.390625deg); 30 | } 31 | 32 | 88.8% { 33 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 34 | } 35 | } 36 | 37 | .jello { 38 | animation-name: jello; 39 | transform-origin: center; 40 | } 41 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceIn.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceIn { 2 | from, 3 | 20%, 4 | 40%, 5 | 60%, 6 | 80%, 7 | to { 8 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 9 | } 10 | 11 | 0% { 12 | opacity: 0; 13 | transform: scale3d(0.3, 0.3, 0.3); 14 | } 15 | 16 | 20% { 17 | transform: scale3d(1.1, 1.1, 1.1); 18 | } 19 | 20 | 40% { 21 | transform: scale3d(0.9, 0.9, 0.9); 22 | } 23 | 24 | 60% { 25 | opacity: 1; 26 | transform: scale3d(1.03, 1.03, 1.03); 27 | } 28 | 29 | 80% { 30 | transform: scale3d(0.97, 0.97, 0.97); 31 | } 32 | 33 | to { 34 | opacity: 1; 35 | transform: scale3d(1, 1, 1); 36 | } 37 | } 38 | 39 | .bounceIn { 40 | animation-duration: calc(var(--animate-duration) * 0.75); 41 | animation-name: bounceIn; 42 | } 43 | -------------------------------------------------------------------------------- /docsSource/sections/09-license-contributing.md: -------------------------------------------------------------------------------- 1 | ## License and Contributing 2 | 3 | Animate.css is licensed under the [Hippocratic License](http://firstdonoharm.dev). 4 | 5 | ### Contributing 6 | 7 | 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**. 8 | 9 | ### Code of Conduct 10 | 11 | This project and everyone participating in it is governed by the [Contributor Covenant Code of Conduct](https://github.com/animate-css/animate.css/blob/main/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [animate@eltonmesquita.com](mailto:animate@eltonmesquita.com). 12 | -------------------------------------------------------------------------------- /source/attention_seekers/bounce.css: -------------------------------------------------------------------------------- 1 | @keyframes bounce { 2 | from, 3 | 20%, 4 | 53%, 5 | to { 6 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 7 | transform: translate3d(0, 0, 0); 8 | } 9 | 10 | 40%, 11 | 43% { 12 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 13 | transform: translate3d(0, -30px, 0) scaleY(1.1); 14 | } 15 | 16 | 70% { 17 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 18 | transform: translate3d(0, -15px, 0) scaleY(1.05); 19 | } 20 | 21 | 80% { 22 | transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 23 | transform: translate3d(0, 0, 0) scaleY(0.95); 24 | } 25 | 26 | 90% { 27 | transform: translate3d(0, -4px, 0) scaleY(1.02); 28 | } 29 | } 30 | 31 | .bounce { 32 | animation-name: bounce; 33 | transform-origin: center bottom; 34 | } 35 | -------------------------------------------------------------------------------- /docs/modules/startAnimations.mjs: -------------------------------------------------------------------------------- 1 | /** 2 | Intro animation 3 | */ 4 | 5 | const startAnimation = () => { 6 | const title = document.querySelector('.callout-title') 7 | const subTitle = document.querySelector('.callout-subtitle') 8 | const sidebar = document.querySelector('.animation-list') 9 | const button = document.querySelector('.callout-showList') 10 | 11 | 12 | const titleAnimation = 'zoomInDown' 13 | const subTitleAnimation = 'zoomInDown' 14 | const buttonAnimation = 'zoomInUp' 15 | const sidebarAnimation = 'fadeInRight' 16 | 17 | title.classList.add('animate__animated', `animate__${titleAnimation}`) 18 | subTitle.classList.add('animate__animated', `animate__${subTitleAnimation}`) 19 | button.classList.add('animate__animated', `animate__${buttonAnimation}`) 20 | sidebar.classList.add('animate__animated', `animate__${sidebarAnimation}`) 21 | } 22 | 23 | export default startAnimation 24 | -------------------------------------------------------------------------------- /docsSource/index.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | 4 | const {version} = JSON.parse(fs.readFileSync('package.json')); 5 | const compileMD = require('./compileMD'); 6 | const compileAnimationList = require('./compileAnimationList'); 7 | 8 | const templatePath = path.join(__dirname, 'template.html'); 9 | const template = fs.readFileSync(templatePath, 'utf8'); 10 | const outputPath = '../docs'; 11 | const outputFile = 'index.html'; 12 | 13 | const docs = compileMD(); 14 | const list = compileAnimationList(); 15 | 16 | const output = path.join(__dirname, outputPath, outputFile); 17 | 18 | const withDocs = template.replace('{{docs}}', docs); 19 | const withListAndDocs = withDocs.replace('{{list}}', list); 20 | const withVersion = withListAndDocs.replace('{{version}}', version); 21 | 22 | fs.writeFile(output, withVersion, 'utf8', (err) => { 23 | if (err) console.error(err); 24 | console.log('Template compiled succesfully.'); 25 | }); 26 | 27 | -------------------------------------------------------------------------------- /source/flippers/flip.css: -------------------------------------------------------------------------------- 1 | @keyframes flip { 2 | from { 3 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); 4 | animation-timing-function: ease-out; 5 | } 6 | 7 | 40% { 8 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) 9 | rotate3d(0, 1, 0, -190deg); 10 | animation-timing-function: ease-out; 11 | } 12 | 13 | 50% { 14 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) 15 | rotate3d(0, 1, 0, -170deg); 16 | animation-timing-function: ease-in; 17 | } 18 | 19 | 80% { 20 | transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) 21 | rotate3d(0, 1, 0, 0deg); 22 | animation-timing-function: ease-in; 23 | } 24 | 25 | to { 26 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); 27 | animation-timing-function: ease-in; 28 | } 29 | } 30 | 31 | .animated.flip { 32 | backface-visibility: visible; 33 | animation-name: flip; 34 | } 35 | -------------------------------------------------------------------------------- /docs/main.mjs: -------------------------------------------------------------------------------- 1 | import buildDocsIndex from './modules/buildDocsIndex.mjs'; 2 | import playground from './modules/playground.mjs'; 3 | import startAnimations from './modules/startAnimations.mjs'; 4 | import toggleOnClick from './modules/toggle.mjs'; 5 | import darkModeControl from './modules/darkMode.mjs'; 6 | 7 | buildDocsIndex(); 8 | playground(); 9 | darkModeControl(); 10 | 11 | toggleOnClick('.callout-showList', 'html', 'animationList-active'); 12 | toggleOnClick('.callout-hideList', 'html', 'animationList-active'); 13 | toggleOnClick('.hamburger', 'html', 'hamburger-active'); 14 | toggleOnClick('.docs-index', 'html', 'hamburger-active'); 15 | 16 | requestAnimationFrame(startAnimations); 17 | 18 | document.querySelectorAll('.copy-icon').forEach(icon => { 19 | icon.addEventListener('click', () => { 20 | icon.classList.add('copied'); 21 | document.querySelector('.copied .tooltip').textContent = 'Copied!'; 22 | setTimeout(() => { 23 | icon.children[0].textContent = 'Copy class name to clipboard' 24 | icon.classList.remove('copied') 25 | }, 750) 26 | }) 27 | }) 28 | -------------------------------------------------------------------------------- /docs/modules/buildDocsIndex.mjs: -------------------------------------------------------------------------------- 1 | /** 2 | Docs index 3 | */ 4 | 5 | const indexItemTemplate = (item = '', id) => ` 6 |
  • ${item}
    • 7 | ` 8 | 9 | const indexList = (sections = [], container = '.sidebar', heading = 'h2') => { 10 | const containerEl = document.querySelector(container) 11 | const list = document.createElement('ul') 12 | 13 | const children = sections.map(section => { 14 | const title = section.querySelector(heading) 15 | const id = section.getAttribute('id') 16 | 17 | return title && indexItemTemplate(title.innerText, id) 18 | }) 19 | 20 | list.classList.add('docs-index') 21 | list.innerHTML = children.join('\n') 22 | 23 | containerEl.insertAdjacentElement('beforeend', list) 24 | 25 | return list 26 | } 27 | 28 | const buildDocsIndex = (docs = '#documentation', docSection = '[class*="docSection-"]', titles = 'h2') => { 29 | const docsEl = document.querySelector(docs) 30 | const sections = [...docsEl.querySelectorAll(docSection)] 31 | 32 | const list = indexList(sections) 33 | 34 | return list 35 | } 36 | 37 | export default buildDocsIndex 38 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/features.yml: -------------------------------------------------------------------------------- 1 | name: Feature Request 2 | description: Have a feature request? Let us know! 3 | labels: 'feature request' 4 | body: 5 | # problem 6 | - type: textarea 7 | id: problem 8 | attributes: 9 | label: Is your feature request related to a problem? Please describe. 10 | description: "A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]" 11 | validations: 12 | required: true 13 | # solution 14 | - type: textarea 15 | id: solution 16 | attributes: 17 | label: Describe the solution you'd like. 18 | description: "A clear and concise description of what you want to happen." 19 | validations: 20 | required: true 21 | # alternative 22 | - type: textarea 23 | id: alternative 24 | attributes: 25 | label: Describe alternatives you've considered. 26 | description: "A clear and concise description of any alternative solutions or features you've considered." 27 | validations: 28 | required: true 29 | # additional context 30 | - type: textarea 31 | id: additional-context 32 | attributes: 33 | label: Additional Context 34 | description: "Add any other context about the problem here." 35 | validations: 36 | required: false 37 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const {homepage, version, author, animateConfig} = JSON.parse(fs.readFileSync('package.json')); 3 | 4 | const header = ` 5 | @charset "UTF-8"; 6 | 7 | /*! 8 | * animate.css - ${homepage} 9 | * Version - ${version} 10 | * Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev 11 | * 12 | * Copyright (c) ${new Date().getFullYear()} ${author.name} 13 | */ 14 | 15 | `; 16 | 17 | module.exports = (ctx) => { 18 | const prefix = ctx.env === 'compat' ? '' : animateConfig.prefix; 19 | const devMessage = `🎉🎉🎉🎉 \nanimate.css ${ctx.env} build was compiled sucessfully! \n`; 20 | 21 | console.log(devMessage); 22 | 23 | return { 24 | map: ctx.options.map, 25 | parser: ctx.options.parser, 26 | plugins: { 27 | 'postcss-import': {root: ctx.file.dirname}, 28 | 'postcss-prefixer': { 29 | prefix, 30 | ignore: [/\[class\*=.*\]/], 31 | }, 32 | 'postcss-preset-env': { 33 | autoprefixer: { 34 | cascade: false, 35 | }, 36 | features: { 37 | 'custom-properties': true, 38 | }, 39 | }, 40 | cssnano: ctx.env === 'production' || ctx.env === 'compat' ? {} : false, 41 | 'postcss-header': { 42 | header, 43 | }, 44 | }, 45 | }; 46 | }; 47 | -------------------------------------------------------------------------------- /docs/modules/playground.mjs: -------------------------------------------------------------------------------- 1 | /** 2 | Animation playground 3 | */ 4 | 5 | const clearAll = (items = [], className = 'active') => { 6 | items.forEach((item) => item.classList.remove(className)); 7 | }; 8 | 9 | const setEndListener = (target, defaultClass) => { 10 | target.addEventListener('animationend', (e) => { 11 | target.setAttribute('class', defaultClass); 12 | document.documentElement.classList.remove('isPlaying'); 13 | }); 14 | }; 15 | 16 | const playground = ( 17 | container = '.animation-list', 18 | item = '.animation-item', 19 | target = '.callout-title', 20 | ) => { 21 | const containerEl = document.querySelector(container); 22 | const items = [...containerEl.querySelectorAll(item)]; 23 | const targetEl = document.querySelector(target); 24 | 25 | setEndListener(targetEl, target.replace('.', '')); 26 | 27 | containerEl.addEventListener('click', (e) => { 28 | const el = e.target 29 | 30 | if(el.classList.contains('animation-item--title')) { 31 | clearAll(items); 32 | const animation = `animate__${el.parentElement.getAttribute('data-animation')}`; 33 | 34 | targetEl.classList.add('animate__animated', animation); 35 | document.documentElement.classList.add('isPlaying'); 36 | document.documentElement.classList.remove('animationList-active'); 37 | } 38 | 39 | if (el.classList.contains('copy-icon')) { 40 | const animation = `animate__${el.parentElement.getAttribute('data-animation')}`; 41 | navigator.clipboard.writeText(animation); 42 | } 43 | }); 44 | }; 45 | 46 | export default playground; 47 | -------------------------------------------------------------------------------- /docsSource/sections/06-migration.md: -------------------------------------------------------------------------------- 1 | ## Migration from v3.x and Under 2 | 3 | Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. However, it also comes with a breaking change: we have added a prefix for all of the Animate.css classes - defaulting to `animate__` - so a direct migration is impossible. 4 | 5 | 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). 6 | 7 | If you're using a bundler, update your import: 8 | 9 | from: 10 | 11 | ```js 12 | import 'animate.min.css'; 13 | ``` 14 | 15 | to 16 | 17 | ```js 18 | import 'animate.compat.css'; 19 | ``` 20 | 21 | Notice that depending on your project's configuration, this might change a bit. 22 | 23 | In case of using a CDN, update the link in your HTML: 24 | 25 | from: 26 | 27 | ```html 28 | 29 | 33 | 34 | ``` 35 | 36 | to 37 | 38 | ```html 39 | 40 | 44 | 45 | ``` 46 | 47 | 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. 48 | -------------------------------------------------------------------------------- /source/_base.css: -------------------------------------------------------------------------------- 1 | .animated { 2 | animation-duration: var(--animate-duration); 3 | animation-fill-mode: both; 4 | } 5 | 6 | .animated.infinite { 7 | animation-iteration-count: infinite; 8 | } 9 | 10 | .animated.repeat-1 { 11 | animation-iteration-count: var(--animate-repeat); 12 | } 13 | 14 | .animated.repeat-2 { 15 | animation-iteration-count: calc(var(--animate-repeat) * 2); 16 | } 17 | 18 | .animated.repeat-3 { 19 | animation-iteration-count: calc(var(--animate-repeat) * 3); 20 | } 21 | 22 | .animated.delay-1s { 23 | animation-delay: var(--animate-delay); 24 | } 25 | 26 | .animated.delay-2s { 27 | animation-delay: calc(var(--animate-delay) * 2); 28 | } 29 | 30 | .animated.delay-3s { 31 | animation-delay: calc(var(--animate-delay) * 3); 32 | } 33 | 34 | .animated.delay-4s { 35 | animation-delay: calc(var(--animate-delay) * 4); 36 | } 37 | 38 | .animated.delay-5s { 39 | animation-delay: calc(var(--animate-delay) * 5); 40 | } 41 | 42 | .animated.faster { 43 | animation-duration: calc(var(--animate-duration) / 2); 44 | } 45 | 46 | .animated.fast { 47 | animation-duration: calc(var(--animate-duration) * 0.8); 48 | } 49 | 50 | .animated.slow { 51 | animation-duration: calc(var(--animate-duration) * 2); 52 | } 53 | 54 | .animated.slower { 55 | animation-duration: calc(var(--animate-duration) * 3); 56 | } 57 | 58 | @media print, (prefers-reduced-motion: reduce) { 59 | .animated { 60 | animation-duration: 1ms !important; 61 | transition-duration: 1ms !important; 62 | animation-iteration-count: 1 !important; 63 | } 64 | 65 | .animated[class*='Out'] { 66 | opacity: 0; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /docsSource/compileMD.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | const md = require('markdown-it')({ 4 | html: true, 5 | linkify: true, 6 | }); 7 | 8 | /** 9 | * Converts string to slug. This is as simple as can be and doesn't handle much usecases on purpose. 10 | * @param {string} text - string to be converted to slug 11 | */ 12 | 13 | function convertFileNameToId(text) { 14 | return text.toLowerCase().match(/([a-z]+[-]*[a-z])\w+/)[0]; 15 | } 16 | 17 | /** 18 | * Gets all the markdown files on a folder, compile them to html and returns 19 | * @param {string} dir - folder containing all the .md files 20 | */ 21 | 22 | function compileMD(dir = 'sections') { 23 | const directory = path.join(__dirname, dir); 24 | const files = fs.readdirSync(directory).sort(); 25 | 26 | const sectionTemplate = (file, content) => { 27 | const message = 'Edit this on GitHub'; 28 | const fileName = convertFileNameToId(file); 29 | const editURL = `https://github.com/animate-css/animate.css/blob/main/docsSource/sections/${file}`; 30 | const parsedContent = md.render(content); 31 | 32 | return ` 33 |
    34 | ${parsedContent} 35 |

    ${message}

    36 |
    37 | `; 38 | }; 39 | 40 | const readMD = (file) => { 41 | const filePath = path.join(__dirname, dir, file); 42 | const content = fs.readFileSync(filePath, 'utf8'); 43 | 44 | return sectionTemplate(file, content); 45 | }; 46 | 47 | const filesContent = files.map((section) => readMD(section)); 48 | 49 | return filesContent.join('\n'); 50 | } 51 | 52 | module.exports = compileMD; 53 | -------------------------------------------------------------------------------- /docsSource/compileAnimationList.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | 4 | /** 5 | * Get and categorize all the animation names and compile 6 | * to HTML lists 7 | * @param {string} dir - directory containing the css file 8 | * @param {string} file - css file name 9 | */ 10 | 11 | function compileAnimationlist(dir = '../source', file = 'animate.css') { 12 | const filePath = path.join(__dirname, dir, file); 13 | const content = fs.readFileSync(filePath, 'utf8'); 14 | const globalRegex = /\/(.*)\w/g; 15 | const itemRegex = /(\/)(.*)(\.)/; 16 | 17 | const rawList = content.match(globalRegex); 18 | let currentGroup; 19 | let list = {}; 20 | 21 | rawList.forEach((i) => { 22 | const item = i.match(itemRegex); 23 | 24 | if (item == null) { 25 | const title = i.replace('/* ', ''); 26 | currentGroup = title; 27 | list[title] = []; 28 | 29 | return currentGroup; 30 | } 31 | 32 | return list[currentGroup].push(item[2]); 33 | }, {}); 34 | 35 | const itemTemplate = (item) => ` 36 |
  • 37 | ${item} 38 | 41 |
    • `; 42 | 43 | const listTemplate = (title, items) => { 44 | const parsedTitle = title.toLowerCase().replace(' ', '_'); 45 | 46 | return ` 47 |
    48 |

    ${title}

    49 | 50 |
    51 | `; 52 | }; 53 | 54 | const compile = (list) => { 55 | const titles = Object.keys(list); 56 | 57 | return titles.map((title) => { 58 | const items = list[title].map((item) => itemTemplate(item)); 59 | return listTemplate(title, items); 60 | }); 61 | }; 62 | 63 | return compile(list).join('\n'); 64 | } 65 | 66 | module.exports = compileAnimationlist; 67 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bugs.yml: -------------------------------------------------------------------------------- 1 | name: Report a Bug 2 | description: Found a bug? Let us know! 3 | labels: 'bug' 4 | body: 5 | # bug description 6 | - type: textarea 7 | id: descrption 8 | attributes: 9 | label: Describe The Bug 10 | description: "A clear and concise description of what the bug is." 11 | validations: 12 | required: true 13 | # steps to reproduce 14 | - type: textarea 15 | id: steps 16 | attributes: 17 | label: Steps To Reproduce 18 | description: "Steps to reproduce the behavior." 19 | placeholder: | 20 | 1. Go to '...' 21 | 2. Click on '....' 22 | 3. Scroll down to '....' 23 | 4. See error 24 | validations: 25 | required: false 26 | # expected behavior 27 | - type: textarea 28 | id: expected 29 | attributes: 30 | label: Expected Behavior 31 | description: "A clear and concise description of what you expected to happen." 32 | validations: 33 | required: false 34 | # screenshots 35 | - type: textarea 36 | id: screenshots 37 | attributes: 38 | label: Screenshots 39 | description: "If applicable, add screenshots to help explain your problem." 40 | validations: 41 | required: false 42 | # desktop 43 | - type: textarea 44 | id: desktop 45 | attributes: 46 | label: Desktop 47 | description: "Please complete the following information." 48 | placeholder: | 49 | - OS: [e.g. iOS] 50 | - Browser [e.g. chrome, safari] 51 | - Version [e.g. 22] 52 | validations: 53 | required: false 54 | # smartphone 55 | - type: textarea 56 | id: mobile 57 | attributes: 58 | label: Smartphone 59 | description: "Please complete the following information." 60 | placeholder: | 61 | - Device: [e.g. iPhone6] 62 | - OS: [e.g. iOS8.1] 63 | - Browser [e.g. stock browser, safari] 64 | - Version [e.g. 22] 65 | validations: 66 | required: false 67 | # additional context 68 | - type: textarea 69 | id: additional-context 70 | attributes: 71 | label: Additional Context 72 | description: "Add any other context about the problem here." 73 | validations: 74 | required: false 75 | -------------------------------------------------------------------------------- /docsSource/sections/07-custom-builds.md: -------------------------------------------------------------------------------- 1 | ## Custom Builds 2 | 3 |

    Custom builds are not possible from a node_modules folder as we don't ship the building tools in the npm module.

    4 | 5 | Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS with proper fallbacks. 6 | 7 | First of all, you’ll need Node and all other dependencies: 8 | 9 | ```shell 10 | $ git clone https://github.com/animate-css/animate.css.git 11 | $ cd animate.css 12 | $ npm install 13 | ``` 14 | 15 | Next, run `npm start` to compile your custom build. Three files will be generated: 16 | 17 | - `animate.css`: raw build, easy to read and without any optimization 18 | - `animate.min.css`: minified build ready for production 19 | - `animate.compat.css`: minified build ready for production **without class prefix**. This should only be used as an easy path for migrations. 20 | 21 | 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. 22 | 23 | ```css 24 | @import 'attention_seekers/bounce.css'; 25 | @import 'attention_seekers/flash.css'; 26 | @import 'attention_seekers/pulse.css'; 27 | @import 'attention_seekers/rubberBand.css'; 28 | @import 'attention_seekers/shake.css'; 29 | @import 'attention_seekers/headShake.css'; 30 | @import 'attention_seekers/swing.css'; 31 | @import 'attention_seekers/tada.css'; 32 | @import 'attention_seekers/wobble.css'; 33 | @import 'attention_seekers/jello.css'; 34 | @import 'attention_seekers/heartBeat.css'; 35 | ``` 36 | 37 | Now, just run `npm start` and your highly optimized build will be generated at the root of the project. 38 | 39 | ### Changing the default prefix 40 | 41 | 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`: 42 | 43 | ```json 44 | /* on Animate.css package.json */ 45 | "animateConfig": { 46 | "prefix": "myCustomPrefix__" 47 | }, 48 | ``` 49 | 50 | then: 51 | 52 | ```shell 53 | $ npm start 54 | ``` 55 | 56 | Easy peasy! 57 | -------------------------------------------------------------------------------- /docsSource/sections/04-javascript.md: -------------------------------------------------------------------------------- 1 | ## Usage with Javascript 2 | 3 | You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. A simple example: 4 | 5 | ```javascript 6 | const element = document.querySelector('.my-element'); 7 | element.classList.add('animate__animated', 'animate__bounceOutLeft'); 8 | ``` 9 | 10 | You can detect when an animation ends: 11 | 12 | ```javascript 13 | const element = document.querySelector('.my-element'); 14 | element.classList.add('animate__animated', 'animate__bounceOutLeft'); 15 | 16 | element.addEventListener('animationend', () => { 17 | // do something 18 | }); 19 | ``` 20 | 21 | or change its duration: 22 | 23 | ```javascript 24 | const element = document.querySelector('.my-element'); 25 | element.style.setProperty('--animate-duration', '0.5s'); 26 | ``` 27 | 28 | You can also use a simple function to add the animations classes and remove them automatically: 29 | 30 | ```javascript 31 | const animateCSS = (element, animation, prefix = 'animate__') => 32 | // We create a Promise and return it 33 | new Promise((resolve, reject) => { 34 | const animationName = `${prefix}${animation}`; 35 | const node = document.querySelector(element); 36 | 37 | node.classList.add(`${prefix}animated`, animationName); 38 | 39 | // When the animation ends, we clean the classes and resolve the Promise 40 | function handleAnimationEnd(event) { 41 | event.stopPropagation(); 42 | node.classList.remove(`${prefix}animated`, animationName); 43 | resolve('Animation ended'); 44 | } 45 | 46 | node.addEventListener('animationend', handleAnimationEnd, {once: true}); 47 | }); 48 | ``` 49 | 50 | And use it like this: 51 | 52 | ```javascript 53 | animateCSS('.my-element', 'bounce'); 54 | 55 | // or 56 | animateCSS('.my-element', 'bounce').then((message) => { 57 | // Do something after the animation 58 | }); 59 | ``` 60 | 61 | 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). 62 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate.css", 3 | "version": "4.1.1", 4 | "description": "A cross-browser library of CSS animations", 5 | "main": "animate.css", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/animate-css/animate.css.git" 9 | }, 10 | "author": { 11 | "name": "Animate.css" 12 | }, 13 | "homepage": "https://animate.style/", 14 | "license": "Hippocratic-2.1", 15 | "animateConfig": { 16 | "prefix": "animate__" 17 | }, 18 | "scripts": { 19 | "start": "npm-run-all raw prod compat", 20 | "compat": "npx postcss source/animate.css -o animate.compat.css --no-map --env compat", 21 | "dev": "npx postcss source/animate.css -o animate.css --no-map --env development -w", 22 | "raw": "npx postcss source/animate.css -o animate.css --no-map --env development", 23 | "prod": "npx postcss source/animate.css -o animate.min.css --no-map --env production", 24 | "format": "prettier --write \"**/*.{js,json,md,css}\"", 25 | "docs:library": "npx postcss source/animate.css -o ./docs/animate.min.css --no-map --env production", 26 | "docs:pages": "node ./docsSource/index.js", 27 | "docs": "npm-run-all docs:library docs:pages", 28 | "version": "npm-run-all start docs && git add -A docs animate.css animate.min.css animate.compat.css", 29 | "postversion": "git push && git push --tags", 30 | "prepare": "husky install" 31 | }, 32 | "browserslist": [ 33 | "> 3%", 34 | "last 2 versions" 35 | ], 36 | "style": "./animate.css", 37 | "jspm": { 38 | "main": "animate.css!", 39 | "format": "global", 40 | "directories": { 41 | "lib": "./" 42 | } 43 | }, 44 | "devDependencies": { 45 | "autoprefixer": "^10.4.7", 46 | "cssnano": "^5.0.17", 47 | "eslint": "^7.32.0", 48 | "husky": "^7.0.4", 49 | "lint-staged": "^11.2.6", 50 | "markdown-it": "^12.3.2", 51 | "npm-run-all": "^4.1.5", 52 | "postcss": "^8.4.14", 53 | "postcss-cli": "^8.3.1", 54 | "postcss-header": "^3.0.1", 55 | "postcss-import": "^14.0.2", 56 | "postcss-prefixer": "^2.1.3", 57 | "postcss-preset-env": "^6.7.0", 58 | "prettier": "^2.7.1" 59 | }, 60 | "lint-staged": { 61 | "*.{mjs,js,json,md,css}": "prettier --write" 62 | }, 63 | "files": [ 64 | "animate.compat.css", 65 | "animate.min.css", 66 | "animate.css", 67 | "source/**/*.css" 68 | ] 69 | } 70 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Animate.css 2 | 3 | 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. 4 | 5 | ## Design Guidelines 6 | 7 | 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. 8 | 9 | The animations in Animate.css should follow a few key principles: 10 | 11 | - **Animations should be subtle.** Avoid creating animations that involve large translations, or span a natural duration of longer than 1 second. 12 | - **Animations should be tolerable.** Related to subtlety, animations should be tolerable—seeing them repeatedly should not become too annoying or overbearing. 13 | - **Animations should not interfere with document flow or control/input availability.** In other words, the absence of an animation should never reduce usability of a product: they should be non-critical and seen as “progressive enhancements”. Avoid animations that change properties such as `position` or `display`. 14 | - **Animations should be helpful.** They should be designed to guide users to a point of interest, ease natural reading order, or to communicate relationships between elements. 15 | - **Animations should feel familiar.** Avoid introducing animations that feel out-of-place compared to the existing set. 16 | - **Animations should feel natural.** Animations should reflect, as much as is reasonable, motion that occurs in natural physics. Avoid extreme timing functions, and model animations on real-world events. 17 | 18 | ## Code Styling 19 | 20 | 1. Match the naming convention (camelCase, categorized [fades, bounces, etc]) 21 | 2. Indent with two spaces 22 | 3. End each file with a blank line 23 | 4. Make sure you have an editorconfig plugin/extension enabled in your editor and all the dependencies installed so editorconfig and prettier can automatically format your code when committing. 24 | 25 | ## How To Contribute 26 | 27 | 1. [Fork](https://help.github.com/articles/fork-a-repo/) the project 28 | 2. Create a new topic branch on your local forked copy 29 | 3. Push your topic branch up to your fork 30 | 4. Create a [pen](https://codepen.io/) demonstrating what your change will do. 31 | 5. [Open a Pull Request](https://help.github.com/articles/about-pull-requests/) with a clear title and description against the `main` branch. 32 | -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ main ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ main ] 20 | schedule: 21 | - cron: '20 21 * * 6' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: [ 'javascript' ] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] 37 | # Learn more: 38 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed 39 | 40 | steps: 41 | - name: Checkout repository 42 | uses: actions/checkout@v2 43 | 44 | # Initializes the CodeQL tools for scanning. 45 | - name: Initialize CodeQL 46 | uses: github/codeql-action/init@v1 47 | with: 48 | languages: ${{ matrix.language }} 49 | # If you wish to specify custom queries, you can do so here or in a config file. 50 | # By default, queries listed here will override any specified in a config file. 51 | # Prefix the list here with "+" to use these queries and those in the config file. 52 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 53 | 54 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 55 | # If this step fails, then you should remove it and run the build manually (see below) 56 | - name: Autobuild 57 | uses: github/codeql-action/autobuild@v1 58 | 59 | # ℹ️ Command-line programs to run using the OS shell. 60 | # 📚 https://git.io/JvXDl 61 | 62 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 63 | # and modify them (or add more) to build your code if your project 64 | # uses a compiled language 65 | 66 | #- run: | 67 | # make bootstrap 68 | # make release 69 | 70 | - name: Perform CodeQL Analysis 71 | uses: github/codeql-action/analyze@v1 72 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Animate.css 2 | 3 | [![GitHub Version](https://img.shields.io/github/release/animate-css/animate.css.svg?style=for-the-badge)](https://github.com/animate-css/animate.css/releases) [![Github Star](https://img.shields.io/github/stars/animate-css/animate.css.svg?style=for-the-badge)](https://github.com/animate-css/animate.css/stargazers) [![Github Fork](https://img.shields.io/github/forks/animate-css/animate.css.svg?style=for-the-badge)](https://github.com/animate-css/animate.css/network/members) [![License](https://img.shields.io/badge/license-hippocratic%20license-orange.svg?longCache=true&style=for-the-badge)](https://github.com/animate-css/animate.css/blob/main/LICENSE) 4 | 5 | > If you need the old docs - v3.x.x and under - you can find it [here](https://github.com/animate-css/animate.css/tree/a8d92e585b1b302f7749809c3308d5e381f9cb17). 6 | 7 | ## _Just-add-water CSS animation_ 8 | 9 | ## Installation 10 | 11 | Install with npm: 12 | 13 | ```shell 14 | npm install animate.css --save 15 | ``` 16 | 17 | Install with yarn: 18 | 19 | ```shell 20 | yarn add animate.css 21 | ``` 22 | 23 | ## Getting started 24 | 25 | You can find the Animate.css documentation on the [website](https://animate.style/). 26 | 27 | ## Accessibility 28 | 29 | 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. 30 | 31 | ## Core Team 32 | 33 | | ![Daniel Eden](https://avatars2.githubusercontent.com/u/439365?s=460&u=512b4cc5324938ae40bbb8f3b7769d335953cd3a&v=4) | ![Elton Mesquita](https://avatars2.githubusercontent.com/u/5007208?s=460&u=418401ee605824272e5dcb955fd64ea24546a857&v=4) | ![Waren Gonzaga](https://avatars1.githubusercontent.com/u/15052701?s=460&u=9e58364978379536d3f26c4ce5cae1a2a449a0e4&v=4) | 34 | | --- | --- | --- | 35 | | [Daniel Eden](https://github.com/daneden) | [Elton Mesquita](https://github.com/eltonmesquita) | [Waren Gonzaga](https://github.com/WarenGonzaga) | 36 | | Animate.css Creator | Maintainer | Core Contributor | 37 | 38 | ## License 39 | 40 | Animate.css is licensed under the [Hippocratic License](http://firstdonoharm.dev). 41 | 42 | ## Code of Conduct 43 | 44 | This project and everyone participating in it is 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 [animate@eltonmesquita.com](mailto:animate@eltonmesquita.com). 45 | 46 | ## Contributing 47 | 48 | Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](https://codepen.io). That **last one is important**. 49 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | 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. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | - Using welcoming and inclusive language 12 | - Being respectful of differing viewpoints and experiences 13 | - Gracefully accepting constructive criticism 14 | - Focusing on what is best for the community 15 | - Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | - The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | - Trolling, insulting/derogatory comments, and personal or political attacks 21 | - Public or private harassment 22 | - Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | - Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | 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. 28 | 29 | 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. 30 | 31 | ## Scope 32 | 33 | 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. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at animate@eltonmesquita.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. 38 | 39 | 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. 40 | 41 | ## Attribution 42 | 43 | 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 44 | 45 | [homepage]: https://www.contributor-covenant.org 46 | 47 | For answers to common questions about this code of conduct, see https://www.contributor-covenant.org/faq 48 | -------------------------------------------------------------------------------- /docsSource/sections/01-usage.md: -------------------------------------------------------------------------------- 1 | ## Installation and Usage 2 | 3 | ### Installing 4 | 5 | Install with npm: 6 | 7 | ```shell 8 | $ npm install animate.css --save 9 | ``` 10 | 11 | Or install with Yarn (this will only work with appropriate tooling like Webpack, Parcel, etc. If you are not using any tool for packing or bundling your code, you can simply use the CDN method below): 12 | 13 | ```shell 14 | $ yarn add animate.css 15 | ``` 16 | 17 | Import it into your file: 18 | 19 | ```js 20 | import 'animate.css'; 21 | ``` 22 | 23 | Or add it directly to your webpage using a CDN: 24 | 25 | ```html 26 | 27 | 31 | 32 | ``` 33 | 34 | ### Basic usage 35 | 36 | 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!): 37 | 38 | ```html 39 |

    An animated element

    40 | ``` 41 | 42 | That's it! You've got a CSS animated element. Super! 43 | 44 | > 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. 45 | 46 | #### Using `@keyframes` 47 | 48 | Even though the library provides you a few helper classes like the `animated` class to get you up running quickly, you can directly use the provided animations `keyframes`. This provides a flexible way to use Animate.css with your current projects without having to refactor your HTML code. 49 | 50 | Example: 51 | 52 | ```css 53 | .my-element { 54 | display: inline-block; 55 | margin: 0 0.5rem; 56 | 57 | animation: bounce; /* referring directly to the animation's @keyframe declaration */ 58 | animation-duration: 2s; /* don't forget to set a duration! */ 59 | } 60 | ``` 61 | 62 | 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. 63 | 64 | #### CSS Custom Properties (CSS Variables) 65 | 66 | Since version 4, Animate.css uses custom properties (also known as CSS variables) to define the animation's duration, delay, and iterations. This makes Animate.css very flexible and customizable. Need to change an animation duration? Just set a new value globally or locally. 67 | 68 | Example: 69 | 70 | ```css 71 | /* This only changes this particular animation duration */ 72 | .animate__animated.animate__bounce { 73 | --animate-duration: 2s; 74 | } 75 | 76 | /* This changes all the animations globally */ 77 | :root { 78 | --animate-duration: 800ms; 79 | --animate-delay: 0.9s; 80 | } 81 | ``` 82 | 83 | Custom properties also make it easy to change all your animation's time-constrained properties on the fly. It means that you can have a slow-motion or time-lapse effect with a javascript one-liner: 84 | 85 | ```javascript 86 | // All animations will take twice the time to accomplish 87 | document.documentElement.style.setProperty('--animate-duration', '2s'); 88 | 89 | // All animations will take half the time to accomplish 90 | document.documentElement.style.setProperty('--animate-duration', '.5s'); 91 | ``` 92 | 93 | Even though some aging browsers do not support custom properties, Animate.css provides a proper fallback, widening its support for any browser that supports CSS animations. 94 | -------------------------------------------------------------------------------- /docsSource/sections/02-utilities.md: -------------------------------------------------------------------------------- 1 | ## Utility Classes 2 | 3 | Animate.css comes packed with a few utility classes to simplify its use. 4 | 5 | ### Delay classes 6 | 7 | You can add delays directly on the element's class attribute, just like this: 8 | 9 | ```html 10 |
    Example
    11 | ``` 12 | 13 | Animate.css provides the following delays: 14 | 15 | | Class name | Default delay time | 16 | | ------------------- | ------------------ | 17 | | `animate__delay-2s` | `2s` | 18 | | `animate__delay-3s` | `3s` | 19 | | `animate__delay-4s` | `4s` | 20 | | `animate__delay-5s` | `5s` | 21 | 22 | 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: 23 | 24 | ```css 25 | /* All delay classes will take 2x longer to start */ 26 | :root { 27 | --animate-delay: 2s; 28 | } 29 | 30 | /* All delay classes will take half the time to start */ 31 | :root { 32 | --animate-delay: 0.5s; 33 | } 34 | ``` 35 | 36 | ### Slow, slower, fast, and Faster classes 37 | 38 | You can control the speed of the animation by adding these classes, as below: 39 | 40 | ```html 41 |
    Example
    42 | ``` 43 | 44 | | Class name | Default speed time | 45 | | ----------------- | ------------------ | 46 | | `animate__slow` | `2s` | 47 | | `animate__slower` | `3s` | 48 | | `animate__fast` | `800ms` | 49 | | `animate__faster` | `500ms` | 50 | 51 | The `animate__animated` class has a default speed of `1s`. You can also customize the animations duration through the `--animate-duration` property, globally or locally. This will affect both the animations and the utility classes. Example: 52 | 53 | ```css 54 | /* All animations will take twice as long to finish */ 55 | :root { 56 | --animate-duration: 2s; 57 | } 58 | 59 | /* Only this element will take half the time to finish */ 60 | .my-element { 61 | --animate-duration: 0.5s; 62 | } 63 | ``` 64 | 65 | 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! 66 | 67 | ### Repeating classes 68 | 69 | You can control the iteration count of the animation by adding these classes, like below: 70 | 71 | ```html 72 |
    Example
    73 | ``` 74 | 75 | | Class Name | Default iteration count | 76 | | ------------------- | ----------------------- | 77 | | `animate__repeat-1` | `1` | 78 | | `animate__repeat-2` | `2` | 79 | | `animate__repeat-3` | `3` | 80 | | `animate__infinite` | `infinite` | 81 | 82 | As with the delay 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 by setting the `--animate-repeat` property to a longer or a shorter value: 83 | 84 | ```css 85 | /* The element will repeat the animation 2x 86 | It's better to set this property locally and not globally or 87 | you might end up with a messy situation */ 88 | .my-element { 89 | --animate-repeat: 2; 90 | } 91 | ``` 92 | 93 | Notice that `animate__infinite` doesn't use any custom property, and changes to `--animate-repeat` will have no effect. Don't forget to read the [best practices](#best-practices) section to make the best use of repeating animations. 94 | -------------------------------------------------------------------------------- /docsSource/sections/03-best-practices.md: -------------------------------------------------------------------------------- 1 | ## Best Practices 2 | 3 | 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. 4 | 5 | ### Meaningful animations 6 | 7 | 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. 8 | 9 | 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. 10 | 11 | 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. 12 | 13 | ### Don't animate large elements 14 | 15 | 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. 16 | 17 | ### Don't animate root elements 18 | 19 | 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: 20 | 21 | ```html 22 | 23 |
    24 | 25 |
    26 | 27 | ``` 28 | 29 | ### Infinite animations should be avoided 30 | 31 | Even though 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! 32 | 33 | ### Mind the initial and final state of your elements 34 | 35 | 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. 36 | 37 | ### Don't disable the `prefers-reduced-motion` media query 38 | 39 | 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: 40 | 41 |

    42 | See the Pen 43 | Prefers-reduce-motion media query by Elton Mesquita (@eltonmesquita) 44 | on CodePen. 45 |

    46 | 47 | 48 |

    Gotchas

    49 | 50 | ### You can't animate inline elements 51 | 52 | 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. 53 | 54 | ### Overflow 55 | 56 | 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. 57 | 58 | ### Intervals between repeats 59 | 60 | Unfortunately, this isn't possible with pure CSS right now. You have to use Javascript to achieve this result. 61 | -------------------------------------------------------------------------------- /source/animate.css: -------------------------------------------------------------------------------- 1 | @import '_vars.css'; 2 | @import '_base.css'; 3 | 4 | /* Attention seekers */ 5 | @import 'attention_seekers/bounce.css'; 6 | @import 'attention_seekers/flash.css'; 7 | @import 'attention_seekers/pulse.css'; 8 | @import 'attention_seekers/rubberBand.css'; 9 | @import 'attention_seekers/shakeX.css'; 10 | @import 'attention_seekers/shakeY.css'; 11 | @import 'attention_seekers/headShake.css'; 12 | @import 'attention_seekers/swing.css'; 13 | @import 'attention_seekers/tada.css'; 14 | @import 'attention_seekers/wobble.css'; 15 | @import 'attention_seekers/jello.css'; 16 | @import 'attention_seekers/heartBeat.css'; 17 | 18 | /* Back entrances */ 19 | @import 'back_entrances/backInDown.css'; 20 | @import 'back_entrances/backInLeft.css'; 21 | @import 'back_entrances/backInRight.css'; 22 | @import 'back_entrances/backInUp.css'; 23 | 24 | /* Back exits */ 25 | @import 'back_exits/backOutDown.css'; 26 | @import 'back_exits/backOutLeft.css'; 27 | @import 'back_exits/backOutRight.css'; 28 | @import 'back_exits/backOutUp.css'; 29 | 30 | /* Bouncing entrances */ 31 | @import 'bouncing_entrances/bounceIn.css'; 32 | @import 'bouncing_entrances/bounceInDown.css'; 33 | @import 'bouncing_entrances/bounceInLeft.css'; 34 | @import 'bouncing_entrances/bounceInRight.css'; 35 | @import 'bouncing_entrances/bounceInUp.css'; 36 | 37 | /* Bouncing exits */ 38 | @import 'bouncing_exits/bounceOut.css'; 39 | @import 'bouncing_exits/bounceOutDown.css'; 40 | @import 'bouncing_exits/bounceOutLeft.css'; 41 | @import 'bouncing_exits/bounceOutRight.css'; 42 | @import 'bouncing_exits/bounceOutUp.css'; 43 | 44 | /* Fading entrances */ 45 | @import 'fading_entrances/fadeIn.css'; 46 | @import 'fading_entrances/fadeInDown.css'; 47 | @import 'fading_entrances/fadeInDownBig.css'; 48 | @import 'fading_entrances/fadeInLeft.css'; 49 | @import 'fading_entrances/fadeInLeftBig.css'; 50 | @import 'fading_entrances/fadeInRight.css'; 51 | @import 'fading_entrances/fadeInRightBig.css'; 52 | @import 'fading_entrances/fadeInUp.css'; 53 | @import 'fading_entrances/fadeInUpBig.css'; 54 | @import 'fading_entrances/fadeInTopLeft.css'; 55 | @import 'fading_entrances/fadeInTopRight.css'; 56 | @import 'fading_entrances/fadeInBottomLeft.css'; 57 | @import 'fading_entrances/fadeInBottomRight.css'; 58 | 59 | /* Fading exits */ 60 | @import 'fading_exits/fadeOut.css'; 61 | @import 'fading_exits/fadeOutDown.css'; 62 | @import 'fading_exits/fadeOutDownBig.css'; 63 | @import 'fading_exits/fadeOutLeft.css'; 64 | @import 'fading_exits/fadeOutLeftBig.css'; 65 | @import 'fading_exits/fadeOutRight.css'; 66 | @import 'fading_exits/fadeOutRightBig.css'; 67 | @import 'fading_exits/fadeOutUp.css'; 68 | @import 'fading_exits/fadeOutUpBig.css'; 69 | @import 'fading_exits/fadeOutTopLeft.css'; 70 | @import 'fading_exits/fadeOutTopRight.css'; 71 | @import 'fading_exits/fadeOutBottomRight.css'; 72 | @import 'fading_exits/fadeOutBottomLeft.css'; 73 | 74 | /* Flippers */ 75 | @import 'flippers/flip.css'; 76 | @import 'flippers/flipInX.css'; 77 | @import 'flippers/flipInY.css'; 78 | @import 'flippers/flipOutX.css'; 79 | @import 'flippers/flipOutY.css'; 80 | 81 | /* Lightspeed */ 82 | @import 'lightspeed/lightSpeedInRight.css'; 83 | @import 'lightspeed/lightSpeedInLeft.css'; 84 | @import 'lightspeed/lightSpeedOutRight.css'; 85 | @import 'lightspeed/lightSpeedOutLeft.css'; 86 | 87 | /* Rotating entrances */ 88 | @import 'rotating_entrances/rotateIn.css'; 89 | @import 'rotating_entrances/rotateInDownLeft.css'; 90 | @import 'rotating_entrances/rotateInDownRight.css'; 91 | @import 'rotating_entrances/rotateInUpLeft.css'; 92 | @import 'rotating_entrances/rotateInUpRight.css'; 93 | 94 | /* Rotating exits */ 95 | @import 'rotating_exits/rotateOut.css'; 96 | @import 'rotating_exits/rotateOutDownLeft.css'; 97 | @import 'rotating_exits/rotateOutDownRight.css'; 98 | @import 'rotating_exits/rotateOutUpLeft.css'; 99 | @import 'rotating_exits/rotateOutUpRight.css'; 100 | 101 | /* Specials */ 102 | @import 'specials/hinge.css'; 103 | @import 'specials/jackInTheBox.css'; 104 | @import 'specials/rollIn.css'; 105 | @import 'specials/rollOut.css'; 106 | 107 | /* Zooming entrances */ 108 | @import 'zooming_entrances/zoomIn.css'; 109 | @import 'zooming_entrances/zoomInDown.css'; 110 | @import 'zooming_entrances/zoomInLeft.css'; 111 | @import 'zooming_entrances/zoomInRight.css'; 112 | @import 'zooming_entrances/zoomInUp.css'; 113 | 114 | /* Zooming exits */ 115 | @import 'zooming_exits/zoomOut.css'; 116 | @import 'zooming_exits/zoomOutDown.css'; 117 | @import 'zooming_exits/zoomOutLeft.css'; 118 | @import 'zooming_exits/zoomOutRight.css'; 119 | @import 'zooming_exits/zoomOutUp.css'; 120 | 121 | /* Sliding entrances */ 122 | @import 'sliding_entrances/slideInDown.css'; 123 | @import 'sliding_entrances/slideInLeft.css'; 124 | @import 'sliding_entrances/slideInRight.css'; 125 | @import 'sliding_entrances/slideInUp.css'; 126 | 127 | /* Sliding exits */ 128 | @import 'sliding_exits/slideOutDown.css'; 129 | @import 'sliding_exits/slideOutLeft.css'; 130 | @import 'sliding_exits/slideOutRight.css'; 131 | @import 'sliding_exits/slideOutUp.css'; 132 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Animate.css Copyright 2021 Daniel Eden (“Licensor”) 2 | 3 | Hippocratic License Version Number: 2.1. 4 | 5 | Purpose. The purpose of this License is for the Licensor named above to permit the Licensee (as defined below) broad permission, if consistent with Human Rights Laws and Human Rights Principles (as each is defined below), to use and work with the Software (as defined below) within the full scope of Licensor’s copyright and patent rights, if any, in the Software, while ensuring attribution and protecting the Licensor from liability. 6 | 7 | Permission and Conditions. The Licensor grants permission by this license (“License”), free of charge, to the extent of Licensor’s rights under applicable copyright and patent law, to any person or entity (the “Licensee”) obtaining a copy of this software and associated documentation files (the “Software”), to do everything with the Software that would otherwise infringe (i) the Licensor’s copyright in the Software or (ii) any patent claims to the Software that the Licensor can license or becomes able to license, subject to all of the following terms and conditions: 8 | 9 | * Acceptance. This License is automatically offered to every person and entity subject to its terms and conditions. Licensee accepts this License and agrees to its terms and conditions by taking any action with the Software that, absent this License, would infringe any intellectual property right held by Licensor. 10 | 11 | * Notice. Licensee must ensure that everyone who gets a copy of any part of this Software from Licensee, with or without changes, also receives the License and the above copyright notice (and if included by the Licensor, patent, trademark and attribution notice). Licensee must cause any modified versions of the Software to carry prominent notices stating that Licensee changed the Software. For clarity, although Licensee is free to create modifications of the Software and distribute only the modified portion created by Licensee with additional or different terms, the portion of the Software not modified must be distributed pursuant to this License. If anyone notifies Licensee in writing that Licensee has not complied with this Notice section, Licensee can keep this License by taking all practical steps to comply within 30 days after the notice. If Licensee does not do so, Licensee’s License (and all rights licensed hereunder) shall end immediately. 12 | 13 | * Compliance with Human Rights Principles and Human Rights Laws. 14 | 15 | 1. Human Rights Principles. 16 | 17 | (a) Licensee is advised to consult the articles of the United Nations Universal Declaration of Human Rights and the United Nations Global Compact that define recognized principles of international human rights (the “Human Rights Principles”). Licensee shall use the Software in a manner consistent with Human Rights Principles. 18 | 19 | (b) Unless the Licensor and Licensee agree otherwise, any dispute, controversy, or claim arising out of or relating to (i) Section 1(a) regarding Human Rights Principles, including the breach of Section 1(a), termination of this License for breach of the Human Rights Principles, or invalidity of Section 1(a) or (ii) a determination of whether any Law is consistent or in conflict with Human Rights Principles pursuant to Section 2, below, shall be settled by arbitration in accordance with the Hague Rules on Business and Human Rights Arbitration (the “Rules”); provided, however, that Licensee may elect not to participate in such arbitration, in which event this License (and all rights licensed hereunder) shall end immediately. The number of arbitrators shall be one unless the Rules require otherwise. 20 | 21 | Unless both the Licensor and Licensee agree to the contrary: (1) All documents and information concerning the arbitration shall be public and may be disclosed by any party; (2) The repository referred to under Article 43 of the Rules shall make available to the public in a timely manner all documents concerning the arbitration which are communicated to it, including all submissions of the parties, all evidence admitted into the record of the proceedings, all transcripts or other recordings of hearings and all orders, decisions and awards of the arbitral tribunal, subject only to the arbitral tribunal's powers to take such measures as may be necessary to safeguard the integrity of the arbitral process pursuant to Articles 18, 33, 41 and 42 of the Rules; and (3) Article 26(6) of the Rules shall not apply. 22 | 23 | 2. Human Rights Laws. The Software shall not be used by any person or entity for any systems, activities, or other uses that violate any Human Rights Laws. “Human Rights Laws” means any applicable laws, regulations, or rules (collectively, “Laws”) that protect human, civil, labor, privacy, political, environmental, security, economic, due process, or similar rights; provided, however, that such Laws are consistent and not in conflict with Human Rights Principles (a dispute over the consistency or a conflict between Laws and Human Rights Principles shall be determined by arbitration as stated above). Where the Human Rights Laws of more than one jurisdiction are applicable or in conflict with respect to the use of the Software, the Human Rights Laws that are most protective of the individuals or groups harmed shall apply. 24 | 25 | 3. Indemnity. Licensee shall hold harmless and indemnify Licensor (and any other contributor) against all losses, damages, liabilities, deficiencies, claims, actions, judgments, settlements, interest, awards, penalties, fines, costs, or expenses of whatever kind, including Licensor’s reasonable attorneys’ fees, arising out of or relating to Licensee’s use of the Software in violation of Human Rights Laws or Human Rights Principles. 26 | 27 | * Failure to Comply. Any failure of Licensee to act according to the terms and conditions of this License is both a breach of the License and an infringement of the intellectual property rights of the Licensor (subject to exceptions under Laws, e.g., fair use). In the event of a breach or infringement, the terms and conditions of this License may be enforced by Licensor under the Laws of any jurisdiction to which Licensee is subject. Licensee also agrees that the Licensor may enforce the terms and conditions of this License against Licensee through specific performance (or similar remedy under Laws) to the extent permitted by Laws. For clarity, except in the event of a breach of this License, infringement, or as otherwise stated in this License, Licensor may not terminate this License with Licensee. 28 | 29 | * Enforceability and Interpretation. If any term or provision of this License is determined to be invalid, illegal, or unenforceable by a court of competent jurisdiction, then such invalidity, illegality, or unenforceability shall not affect any other term or provision of this License or invalidate or render unenforceable such term or provision in any other jurisdiction; provided, however, subject to a court modification pursuant to the immediately following sentence, if any term or provision of this License pertaining to Human Rights Laws or Human Rights Principles is deemed invalid, illegal, or unenforceable against Licensee by a court of competent jurisdiction, all rights in the Software granted to Licensee shall be deemed null and void as between Licensor and Licensee. Upon a determination that any term or provision is invalid, illegal, or unenforceable, to the extent permitted by Laws, the court may modify this License to affect the original purpose that the Software be used in compliance with Human Rights Principles and Human Rights Laws as closely as possible. The language in this License shall be interpreted as to its fair meaning and not strictly for or against any party. 30 | 31 | * Disclaimer. TO THE FULL EXTENT ALLOWED BY LAW, THIS SOFTWARE COMES “AS IS,” WITHOUT ANY WARRANTY, EXPRESS OR IMPLIED, AND LICENSOR AND ANY OTHER CONTRIBUTOR SHALL NOT BE LIABLE TO ANYONE FOR ANY DAMAGES OR OTHER LIABILITY ARISING FROM, OUT OF, OR IN CONNECTION WITH THE SOFTWARE OR THIS LICENSE, UNDER ANY KIND OF LEGAL CLAIM. 32 | 33 | This Hippocratic License is an Ethical Source license (https://ethicalsource.dev) and is offered for use by licensors and licensees at their own risk, on an “AS IS” basis, and with no warranties express or implied, to the maximum extent permitted by Laws. 34 | -------------------------------------------------------------------------------- /docsSource/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Animate.css | A cross-browser library of CSS animations. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 34 | 38 | 39 | 40 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
    54 |
    55 |

    Animate.css

    56 |

    Just-add-water CSS animations

    57 |

    58 | 59 |

    60 |
    61 | 62 |
    63 | 77 | 78 | {{list}} 79 |
    80 | 81 | 88 |
    89 | 90 |
    91 |
    92 |
    93 |

    94 | Documentation 95 |

    96 |
    97 |
    98 | 99 |
    100 | 101 | 108 | 109 | 110 | 111 | 112 | 113 |
    114 |
    115 | {{docs}} 116 |
    117 | 136 |
    137 |
    138 |
    139 | 140 | 146 | 147 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | -------------------------------------------------------------------------------- /docs/style.css: -------------------------------------------------------------------------------- 1 | /*-----------------------------------*\ 2 | $BASE 3 | \*-----------------------------------*/ 4 | 5 | :root { 6 | --c-main: #351c75; 7 | --c-secondary: #e69138; 8 | --c-dark: #333; 9 | --c-background: #fce5cd; 10 | --c-background-dark: #f7d7b5; 11 | } 12 | 13 | html, 14 | body { 15 | margin: 0; 16 | padding: 0; 17 | } 18 | 19 | html { 20 | scroll-behavior: smooth; 21 | 22 | color: var(--c-dark); 23 | font-size: 100%; 24 | font-family: 'Work Sans', sans-serif; 25 | line-height: 1.2; 26 | } 27 | 28 | @media screen and (min-width: 700px) { 29 | html { 30 | font-size: 112.5%; 31 | line-height: 1.35; 32 | } 33 | } 34 | 35 | *, 36 | * *, 37 | *::before, 38 | *::after { 39 | box-sizing: border-box; 40 | } 41 | 42 | img { 43 | max-width: 100%; 44 | height: auto; 45 | } 46 | 47 | iframe { 48 | max-width: 100%; 49 | } 50 | 51 | a, 52 | a:visited { 53 | color: var(--c-main); 54 | } 55 | 56 | pre, 57 | table { 58 | display: block; 59 | max-width: 100%; 60 | overflow-x: auto; 61 | } 62 | 63 | code { 64 | font-size: 1em; 65 | background: var(--c-background); 66 | } 67 | 68 | pre { 69 | padding: 1rem; 70 | 71 | background-color: var(--c-dark); 72 | border-radius: 0.25em; 73 | color: #fff; 74 | } 75 | 76 | pre code { 77 | background-color: transparent; 78 | font-size: 0.8rem !important; 79 | } 80 | 81 | /*-----------------------------------*\ 82 | $TYPOGRAPHY 83 | \*-----------------------------------*/ 84 | 85 | p, 86 | ul, 87 | ol, 88 | hr, 89 | table, 90 | pre, 91 | h1, 92 | h2, 93 | h3, 94 | h4, 95 | h5, 96 | h6 { 97 | margin-top: 1.5em; 98 | margin-bottom: 0; 99 | } 100 | 101 | p { 102 | margin-bottom: 1.5rem; 103 | } 104 | 105 | h1, 106 | h2, 107 | h3, 108 | h4, 109 | h5, 110 | h6 { 111 | color: var(--c-main); 112 | } 113 | 114 | h1 { 115 | font-size: 3.998rem; 116 | } 117 | 118 | h2 { 119 | font-size: 1.999rem; 120 | } 121 | 122 | h3 { 123 | font-size: 1.414rem; 124 | } 125 | 126 | h4 { 127 | font-size: 1.25rem; 128 | } 129 | 130 | h5 { 131 | font-size: 1rem; 132 | } 133 | 134 | /*-----------------------------------*\ 135 | $GENERICS 136 | \*-----------------------------------*/ 137 | 138 | .button { 139 | padding: 0.4em 1em; 140 | 141 | color: var(--c-main); 142 | border-radius: 4px; 143 | border: 2px solid var(--c-main); 144 | background: transparent; 145 | 146 | font-family: inherit; 147 | font-size: 0.9rem; 148 | text-decoration: none; 149 | } 150 | 151 | .warning { 152 | padding: 1rem; 153 | 154 | color: #000; 155 | background: var(--c-background-dark); 156 | border-radius: 0.25em; 157 | 158 | font-style: italic; 159 | } 160 | 161 | blockquote { 162 | border-left: 6px solid var(--c-secondary); 163 | padding-left: 1rem; 164 | margin-left: 0; 165 | } 166 | 167 | /*-----------------------------------*\ 168 | $INTRO 169 | \*-----------------------------------*/ 170 | 171 | .intro { 172 | position: relative; 173 | display: grid; 174 | grid-template-columns: [callout] 1fr; 175 | grid-template-rows: 1fr auto; 176 | grid-column-gap: 0; 177 | grid-row-gap: 1rem; 178 | column-gap: 0; 179 | row-gap: 1rem; 180 | grid-template-areas: 181 | 'callout animation-list' 182 | 'footer aimation-list'; 183 | 184 | max-width: 100%; 185 | height: calc(100vh - 2.55rem); 186 | overflow: hidden; 187 | 188 | background-color: var(--c-background); 189 | } 190 | 191 | @media (min-width: 700px) { 192 | .intro { 193 | height: calc(100vh - 2.8rem); 194 | grid-column-gap: 1rem; 195 | column-gap: 1rem; 196 | grid-template-columns: [callout] 1fr [sidebar] 250px; 197 | } 198 | } 199 | 200 | .callout { 201 | grid-area: callout; 202 | align-self: center; 203 | justify-self: center; 204 | 205 | text-align: center; 206 | } 207 | 208 | .callout-title { 209 | margin-bottom: 0; 210 | 211 | animation-delay: 0.25s; 212 | 213 | font-size: 4rem; 214 | font-size: min(14vw, 4rem); 215 | } 216 | 217 | @media (min-width: 700px) { 218 | .callout-title { 219 | animation-delay: 0s; 220 | } 221 | } 222 | 223 | .callout-subtitle { 224 | margin-top: 0; 225 | 226 | animation-delay: 0.3s; 227 | 228 | color: var(--c-secondary); 229 | font-size: 1.3333rem; 230 | font-size: min(10vw, 1.3333rem); 231 | } 232 | 233 | .callout-showList { 234 | margin-top: 2rem; 235 | animation-delay: 0.5s; 236 | } 237 | 238 | @media (min-width: 700px) { 239 | .callout-showList { 240 | display: none; 241 | } 242 | } 243 | 244 | @media (min-width: 1000px) { 245 | .callout-hideList { 246 | display: none; 247 | } 248 | } 249 | 250 | .animation-list { 251 | position: absolute; 252 | top: 0; 253 | left: 100%; 254 | height: 100%; 255 | z-index: 90; 256 | 257 | grid-area: animation-list; 258 | grid-row: 1 / 3; 259 | overflow-y: auto; 260 | padding: 2rem; 261 | 262 | animation-delay: 0.7s; 263 | animation-fill-mode: backwards; 264 | transition: transform 0.2s ease-out; 265 | 266 | background-color: var(--c-background-dark); 267 | } 268 | 269 | .animationList-active .animation-list { 270 | transform: translateX(-100%); 271 | } 272 | 273 | @media (min-width: 700px) { 274 | .animation-list { 275 | position: relative; 276 | left: auto; 277 | transform: none !important; 278 | } 279 | } 280 | 281 | .intro-footer { 282 | grid-area: footer; 283 | justify-self: center; 284 | padding-bottom: 1rem; 285 | 286 | font-size: 0.75rem; 287 | text-align: center; 288 | } 289 | 290 | .animation-item { 291 | cursor: pointer; 292 | display: flex; 293 | justify-content: space-between; 294 | } 295 | 296 | .animation-item--title { 297 | width: 100%; 298 | } 299 | 300 | .tooltip { 301 | position: absolute; 302 | bottom: calc(100% + 0.76em); 303 | right: -1em; 304 | padding: 0.5em 0.75em; 305 | 306 | background-color: var(--c-main); 307 | color: #fff; 308 | border-radius: 4px; 309 | 310 | line-height: 1; 311 | white-space: nowrap; 312 | 313 | visibility: hidden; 314 | } 315 | 316 | .tooltip::before { 317 | content: ''; 318 | position: absolute; 319 | top: 100%; 320 | right: 1.1em; 321 | 322 | width: 0; 323 | height: 0; 324 | 325 | border-style: solid; 326 | border-width: 6px 4px 0 4px; 327 | border-color: var(--c-main) transparent transparent transparent; 328 | } 329 | 330 | .copy-icon { 331 | position: relative; 332 | height: 10px; 333 | border: 1px solid rgba(0, 0, 0, 0.3); 334 | align-self: center; 335 | outline: none; 336 | cursor: pointer; 337 | background: none; 338 | background: #f7d7b5; 339 | visibility: hidden; 340 | } 341 | 342 | .copy-icon::before { 343 | content: ''; 344 | position: absolute; 345 | right: -4px; 346 | top: -4px; 347 | width: 120%; 348 | height: 120%; 349 | border: 1px solid rgba(0, 0, 0, 0.3); 350 | z-index: -1; 351 | } 352 | 353 | .animation-item:hover .copy-icon { 354 | visibility: visible; 355 | } 356 | 357 | .animation-item .copy-icon:hover, 358 | .animation-item .copy-icon:hover::before { 359 | border-color: black; 360 | } 361 | 362 | .copy-icon:hover .tooltip { 363 | visibility: visible; 364 | } 365 | 366 | .animation-group, 367 | .animation-title { 368 | font-size: 1rem; 369 | } 370 | 371 | .animation-title { 372 | margin-bottom: 0.2em; 373 | 374 | color: var(--c-dark); 375 | } 376 | 377 | .animation-group { 378 | margin: 0; 379 | padding: 0; 380 | 381 | list-style: none; 382 | line-height: 1.4; 383 | } 384 | 385 | /*-----------------------------------*\ 386 | $DOCS 387 | \*-----------------------------------*/ 388 | 389 | .container { 390 | gap: 1rem; 391 | margin: 0 auto; 392 | 393 | max-width: 100%; 394 | } 395 | 396 | @media (min-width: 1000px) { 397 | .container { 398 | display: grid; 399 | grid-template-rows: 1fr; 400 | grid-template-columns: calc(100% - 300px - 1rem) 300px; 401 | } 402 | } 403 | 404 | @media (min-width: 1520px) { 405 | .container { 406 | grid-template-rows: 1fr; 407 | grid-template-columns: 1fr 1100px 2fr; 408 | } 409 | } 410 | 411 | .docs { 412 | position: relative; 413 | } 414 | 415 | .docs-header { 416 | position: relative; 417 | padding: 0.5rem 0; 418 | 419 | background-color: var(--c-main); 420 | z-index: 100; 421 | } 422 | 423 | .docs-mainTitle { 424 | grid-column: 1 / 2; 425 | padding-left: 1rem; 426 | margin-top: 0; 427 | 428 | font-size: 1.3333rem; 429 | } 430 | 431 | .docs-mainTitle a { 432 | color: var(--c-secondary); 433 | text-decoration: none; 434 | } 435 | 436 | @media (min-width: 1520px) { 437 | .docs-mainTitle { 438 | grid-column: 2 / 3; 439 | } 440 | } 441 | 442 | .meta { 443 | padding-left: 2rem; 444 | margin-top: 1rem; 445 | } 446 | 447 | .content { 448 | padding: 0 1rem; 449 | margin-bottom: 2rem; 450 | } 451 | 452 | @media (min-width: 1520px) { 453 | .content { 454 | grid-column: 2 / 3; 455 | } 456 | } 457 | 458 | .hamburger { 459 | --size: 30px; 460 | 461 | display: flex; 462 | align-items: center; 463 | justify-content: center; 464 | position: sticky; 465 | top: 2rem; 466 | left: 100%; 467 | width: var(--size); 468 | height: var(--size); 469 | 470 | background-color: var(--c-secondary); 471 | transition: transform 0.2s ease-out; 472 | 473 | text-align: center; 474 | } 475 | 476 | .hamburger-active .hamburger { 477 | transform: translateX(-240px); 478 | } 479 | 480 | @media (min-width: 1000px) { 481 | .hamburger { 482 | display: none; 483 | } 484 | } 485 | 486 | .sidebar { 487 | position: fixed; 488 | top: 0; 489 | left: 100%; 490 | z-index: 100; 491 | 492 | width: 240px; 493 | height: 100%; 494 | padding-right: 1rem; 495 | 496 | background: var(--c-background-dark); 497 | transition: transform 0.2s ease-out; 498 | } 499 | 500 | .hamburger-active .sidebar { 501 | transform: translateX(-100%); 502 | } 503 | 504 | @media (min-width: 1000px) { 505 | .sidebar { 506 | position: static; 507 | width: auto; 508 | height: auto; 509 | } 510 | 511 | .hamburger-active .sidebar { 512 | transform: none; 513 | } 514 | } 515 | 516 | .icon-github { 517 | display: inline-block; 518 | margin-right: 0.3em; 519 | } 520 | 521 | .docs-index { 522 | top: 1rem; 523 | padding-left: 2rem; 524 | 525 | list-style: none; 526 | } 527 | 528 | @media (min-width: 1000px) { 529 | .docs-index { 530 | position: sticky; 531 | } 532 | } 533 | 534 | .docs-indexItem { 535 | margin-bottom: 0.4rem; 536 | } 537 | 538 | .edit-github { 539 | font-size: 0.75rem; 540 | text-align: right; 541 | } 542 | 543 | [class*='docSection'] { 544 | border-bottom: 1px solid #eaeaea; 545 | } 546 | 547 | [class*='docSection']:last-of-type { 548 | border-bottom: 0px; 549 | } 550 | 551 | .docSection-contributors table { 552 | text-align: center; 553 | } 554 | 555 | .docSection-contributors table th, 556 | .docSection-contributors table td { 557 | padding: 0 1rem; 558 | } 559 | 560 | .docSection-contributors table img { 561 | width: 150px; 562 | border-radius: 100%; 563 | } 564 | 565 | /*-----------------------------------*\ 566 | $FOOTER 567 | \*-----------------------------------*/ 568 | 569 | .main-footer { 570 | padding: 1rem; 571 | 572 | background-color: var(--c-main); 573 | color: #fff; 574 | 575 | font-size: 0.75rem; 576 | text-align: center; 577 | } 578 | 579 | .main-footer p { 580 | margin: 0; 581 | } 582 | 583 | .main-footer a { 584 | color: #fff; 585 | } 586 | 587 | /*-----------------------------------*\ 588 | $REDUCED MOTION BANNER 589 | \*-----------------------------------*/ 590 | 591 | .motionless__banner a { 592 | color: #fff; 593 | } 594 | 595 | .motionless__banner { 596 | display: none; 597 | position: fixed; 598 | bottom: 0; 599 | left: 0; 600 | z-index: 150; 601 | 602 | width: 100%; 603 | padding: 1rem; 604 | 605 | background: #333; 606 | color: #fff; 607 | border-top: 2px solid #ff5722; 608 | 609 | text-align: center; 610 | } 611 | 612 | .motionless__paragraph { 613 | margin: 0; 614 | } 615 | 616 | @media (print), (prefers-reduced-motion: reduce) { 617 | .motionless__banner { 618 | display: block; 619 | } 620 | } 621 | 622 | .docs { 623 | text-align: left; 624 | } 625 | 626 | .animation-list { 627 | text-align: left; 628 | } 629 | 630 | /*-----------------------------------*\ 631 | $DARK-MODE 632 | \*-----------------------------------*/ 633 | 634 | .night-light-label #night-light-checkbox { 635 | position: absolute; 636 | visibility: hidden; 637 | } 638 | 639 | .night-light-label { 640 | display: block; 641 | margin: 20px 0; 642 | height: 31px; 643 | width: 60px; 644 | border: 2px solid #4672fe; 645 | border-radius: 30px; 646 | position: relative; 647 | cursor: pointer; 648 | } 649 | 650 | .night-light-label .night-light-ball { 651 | position: absolute; 652 | width: 25px; 653 | height: 25px; 654 | top: 1px; 655 | left: 1px; 656 | border-radius: 50%; 657 | background: #4672fe; 658 | z-index: 99; 659 | transition: 300ms; 660 | } 661 | 662 | .night-light-label #night-light-checkbox:checked + .night-light-ball { 663 | transform: translateX(28px); 664 | } 665 | 666 | .moon-svg, 667 | .sun-svg { 668 | width: 16px; 669 | height: 16px; 670 | position: absolute; 671 | top: 50%; 672 | transform: translateY(-50%); 673 | } 674 | 675 | .moon-svg { 676 | right: 5px; 677 | } 678 | 679 | .sun-svg { 680 | left: 5px; 681 | } 682 | 683 | .dark #moon-svg, 684 | .dark #sun-svg { 685 | fill: #e0e0e0 !important; 686 | } 687 | 688 | .dark { 689 | background-color: #111; 690 | color: #e0e0e0; 691 | } 692 | 693 | .dark .intro { 694 | background: #111; 695 | } 696 | 697 | .dark .animation-list, 698 | .dark .sidebar { 699 | background: #15151d; 700 | } 701 | 702 | .dark .button.button-animations, 703 | .dark .callout-hideList.button { 704 | color: #e0e0e0; 705 | border-color: rgba(255, 255, 255, 0.7); 706 | outline: none; 707 | } 708 | 709 | .dark .copy-icon, 710 | .dark .copy-icon:hover { 711 | background: #15151d; 712 | border-color: #e0e0e0; 713 | } 714 | 715 | .dark .copy-icon::before, 716 | .dark .copy-icon:hover::before { 717 | border-color: #e0e0e0; 718 | } 719 | 720 | .dark code { 721 | color: #111; 722 | } 723 | 724 | .dark h2, 725 | .dark h3, 726 | .dark h4, 727 | .dark a[title='Documentation'], 728 | .dark pre * { 729 | color: #e0e0e0; 730 | } 731 | 732 | .dark section { 733 | border-color: rgba(255, 255, 255, 0.2); 734 | } 735 | 736 | .dark h1, 737 | .dark a { 738 | color: #4672fe; 739 | } 740 | -------------------------------------------------------------------------------- /animate.compat.css: -------------------------------------------------------------------------------- 1 | 2 | /*! 3 | * animate.css - https://animate.style/ 4 | * Version - 4.1.1 5 | * Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev 6 | * 7 | * Copyright (c) 2022 Animate.css 8 | */: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)*.8);animation-duration:calc(var(--animate-duration)*.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-animation-iteration-count:1!important;animation-iteration-count:1!important;-webkit-transition-duration:1ms!important;transition-duration:1ms!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-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95);-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}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-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95);-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}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-name:headShake;animation-name:headShake;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-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-animation-name:swing;animation-name:swing;-webkit-transform-origin:top center;transform-origin:top center}@-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-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-name:heartBeat;animation-name:heartBeat;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes backInDown{0%{opacity:.7;-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7)}80%{opacity:.7;-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes backInDown{0%{opacity:.7;-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7)}80%{opacity:.7;-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.backInDown{-webkit-animation-name:backInDown;animation-name:backInDown}@-webkit-keyframes backInLeft{0%{opacity:.7;-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7)}80%{opacity:.7;-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes backInLeft{0%{opacity:.7;-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7)}80%{opacity:.7;-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.backInLeft{-webkit-animation-name:backInLeft;animation-name:backInLeft}@-webkit-keyframes backInRight{0%{opacity:.7;-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7)}80%{opacity:.7;-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes backInRight{0%{opacity:.7;-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7)}80%{opacity:.7;-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.backInRight{-webkit-animation-name:backInRight;animation-name:backInRight}@-webkit-keyframes backInUp{0%{opacity:.7;-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7)}80%{opacity:.7;-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes backInUp{0%{opacity:.7;-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7)}80%{opacity:.7;-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.backInUp{-webkit-animation-name:backInUp;animation-name:backInUp}@-webkit-keyframes backOutDown{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}20%{opacity:.7;-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7)}to{opacity:.7;-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7)}}@keyframes backOutDown{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}20%{opacity:.7;-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7)}to{opacity:.7;-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7)}}.backOutDown{-webkit-animation-name:backOutDown;animation-name:backOutDown}@-webkit-keyframes backOutLeft{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}20%{opacity:.7;-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7)}to{opacity:.7;-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7)}}@keyframes backOutLeft{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}20%{opacity:.7;-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7)}to{opacity:.7;-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7)}}.backOutLeft{-webkit-animation-name:backOutLeft;animation-name:backOutLeft}@-webkit-keyframes backOutRight{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}20%{opacity:.7;-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7)}to{opacity:.7;-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7)}}@keyframes backOutRight{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}20%{opacity:.7;-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7)}to{opacity:.7;-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7)}}.backOutRight{-webkit-animation-name:backOutRight;animation-name:backOutRight}@-webkit-keyframes backOutUp{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}20%{opacity:.7;-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7)}to{opacity:.7;-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7)}}@keyframes backOutUp{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}20%{opacity:.7;-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7)}to{opacity:.7;-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.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)*.75);animation-duration:calc(var(--animate-duration)*.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)*.75);animation-duration:calc(var(--animate-duration)*.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-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)}40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)}50%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)}80%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg)}to{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)}}@keyframes flip{0%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)}40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)}50%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)}80%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg)}to{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)}}.animated.flip{-webkit-animation-name:flip;animation-name:flip;-webkit-backface-visibility:visible;backface-visibility:visible}@-webkit-keyframes flipInX{0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg)}40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}60%{opacity:1;-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg)}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg)}40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}60%{opacity:1;-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg)}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-animation-name:flipInX;animation-name:flipInX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipInY{0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg)}40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}60%{opacity:1;-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg)}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg)}40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}60%{opacity:1;-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg)}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-animation-name:flipInY;animation-name:flipInY;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{opacity:1;-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}to{opacity:0;-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg)}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{opacity:1;-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}to{opacity:0;-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg)}}.flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*.75);animation-duration:calc(var(--animate-duration)*.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%{opacity:1;-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg)}to{opacity:0;-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg)}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{opacity:1;-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg)}to{opacity:0;-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg)}}.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*.75);animation-duration:calc(var(--animate-duration)*.75);-webkit-animation-name:flipOutY;animation-name:flipOutY;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes lightSpeedInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg)}60%{opacity:1;-webkit-transform:skewX(20deg);transform:skewX(20deg)}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg)}60%{opacity:1;-webkit-transform:skewX(20deg);transform:skewX(20deg)}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%{opacity:0;-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg)}60%{opacity:1;-webkit-transform:skewX(-20deg);transform:skewX(-20deg)}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg)}60%{opacity:1;-webkit-transform:skewX(-20deg);transform:skewX(-20deg)}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{opacity:0;-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg)}}@keyframes lightSpeedOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg)}}.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{opacity:0;-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg)}}@keyframes lightSpeedOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg)}}.lightSpeedOutLeft{-webkit-animation-name:lightSpeedOutLeft;animation-name:lightSpeedOutLeft;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{opacity:0;-webkit-transform:rotate(-200deg);transform:rotate(-200deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rotateIn{0%{opacity:0;-webkit-transform:rotate(-200deg);transform:rotate(-200deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateInDownLeft{0%{opacity:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rotateInDownLeft{0%{opacity:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInDownRight{0%{opacity:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rotateInDownRight{0%{opacity:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateInUpLeft{0%{opacity:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rotateInUpLeft{0%{opacity:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInUpRight{0%{opacity:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rotateInUpRight{0%{opacity:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOut{0%{opacity:1}to{opacity:0;-webkit-transform:rotate(200deg);transform:rotate(200deg)}}@keyframes rotateOut{0%{opacity:1}to{opacity:0;-webkit-transform:rotate(200deg);transform:rotate(200deg)}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateOutDownLeft{0%{opacity:1}to{opacity:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}}@keyframes rotateOutDownLeft{0%{opacity:1}to{opacity:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutDownRight{0%{opacity:1}to{opacity:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}}@keyframes rotateOutDownRight{0%{opacity:1}to{opacity:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOutUpLeft{0%{opacity:1}to{opacity:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}}@keyframes rotateOutUpLeft{0%{opacity:1}to{opacity:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutUpRight{0%{opacity:1}to{opacity:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@keyframes rotateOutUpRight{0%{opacity:1}to{opacity:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}}.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-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-transform:rotate(80deg);transform:rotate(80deg)}40%,80%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1;-webkit-transform:rotate(60deg);transform:rotate(60deg)}to{opacity:0;-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0)}}@keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-transform:rotate(80deg);transform:rotate(80deg)}40%,80%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1;-webkit-transform:rotate(60deg);transform:rotate(60deg)}to{opacity:0;-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,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%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}}@keyframes zoomInDown{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0)}}@keyframes zoomInLeft{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0)}}@keyframes zoomInRight{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}}@keyframes zoomInUp{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}}.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%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0)}}@keyframes zoomOutDown{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0)}}.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%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0)}}@keyframes zoomOutUp{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0)}}.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{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:hidden}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:hidden}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:hidden}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:hidden}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:hidden}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:hidden}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:hidden}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:hidden}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp} --------------------------------------------------------------------------------