wj-elements
Version:
WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.
1,451 lines (1,293 loc) • 119 kB
JavaScript
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
import { fetchAndParseCSS } from "./animations.js";
import WJElement from "./wje-element.js";
const styles = "/*\n[ Standard Element ]\n*/\n\nhtml {\n font-size: 100%;\n -ms-text-size-adjust: 100%;\n -webkit-text-size-adjust: 100%;\n}\nbody {\n color: var(--wje-color-contrast-8);\n font-family: var(--wje-font-family);\n font-size: var(--wje-font-size);\n font-weight: normal;\n letter-spacing: 0.01em;\n -webkit-font-smoothing: antialiased;\n -webkit-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n -webkit-font-feature-settings: 'kern' 1;\n -moz-font-feature-settings: 'kern' 1;\n margin: 0;\n padding: 0 !important;\n}\n/* Headings\n------------------------------------\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin: 0.625rem 0;\n font-family: var(--wje-font-family);\n -webkit-font-smoothing: antialiased;\n -webkit-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n font-weight: 500;\n color: inherit;\n display: inline-block;\n}\nh1 {\n font-size: var(--wje-font-size-2x-large);\n line-height: 44px;\n letter-spacing: -0.0141279em;\n}\nh2 {\n font-size: var(--wje-font-size-x-large);\n line-height: 34px;\n letter-spacing: -0.021em;\n}\nh3 {\n font-size: var(--wje-font-size-large);\n line-height: 28px;\n letter-spacing: -0.0114923em;\n}\nh4 {\n font-size: var(--wje-font-size-large);\n line-height: 26px;\n letter-spacing: -0.00865734em;\n}\nh5 {\n font-size: var(--wje-font-size-medium);\n line-height: 24px;\n letter-spacing: -0.00630069em;\n}\nh3 small,\nh4 small,\nh5 small {\n font-weight: 300;\n}\nh1.block,\nh2.block,\nh3.block,\nh4.block,\nh5.block,\nh6.block {\n padding-bottom: 0.625rem;\n}\n/* Lins and Others\n------------------------------------\n*/\na {\n text-shadow: none !important;\n color: var(--wje-color-primary-11);\n transition:\n color 0.1s linear 0s,\n background-color 0.1s linear 0s,\n opacity 0.2s linear 0s !important;\n font-weight: 500;\n}\na:focus,\na:hover,\na:active {\n color: var(--wje-color-primary);\n}\n\na,\na:focus,\na:hover,\na:active {\n outline: 0 !important;\n text-decoration: none;\n}\n\na.no-style {\n color: inherit;\n font-weight: normal;\n}\n\nbr {\n line-height: normal;\n clear: both;\n}\n\np {\n display: block;\n color: inherit;\n font-size: var(--wje-font-size);\n font-weight: normal;\n letter-spacing: 0.00177646em;\n line-height: 21px;\n margin: 0 0 0.625rem 0;\n font-style: normal;\n white-space: normal;\n}\n\nsmall,\n.small {\n line-height: 18px;\n font-size: 85.714%;\n}\n\nlabel {\n &.inline {\n display: inline-block;\n position: relative;\n top: 0;\n font-size: 13px;\n }\n}\n\nul,\nol {\n margin-bottom: 0.625rem;\n & > li {\n padding-left: 3px;\n line-height: 24px;\n }\n &.lg-icon {\n & > li {\n font-size: 21px;\n & span {\n font-size: 14px;\n }\n }\n }\n &.no-style {\n list-style: none;\n padding-left: 5px;\n }\n}\n\naddress {\n margin-bottom: 0;\n a {\n color: var(--wje-color-contrast-8);\n }\n}\n\nblockquote {\n padding: 4px 0 0 18px;\n border-left: 0;\n &:before {\n content: '\\e95d';\n font-size: 20px;\n margin-right: 6px;\n float: left;\n position: relative;\n top: -12px;\n }\n p {\n font-size: 16px;\n margin-bottom: 4px;\n }\n small {\n line-height: 29px;\n color: var(--wje-color-contrast-8);\n &:before {\n content: '—';\n margin-right: 6px;\n }\n }\n &.pull-right {\n border-right: 0;\n &:before {\n float: right;\n content: '';\n margin-left: 6px;\n margin-right: 0;\n }\n small {\n padding-right: 30px;\n &:after {\n content: '';\n }\n }\n }\n}\nhr {\n border-color: var(--wje-border-color);\n &.double {\n border-width: 2px;\n }\n &.dotted {\n border-style: dotted none none;\n }\n}\n\n.ff-sup {\n font-feature-settings:\n 'kern' 1,\n 'sups' 1;\n -webkit-font-feature-settings:\n 'kern' 1,\n 'sups' 1;\n -moz-font-feature-settings:\n 'kern' 1,\n 'sups' 1;\n}\n\n.ff-sub {\n font-feature-settings:\n 'kern' 1,\n 'subs' 1;\n -webkit-font-feature-settings:\n 'kern' 1,\n 'subs' 1;\n -moz-font-feature-settings:\n 'kern' 1,\n 'subs' 1;\n}\n\n/* Standard HTML Typography tags\n------------------------------------\n*/\n\ncode {\n color: var(--wje-color-contrast-6);\n background-color: var(--wje-color);\n font-size: 97%;\n position: relative;\n line-height: inherit;\n border-radius: 3px;\n padding: 5px 7px;\n margin: 0;\n &:hover {\n color: var(--wje-color-complete);\n }\n &.code-sm {\n padding: 3px 6px;\n }\n}\n\nfigcaption {\n font-size: 13px;\n margin-top: 0.625rem;\n font-weight: 400;\n display: block;\n letter-spacing: 0.008em;\n text-align: center;\n color: var(--wje-color-contrast-6);\n line-height: 1.46;\n}\n\nem {\n font-style: italic !important;\n font-family: inherit;\n font-weight: inherit;\n}\n\nins {\n font-family: var(--wje-font-family);\n border-bottom: 1px solid #d0d0d0;\n text-decoration: none;\n color: var(--wje-color-contrast-8);\n font-weight: normal;\n font-size: 94%;\n}\n\ncite {\n font-family: var(--wje-font-family);\n font-weight: 300;\n color: var(--wje-color-contrast-6);\n text-decoration: none;\n font-style: normal;\n hanging-punctuation: first;\n}\n\nsup {\n top: -0.28em;\n font-size: 70%;\n}\n\nsub {\n bottom: 0.03em;\n}\n\nvar {\n font-family: var(--wje-font-family);\n font-feature-settings:\n 'calt' 1,\n 'tnum' 1,\n 'frac' 1,\n 'case' 1,\n 'ss01' 1,\n 'cv11' 1;\n}\n\nabbr {\n text-decoration: none;\n letter-spacing: 0.01em;\n background-color: transparent;\n border-bottom: 2px solid #ffba5a;\n transition-property: color, background, border;\n transition-duration: 0.15s;\n transition-timing-function: linear;\n color: var(--wje-color-contrast-8);\n}\n\nq {\n font-family: var(--wje-font-family);\n font-weight: 500;\n font-size: 20px;\n hanging-punctuation: first;\n\n &:before {\n content: '\\201C';\n color: rgba(0, 0, 0, 0.44);\n font-size: 35px;\n }\n\n &:after {\n content: '\\201D';\n font-size: 35px;\n color: rgba(0, 0, 0, 0.44);\n }\n}\naudio {\n margin-top: 42px;\n}\nhr {\n clear: both;\n margin-bottom: 42px;\n margin-top: 42px;\n border: 0;\n border-bottom: 1px solid rgba(0, 0, 0, 0.13);\n}\naddress {\n font-family: var(--wje-font-family);\n font-style: normal;\n margin: 0 0 1.75em;\n font-size: 14px;\n line-height: 24px;\n margin-top: 24px;\n}\nabbr {\n text-decoration: none;\n letter-spacing: 0.01em;\n background-color: transparent;\n border-bottom: 2px solid #ffba5a;\n transition-property: color, background, border;\n transition-duration: 0.15s;\n transition-timing-function: linear;\n color: var(--wje-color-contrast-8);\n}\n\nacronym {\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n background-color: transparent;\n border-bottom: 2px solid #ffba5a;\n transition-property: color, background, border;\n transition-duration: 0.15s;\n transition-timing-function: linear;\n color: var(--wje-color-contrast-8);\n}\n\npre {\n tab-size: 4;\n font-size: 85.714%;\n overflow-x: auto;\n font-family: monospace, monospace;\n line-height: 1.7;\n counter-reset: line;\n background-color: var(--wje-color-contrast-3) er;\n color: var(--wje-color-contrast-8);\n margin-inline: 0;\n padding: 1rem 1.25rem;\n border-radius: 3px;\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\ndt {\n font-weight: 700;\n margin-bottom: 5px;\n}\n\ndd {\n margin: 0 0 1.75em;\n}\n\nkbd {\n font-size: 85.714%;\n font-family: var(--wje-font-family);\n position: relative;\n line-height: 34px;\n top: -3px;\n letter-spacing: 0.01em;\n padding: 5px 7px;\n margin: 0;\n color: rgba(0, 0, 0, 0.53);\n background-color: #fff;\n border-radius: 3px;\n box-shadow:\n 0 2px 0 1px #c7c7c7,\n 0 1px 0 1px rgba(0, 0, 0, 0.15),\n 0 0 0 1px #ececec;\n}\n\n/* Types\n------------------------------------\n*/\n\n.overline {\n text-transform: uppercase;\n display: inline-block;\n letter-spacing: 0.06em;\n font-size: 11px;\n}\n\n/* Font Sizes\n------------------------------------\n*/\n\n.small-text {\n font-size: 12px !important;\n letter-spacing: 0.00849077em;\n line-height: 18px;\n a {\n text-decoration: underline;\n }\n}\n.normal-text {\n font-size: 13px !important;\n}\n.large-text {\n font-size: 15px !important;\n}\n\n/* Font Weights\n------------------------------------\n */\n\n.normal {\n font-weight: normal !important;\n}\n.semi-bold {\n font-weight: 500 !important;\n}\n.bold {\n font-weight: 600 !important;\n}\n.light {\n font-weight: 300 !important;\n}\n\n/* Misc\n------------------------------------\n*/\n\n.all-caps {\n text-transform: uppercase;\n letter-spacing: 0.07em !important;\n}\n.text-uppercase {\n text-transform: uppercase !important;\n letter-spacing: 0.07em !important;\n}\n.muted {\n color: var(--wje-color-contrast-6);\n}\n.hint-text {\n opacity: 0.76 !important;\n}\n.no-decoration {\n text-decoration: none !important;\n}\n\n.text-ellipsis {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Gradients\n------------------------------------\n*/\n.gradient-grey {\n background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n}\n.gradient-black {\n background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n}\n\n/* Other Colors\n------------------------------------\n*/\n.bg-black {\n background-color: var(--wje-color-black) !important;\n color: var(--wje-color-contrast-0);\n}\n.bg-white {\n background-color: var(--wje-color-contrast-0) !important;\n color: var(--wje-color-contrast-8);\n}\n.bg-transparent {\n background-color: transparent !important;\n}\n\n/* Text Colors */\n.link {\n opacity: 0.7;\n &:hover {\n opacity: 1;\n }\n}\n\n/* Text Aligngments\n------------------------------------\n*/\n\n.text-right {\n text-align: right !important;\n}\n.text-left {\n text-align: left !important;\n}\n.text-center {\n text-align: center !important;\n}\n\n/* Strokes\n------------------------------------\n*/\n\n.stroke-primary {\n stroke: var(--wje-color-primary) !important;\n}\n.stroke-complete {\n stroke: var(--wje-color-complete) !important;\n}\n.stroke-success {\n stroke: var(--wje-color-success) !important;\n}\n.stroke-info {\n stroke: var(--wje-color-info) !important;\n}\n.stroke-warning {\n stroke: var(--wje-color-warning) !important;\n}\n.stroke-danger {\n stroke: var(--wje-color-danger) !important;\n}\n\n/* Font Sizes\n------------------------------------\ntracking =a+b×e(c × z)\n\na, b and c are constants\na = -0.0223\nb = 0.185\nc = -0.1745\nz = font size\n\n*/\n.fs-x-small {\n font-size: var(--wje-font-size-x-small) !important;\n letter-spacing: 0.0180093em;\n line-height: 15px;\n}\n.fs-small {\n font-size: var(--wje-font-size-small) !important;\n letter-spacing: 0.00849077em;\n line-height: 18px;\n}\n.fs {\n font-size: var(--wje-font-size) !important;\n letter-spacing: 0.00177646em;\n line-height: 22px;\n}\n\n.fs-medium {\n font-size: var(--wje-font-size-medium) !important;\n letter-spacing: -0.00295978em;\n line-height: 24px;\n}\n\n.fs-large {\n font-size: var(--wje-font-size-large) !important;\n letter-spacing: normal;\n line-height: normal;\n}\n\n.fs-x-large {\n font-size: var(--wje-font-size-x-large) !important;\n letter-spacing: normal;\n line-height: normal;\n}\n\n.fs-2x-large {\n font-size: var(--wje-font-size-2x-large) !important;\n letter-spacing: normal;\n line-height: normal;\n}\n\n.fs-3x-large {\n font-size: var(--wje-font-size-3x-large) !important;\n letter-spacing: normal;\n line-height: normal;\n}\n\n.fs-4x-large {\n font-size: var(--wje-font-size-4x-large) !important;\n letter-spacing: normal;\n line-height: normal;\n}\n\n/* Line-heights\n------------------------------------\n*/\n.lh-normal {\n line-height: normal;\n}\n.lh-10 {\n line-height: 10px;\n}\n.lh-11 {\n line-height: 11px;\n}\n.lh-12 {\n line-height: 12px;\n}\n.lh-13 {\n line-height: 13px;\n}\n.lh-14 {\n line-height: 14px;\n}\n.lh-15 {\n line-height: 15px;\n}\n.lh-16 {\n line-height: 16px;\n}\n\n/* Font Faces\n------------------------------------\n*/\n\n.font-arial {\n font-family: Arial, sans-serif !important;\n}\n.font-montserrat {\n font-family: var(--wje-font-family-secondary) !important;\n}\n.font-heading {\n font-family: var(--wje-font-family-secondary);\n}\n.font-secondary {\n font-family: var(--wje-font-family-secondary);\n}\n\n/* Wells\n------------------------------------\n*/\n.well {\n background-color: var(--wje-color-contrast-3);\n -webkit-border-radius: 3px;\n -moz-border-radius: 3px;\n border-radius: 3px;\n -webkit-box-shadow: none !important;\n -moz-box-shadow: none !important;\n box-shadow: none !important;\n border: none;\n background-image: none;\n &.well-large {\n padding: 24px;\n width: auto;\n }\n &.well-small {\n padding: 13px;\n width: auto;\n }\n &.green {\n background-color: var(--wje-color-complete);\n color: var(--wje-color-contrast-0);\n border: none;\n }\n}\n.overflow-ellipsis {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n\n/* Responsive Handlers : Typo\n------------------------------------\n*/\n\n@media (max-width: 1024px) {\n body,\n p {\n font-size: var(--wje-font-size-small);\n line-height: 20px;\n }\n\n h1 {\n font-size: var(--wje-font-size-2x-large);\n line-height: 44px;\n letter-spacing: -0.08px;\n }\n h2 {\n font-size: var(--wje-font-size-x-large);\n line-height: 40px;\n }\n h3 {\n font-size: var(--wje-font-size-large);\n line-height: 35.88px;\n }\n h4 {\n font-size: var(--wje-font-size-large);\n line-height: 33.88px;\n }\n h5 {\n font-size: var(--wje-font-size-medium);\n line-height: 25.88px;\n }\n small,\n .small {\n font-size: 89%;\n line-height: 17px;\n }\n}\n\n.alert {\n & > p,\n & > ul {\n margin-bottom: 0;\n }\n}\n.table {\n & > tbody {\n & > tr {\n & > td,\n & > th {\n line-height: 1.42857143;\n }\n }\n }\n & > tfoot {\n & > tr {\n & > td,\n & > th {\n line-height: 1.42857143;\n }\n }\n }\n & > thead {\n & > tr {\n & > td,\n & > th {\n line-height: 1.42857143;\n }\n }\n }\n}\n\n/* For Windows : Fixes\n------------------------------------\n*/\n\n.line-clamp-2 {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.line-clamp-3 {\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.line-clamp-5 {\n display: -webkit-box;\n -webkit-line-clamp: 5;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.text-separator {\n display: block;\n text-align: center;\n margin: 1.5rem 0;\n width: 100%;\n background: linear-gradient(\n to top,\n transparent 0%,\n transparent calc(50% - 1px),\n var(--wje-border-color) calc(50% - 1px),\n var(--wje-border-color) calc(50% + 1px),\n transparent calc(50% + 1px),\n transparent 100%\n );\n}\n.text-separator::before {\n background: #fff;\n content: attr(data-text);\n padding: 0 1rem;\n text-transform: uppercase;\n}\n\n.wje-toast-stack {\n position: fixed;\n top: 0;\n margin: 0 0.5rem;\n width: 300px;\n max-width: 100%;\n max-height: 100%;\n overflow: auto;\n z-index: 9999;\n}\n";
const animations = `@charset "UTF-8";/*!
* animate.css - https://animate.style/
* Version - 4.1.1
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2020 Animate.css
*/
:root {
--animate-duration: 1s;
--animate-delay: 1s;
--animate-repeat: 1;
}
.animate__animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-duration: var(--animate-duration);
animation-duration: var(--animate-duration);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animate__animated.animate__infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animate__animated.animate__repeat-1 {
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-iteration-count: var(--animate-repeat);
animation-iteration-count: var(--animate-repeat);
}
.animate__animated.animate__repeat-2 {
-webkit-animation-iteration-count: calc(1 * 2);
animation-iteration-count: calc(1 * 2);
-webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
animation-iteration-count: calc(var(--animate-repeat) * 2);
}
.animate__animated.animate__repeat-3 {
-webkit-animation-iteration-count: calc(1 * 3);
animation-iteration-count: calc(1 * 3);
-webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
animation-iteration-count: calc(var(--animate-repeat) * 3);
}
.animate__animated.animate__delay-1s {
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-delay: var(--animate-delay);
animation-delay: var(--animate-delay);
}
.animate__animated.animate__delay-2s {
-webkit-animation-delay: calc(1s * 2);
animation-delay: calc(1s * 2);
-webkit-animation-delay: calc(var(--animate-delay) * 2);
animation-delay: calc(var(--animate-delay) * 2);
}
.animate__animated.animate__delay-3s {
-webkit-animation-delay: calc(1s * 3);
animation-delay: calc(1s * 3);
-webkit-animation-delay: calc(var(--animate-delay) * 3);
animation-delay: calc(var(--animate-delay) * 3);
}
.animate__animated.animate__delay-4s {
-webkit-animation-delay: calc(1s * 4);
animation-delay: calc(1s * 4);
-webkit-animation-delay: calc(var(--animate-delay) * 4);
animation-delay: calc(var(--animate-delay) * 4);
}
.animate__animated.animate__delay-5s {
-webkit-animation-delay: calc(1s * 5);
animation-delay: calc(1s * 5);
-webkit-animation-delay: calc(var(--animate-delay) * 5);
animation-delay: calc(var(--animate-delay) * 5);
}
.animate__animated.animate__faster {
-webkit-animation-duration: calc(1s / 2);
animation-duration: calc(1s / 2);
-webkit-animation-duration: calc(var(--animate-duration) / 2);
animation-duration: calc(var(--animate-duration) / 2);
}
.animate__animated.animate__fast {
-webkit-animation-duration: calc(1s * 0.8);
animation-duration: calc(1s * 0.8);
-webkit-animation-duration: calc(var(--animate-duration) * 0.8);
animation-duration: calc(var(--animate-duration) * 0.8);
}
.animate__animated.animate__slow {
-webkit-animation-duration: calc(1s * 2);
animation-duration: calc(1s * 2);
-webkit-animation-duration: calc(var(--animate-duration) * 2);
animation-duration: calc(var(--animate-duration) * 2);
}
.animate__animated.animate__slower {
-webkit-animation-duration: calc(1s * 3);
animation-duration: calc(1s * 3);
-webkit-animation-duration: calc(var(--animate-duration) * 3);
animation-duration: calc(var(--animate-duration) * 3);
}
@media print, (prefers-reduced-motion: reduce) {
.animate__animated {
-webkit-animation-duration: 1ms !important;
animation-duration: 1ms !important;
-webkit-transition-duration: 1ms !important;
transition-duration: 1ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
}
.animate__animated[class*='Out'] {
opacity: 0;
}
}
/* Attention seekers */
@-webkit-keyframes bounce {
from,
20%,
53%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%,
43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
transform: translate3d(0, -30px, 0) scaleY(1.1);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
transform: translate3d(0, -15px, 0) scaleY(1.05);
}
80% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
transform: translate3d(0, 0, 0) scaleY(0.95);
}
90% {
-webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
transform: translate3d(0, -4px, 0) scaleY(1.02);
}
}
@keyframes bounce {
from,
20%,
53%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%,
43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
transform: translate3d(0, -30px, 0) scaleY(1.1);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
transform: translate3d(0, -15px, 0) scaleY(1.05);
}
80% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
transform: translate3d(0, 0, 0) scaleY(0.95);
}
90% {
-webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
transform: translate3d(0, -4px, 0) scaleY(1.02);
}
}
.animate__bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
@-webkit-keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
@keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
.animate__flash {
-webkit-animation-name: flash;
animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.animate__pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.animate__rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
@-webkit-keyframes shakeX {
from,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 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 {
from,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
.animate__shakeX {
-webkit-animation-name: shakeX;
animation-name: shakeX;
}
@-webkit-keyframes shakeY {
from,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
}
@keyframes shakeY {
from,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
}
.animate__shakeY {
-webkit-animation-name: shakeY;
animation-name: shakeY;
}
@-webkit-keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.animate__headShake {
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-name: headShake;
animation-name: headShake;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
.animate__swing {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.animate__tada {
-webkit-animation-name: tada;
animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes wobble {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}
@-webkit-keyframes jello {
from,
11.1%,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 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(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
@keyframes jello {
from,
11.1%,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 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(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
.animate__jello {
-webkit-animation-name: jello;
animation-name: jello;
-webkit-transform-origin: center;
transform-origin: center;
}
@-webkit-keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.animate__heartBeat {
-webkit-animation-name: heartBeat;
animation-name: heartBeat;
-webkit-animation-duration: calc(1s * 1.3);
animation-duration: calc(1s * 1.3);
-webkit-animation-duration: calc(var(--animate-duration) * 1.3);
animation-duration: calc(var(--animate-duration) * 1.3);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
/* Back entrances */
@-webkit-keyframes backInDown {
0% {
-webkit-transform: translateY(-1200px) scale(0.7);
transform: translateY(-1200px) scale(0.7);
opacity: 0.7;
}
80% {
-webkit-transform: translateY(0px) scale(0.7);
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes backInDown {
0% {
-webkit-transform: translateY(-1200px) scale(0.7);
transform: translateY(-1200px) scale(0.7);
opacity: 0.7;
}
80% {
-webkit-transform: translateY(0px) scale(0.7);
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.animate__backInDown {
-webkit-animation-name: backInDown;
animation-name: backInDown;
}
@-webkit-keyframes backInLeft {
0% {
-webkit-transform: translateX(-2000px) scale(0.7);
transform: translateX(-2000px) scale(0.7);
opacity: 0.7;
}
80% {
-webkit-transform: translateX(0px) scale(0.7);
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes backInLeft {
0% {
-webkit-transform: translateX(-2000px) scale(0.7);
transform: translateX(-2000px) scale(0.7);
opacity: 0.7;
}
80% {
-webkit-transform: translateX(0px) scale(0.7);
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.animate__backInLeft {
-webkit-animation-name: backInLeft;
animation-name: backInLeft;
}
@-webkit-keyframes backInRight {
0% {
-webkit-transform: translateX(2000px) scale(0.7);
transform: translateX(2000px) scale(0.7);
opacity: 0.7;
}
80% {
-webkit-transform: translateX(0px) scale(0.7);
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes backInRight {
0% {
-webkit-transform: translateX(2000px) scale(0.7);
transform: translateX(2000px) scale(0.7);
opacity: 0.7;
}
80% {
-webkit-transform: translateX(0px) scale(0.7);
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.animate__backInRight {
-webkit-animation-name: backInRight;
animation-name: backInRight;
}
@-webkit-keyframes backInUp {
0% {
-webkit-transform: translateY(1200px) scale(0.7);
transform: translateY(1200px) scale(0.7);
opacity: 0.7;
}
80% {
-webkit-transform: translateY(0px) scale(0.7);
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes backInUp {
0% {
-webkit-transform: translateY(1200px) scale(0.7);
transform: translateY(1200px) scale(0.7);
opacity: 0.7;
}
80% {
-webkit-transform: translateY(0px) scale(0.7);
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.animate__backInUp {
-webkit-animation-name: backInUp;
animation-name: backInUp;
}
/* Back exits */
@-webkit-keyframes backOutDown {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
20% {
-webkit-transform: translateY(0px) scale(0.7);
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: translateY(700px) scale(0.7);
transform: translateY(700px) scale(0.7);
opacity: 0.7;
}
}
@keyframes backOutDown {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
20% {
-webkit-transform: translateY(0px) scale(0.7);
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: translateY(700px) scale(0.7);
transform: translateY(700px) scale(0.7);
opacity: 0.7;
}
}
.animate__backOutDown {
-webkit-animation-name: backOutDown;
animation-name: backOutDown;
}
@-webkit-keyframes backOutLeft {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
20% {
-webkit-transform: translateX(0px) scale(0.7);
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: translateX(-2000px) scale(0.7);
transform: translateX(-2000px) scale(0.7);
opacity: 0.7;
}
}
@keyframes backOutLeft {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
20% {
-webkit-transform: translateX(0px) scale(0.7);
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: translateX(-2000px) scale(0.7);
transform: translateX(-2000px) scale(0.7);
opacity: 0.7;
}
}
.animate__backOutLeft {
-webkit-animation-name: backOutLeft;
animation-name: backOutLeft;
}
@-webkit-keyframes backOutRight {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
20% {
-webkit-transform: translateX(0px) scale(0.7);
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: translateX(2000px) scale(0.7);
transform: translateX(2000px) scale(0.7);
opacity: 0.7;
}
}
@keyframes backOutRight {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
20% {
-webkit-transform: translateX(0px) scale(0.7);
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: translateX(2000px) scale(0.7);
transform: translateX(2000px) scale(0.7);
opacity: 0.7;
}
}
.animate__backOutRight {
-webkit-animation-name: backOutRight;
animation-name: backOutRight;
}
@-webkit-keyframes backOutUp {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
20% {
-webkit-transform: translateY(0px) scale(0.7);
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: translateY(-700px) scale(0.7);
transform: translateY(-700px) scale(0.7);
opacity: 0.7;
}
}
@keyframes backOutUp {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
20% {
-webkit-transform: translateY(0px) scale(0.7);
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: translateY(-700px) scale(0.7);
transform: translateY(-700px) scale(0.7);
opacity: 0.7;
}
}
.animate__backOutUp {
-webkit-animation-name: backOutUp;
animation-name: backOutUp;
}
/* Bouncing entrances */
@-webkit-keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.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(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.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(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.animate__bounceIn {
-webkit-animation-duration: calc(1s * 0.75);
animation-duration: calc(1s * 0.75);
-webkit-animation-duration: calc(var(--animate-duration) * 0.75);
animation-duration: calc(var(--animate-duration) * 0.75);
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
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(0.9);
transform: translate3d(0, 25px, 0) scaleY(0.9);
}
75% {
-webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
transform: translate3d(0, -10px, 0) scaleY(0.95);
}
90% {
-webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
transform: translate3d(0, 5px, 0) scaleY(0.985);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
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(0.9);
transform: translate3d(0, 25px, 0) scaleY(0.9);
}
75% {
-webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
transform: translate3d(0, -10px, 0) scaleY(0.95);
}
90% {
-webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
transform: translate3d(0, 5px, 0) scaleY(0.985);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
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(0.98);
transform: translate3d(-10px, 0, 0) scaleX(0.98);
}
90% {
-webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
transform: translate3d(5px, 0, 0) scaleX(0.995);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInLeft {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
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(0.98);
transform: translate3d(-10px, 0, 0) scaleX(0.98);
}
90% {
-webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
transform: translate3d(5px, 0, 0) scaleX(0.9