<!doctype html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>
<body>
<div class="center">
<img id="logo" src="data:image/png;base64,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PjZyq1FztQQvIYxOPHirRnNVAJzgUVLwgC1U440skMdnbCNIWEDPDvMM5AxEqBr/tWOFwHr4tHiQZ0QTpQVVbz0h6+PRl8EGDV88ses2xkEpnnhGOK5wV2QZZROP3MbeDLuFwunhhe8AAS2ovVk0CHXHdAM1yooa2m2irbHbit6NRyuYfiQh+530xwRJJp8yFjTHH07SnYQCgEMyEEBk1/MaSmBzv49raTbMUY5nvrhXFhjtQ7AD+o4U0DYtTK3esJjLCxySTtiY+lDOPdaRgPUwJ2QrIWKINQo9iDG4HOZ9tRFKYDlIRWmua4tdgsrtRQFU7cQfQsM4CQnrBbjQIhnZPWzjONi2mQWsq2BNK31oGEwoE7iGZ9FRDMLUoCGBewv4mI3+JZoDqsw+lU7tGzWfC/4jnnd7qH2+AXHhq4zU7Mx9xPU+gC+gHv9M5RxWpiaUKcREnxVyNms8XodQF9T2KkxshUOfWrB8C4R0+kkC/ONJUd0McDrqxU5MxD8H2+f/jtZxBNgu1fz8L/CU8gDxteklAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAACE3AAAhNwEzWJ96AAAAB3RJTUUH5AEGFQIajLN/OwAAIABJREFUeNrt3Xm4HFW57/FvZyIEAoGEIUxhjgECYZB5LEQIQyjQy6ByOArUwQFaQdGjiAMHEJWrrcCREgFFLiJCipkkpBIghBnCPEMgTIEQpkwkO+n7x1pbt2F3d63V1cPe+X2eZz8PpLuqq6tWVb+16l3vAhEREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREPBe0CERFptCCM+gFreCw6N03ipdqD0tP0a/AJtTrwELD6CrhvFwF7p0k8U81MRKoEHTcCO/WCr5OkSRxVeX0b4FGP6+h2wPNqLaIA69/1AYZ63rX0hgCrr5qYiNQwBFirF3yP1XQoRf49ABIRERERBVgiIiIiCrBEREREFGCJiIiIiAIsEREREQVYIiIiIgqwREREREQBloiIiIgCLBEREZEertGV3D8GxjX4c0Kg6LHcD4F7G7hdy4A31cREpAHmA8faa2y7eEeHRaRJAVaaxB3AtEZ+RhBGW3ku+mSaxFPVBESkB+oA7kmTeK52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" width="200"/>
<h1>BERT Demo</h1>
<div id="step2" class="animated invisible">
<h2>2. Ask a question related to the text below</h2>
<input type=text id="question" placeholder="Your question here..." />
<button id="search">Search</button>
<button id="reset">Reset</button>
<div id="highlighter" class="invisble"></div>
</div>
<div id="step1" class="animated">
<h2>1. Paste some text to analyse below <button id="continue">Continue</button></h2>
<textarea id='context' rows="30" cols="120">
TensorFlow is an end-to-end open source platform for machine learning
TensorFlow makes it easy for beginners and experts to create machine learning models. See the sections below to get started.
Generative Adversarial Networks (GANs) are one of the most interesting ideas in computer science today. Two models are trained simultaneously by an adversarial process. A generator ("the artist") learns to create images that look real, while a discriminator ("the art critic") learns to tell real images apart from fakes.
Fashion MNIST is intended as a drop-in replacement for the classic MNIST dataset—often used as the "Hello, World" of machine learning programs for computer vision. The MNIST dataset contains images of handwritten digits (0, 1, 2, etc.) in a format identical to that of the articles of clothing you'll use here.
</textarea>
</div>
</div>
<div id="preloader" class="removed">
<img id="preloadAnim" src="data:image/gif;base64,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" alt="" />
<p>Loading Model. Please wait...</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
</html>html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers. */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
background: #ffffff;
color: #f5f5f5;
font-family: "Roboto", Arial, "Liberation Sans", sans-serif;
font-size: 16px;
font-weight: 300;
min-width: 320px;
}
body, textarea {
background: #000;
color: #fff;
padding: 25px;
}
h2 {
font-size: 32px;
margin: 20px 0;
}
input {
width: 500px;
height: 30px;
padding: 5px;
font-size: 16px;
color: #3d3d3d;
margin: 10px 0;
}
button {
height: 40px;
padding: 5px;
font-size: 16px;
margin: 0 0 0 10px;
cursor: pointer;
}
button {
height:36px;
border-radius:3px;
padding: 0 12px;
background: #FF5722;
color:#ffffff;
align-items: center;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
margin-top:7px;
}
button,
button:focus,
button:active{
border:none;
outline:none;
}
button:active{
box-shadow: 0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23);
}
#highlighter span {
transition: background-color 500ms ease-in-out, font-size 500ms ease-in-out;
background-color: #000;
color: #fff;
font-size: 18px;
}
#highlighter span.highlight {
background-color: #ffff00;
color: #000;
font-size: 24px;
}
.invisible {
opacity: 0;
}
.removed {
display: none;
}
.center {
margin: 0 auto;
display: block;
width: 775px;
}
textarea, #highlighter {
transition: opacity 500ms ease-in-out;
opacity: 1;
width: 100%;
overflow-y: auto;
font-size: 18px;
max-height: 600px;
}
textarea {
width: 93%;
}
#highlighter, textarea {
line-height: 28px;
}
#step1, #step2 {
position: absolute;
width: 775px;
}
#logo {
margin-left: -10px;
}
h1 {
font-size: 42px;
float: right
}
#preloader {
background-color: rgba(0,0,0,0.8);
position: fixed;
top: 0;
bottom:0;
left: 0;
right: 0;
text-align: center;
}
#preloader img , #preloader p {
font-size: 40px;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#preloader img {
top: 40%;
}
#continue {
margin: 0 0 0 10px;
position: relative;
float: right
}
@charset "UTF-8";
/*!
* animate.css -https://daneden.github.io/animate.css/
* Version - 3.7.2
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2019 Daniel Eden
*/
@-webkit-keyframes bounce {
from,
20%,
53%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-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);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}
@keyframes bounce {
from,
20%,
53%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-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);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
@-webkit-keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
@keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
.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);
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
@-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);
}
}
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
@-webkit-keyframes shake {
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 shake {
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);
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.headShake {
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-name: headShake;
animation-name: headShake;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: 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);
}
}
.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);
}
}
.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);
}
}
.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);
}
}
.jello {
-webkit-animation-name: jello;
animation-name: jello;
-webkit-transform-origin: center;
transform-origin: center;
}
@-webkit-keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.heartBeat {
-webkit-animation-name: heartBeat;
animation-name: heartBeat;
-webkit-animation-duration: 1.3s;
animation-duration: 1.3s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes bounceIn {
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);
}
}
.bounceIn {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-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);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: 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);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.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);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
to {
-webkit-transform: 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);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
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);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInRight {
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);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
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);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInUp {
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);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.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(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
}
@keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.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(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
}
.bounceOut {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
@keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
@keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
@keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes fadeOutDown {
from {
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 {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
@keyframes fadeOutDownBig {
from {
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 {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes fadeOutLeft {
from {
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 {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes fadeOutLeftBig {
from {
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 {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes fadeOutRight {
from {
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 {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
@keyframes fadeOutRightBig {
from {
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 {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes fadeOutUp {
from {
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 {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
@keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
@-webkit-keyframes flip {
from {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes flip {
from {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.animated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}
@-webkit-keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
@-webkit-keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
.flipOutY {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY;
}
@-webkit-keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
@keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@-webkit-keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
}
@-webkit-keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
@keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut;
}
@-webkit-keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
@keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
@-webkit-keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}
@-webkit-keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%,
60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%,
80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
@keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%,
60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%,
80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-name: hinge;
animation-name: hinge;
}
@-webkit-keyframes jackInTheBox {
from {
opacity: 0;
-webkit-transform: scale(0.1) rotate(30deg);
transform: scale(0.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 {
from {
opacity: 0;
-webkit-transform: scale(0.1) rotate(30deg);
transform: scale(0.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;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
@keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInLeft {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInRight {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp;
}
@-webkit-keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
}
@keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
}
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown;
}
@-webkit-keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
@keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
.zoomOutLeft {
-webkit-animation-name: zoomOutLeft;
animation-name: zoomOutLeft;
}
@-webkit-keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
}
@keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
}
.zoomOutRight {
-webkit-animation-name: zoomOutRight;
animation-name: zoomOutRight;
}
@-webkit-keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomOutUp {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp;
}
@-webkit-keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}
@-webkit-keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.delay-1s {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.animated.delay-2s {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated.delay-3s {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.animated.delay-4s {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.animated.delay-5s {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.animated.fast {
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
}
.animated.faster {
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
}
.animated.slow {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.slower {
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
@media (print), (prefers-reduced-motion: reduce) {
.animated {
-webkit-animation-duration: 1ms !important;
animation-duration: 1ms !important;
-webkit-transition-duration: 1ms !important;
transition-duration: 1ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
}
}const preloader = document.getElementById('preloader');
preloader.setAttribute('class', '');
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tensorflow/tfjs-converter'), require('@tensorflow/tfjs-core')) :
typeof define === 'function' && define.amd ? define(['exports', '@tensorflow/tfjs-converter', '@tensorflow/tfjs-core'], factory) :
(factory((global.qna = {}),global.tf,global.tf));
}(this, (function (exports,tfconv,tf) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function __awaiter(thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
function __values(o) {
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
if (m) return m.call(o);
return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
}
var _this = undefined;
var TrieNode = (function () {
function TrieNode(key) {
this.key = key;
this.parent = null;
this.children = {};
this.end = false;
}
TrieNode.prototype.getWord = function () {
var output = [];
var node = this;
while (node !== null) {
if (node.key !== null) {
output.unshift(node.key);
}
node = node.parent;
}
return [output, this.score, this.index];
};
return TrieNode;
}());
var Trie = (function () {
function Trie() {
this.root = new TrieNode(null);
}
Trie.prototype.insert = function (word, score, index) {
var e_1, _a;
var node = this.root;
var symbols = [];
try {
for (var word_1 = __values(word), word_1_1 = word_1.next(); !word_1_1.done; word_1_1 = word_1.next()) {
var symbol = word_1_1.value;
symbols.push(symbol);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (word_1_1 && !word_1_1.done && (_a = word_1.return)) _a.call(word_1);
}
finally { if (e_1) throw e_1.error; }
}
for (var i = 0; i < symbols.length; i++) {
if (!node.children[symbols[i]]) {
node.children[symbols[i]] = new TrieNode(symbols[i]);
node.children[symbols[i]].parent = node;
}
node = node.children[symbols[i]];
if (i === symbols.length - 1) {
node.end = true;
node.score = score;
node.index = index;
}
}
};
Trie.prototype.find = function (token) {
var node = this.root;
var iter = 0;
while (iter < token.length && node != null) {
node = node.children[token[iter]];
iter++;
}
return node;
};
return Trie;
}());
var BertTokenizer = (function () {
function BertTokenizer() {
this.separator = '\u2581';
this.UNK_INDEX = 100;
this.CLS_INDEX = 101;
this.SEP_INDEX = 102;
}
BertTokenizer.prototype.load = function () {
return __awaiter(this, void 0, void 0, function () {
var _a, i, word;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
_a = this;
return [4, this.loadVocab()];
case 1:
_a.vocab = _b.sent();
this.trie = new Trie();
for (i = 999; i < this.vocab.length; i++) {
word = this.vocab[i];
this.trie.insert(word, 1, i);
}
return [2];
}
});
});
};
BertTokenizer.prototype.loadVocab = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
return [2, fetch('https://storage.googleapis.com/learnjs-data/bert_vocab/processed_vocab.json')
.then(function (d) { return d.json(); })];
});
});
};
BertTokenizer.prototype.processInput = function (text) {
var _this = this;
var words = text.split(' ');
return words.map(function (word) {
if (word !== '[CLS]' && word !== '[SEP]') {
return _this.separator + word.toLowerCase().normalize('NFKC');
}
return word;
});
};
BertTokenizer.prototype.tokenize = function (text) {
var e_2, _a;
var outputTokens = [];
var words = this.processInput(text);
for (var i = 0; i < words.length; i++) {
var chars = [];
try {
for (var _b = __values(words[i]), _c = _b.next(); !_c.done; _c = _b.next()) {
var symbol = _c.value;
chars.push(symbol);
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_2) throw e_2.error; }
}
var isUnknown = false;
var start = 0;
var subTokens = [];
var charsLength = chars.length;
while (start < charsLength) {
var end = charsLength;
var currIndex = void 0;
while (start < end) {
var substr = chars.slice(start, end).join('');
var match = this.trie.find(substr);
if (match != null && match.end) {
currIndex = match.getWord()[2];
break;
}
end = end - 1;
}
if (currIndex == null) {
isUnknown = true;
break;
}
subTokens.push(currIndex);
start = end;
}
if (isUnknown) {
outputTokens.push(this.UNK_INDEX);
}
else {
outputTokens = outputTokens.concat(subTokens);
}
}
return outputTokens;
};
return BertTokenizer;
}());
var loadTokenizer = function () { return __awaiter(_this, void 0, void 0, function () {
var tokenizer;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
tokenizer = new BertTokenizer();
return [4, tokenizer.load()];
case 1:
_a.sent();
return [2, tokenizer];
}
});
}); };
var _this$1 = undefined;
var BASE_DIR = 'https://storage.googleapis.com/tfjs-testing/mobile-bert/';
var MODEL_URL = BASE_DIR + 'model.json';
var size = 384;
var MAX_ANS_LEN = 32;
var MAX_QUERY_LEN = 64;
var MAX_SEQ_LEN = 384;
var PREDICT_ANS_NUM = 5;
var OUTPUT_OFFSET = 1;
var MobileBertImpl = (function () {
function MobileBertImpl() {
}
MobileBertImpl.prototype.process = function (query, context, maxQueryLen, maxSeqLen, docStride) {
var _this = this;
if (docStride === void 0) { docStride = 128; }
var queryTokens = this.tokenizer.tokenize(query);
if (queryTokens.length > maxQueryLen) {
queryTokens = queryTokens.slice(0, maxQueryLen);
}
var origTokens = context.trim().split(/\s+/).slice(0);
var tokenToOrigIndex = [];
var allDocTokens = [];
for (var i = 0; i < origTokens.length; i++) {
var token = origTokens[i];
var subTokens = this.tokenizer.tokenize(token);
for (var j = 0; j < subTokens.length; j++) {
var subToken = subTokens[j];
tokenToOrigIndex.push(i);
allDocTokens.push(subToken);
}
}
var maxContextLen = maxSeqLen - queryTokens.length - 3;
var docSpans = [];
var startOffset = 0;
while (startOffset < allDocTokens.length) {
var length_1 = allDocTokens.length - startOffset;
if (length_1 > maxContextLen) {
length_1 = maxContextLen;
}
docSpans.push({ start: startOffset, length: length_1 });
if (startOffset + length_1 === allDocTokens.length) {
break;
}
startOffset += Math.min(length_1, docStride);
}
var features = docSpans.map(function (docSpan) {
var tokens = [];
var segmentIds = [];
var tokenToOrigMap = {};
tokens.push(_this.tokenizer.CLS_INDEX);
segmentIds.push(0);
for (var i = 0; i < queryTokens.length; i++) {
var queryToken = queryTokens[i];
tokens.push(queryToken);
segmentIds.push(0);
}
tokens.push(_this.tokenizer.SEP_INDEX);
segmentIds.push(0);
for (var i = 0; i < docSpan['length']; i++) {
var splitTokenIndex = i + docSpan['start'];
var docToken = allDocTokens[splitTokenIndex];
tokens.push(docToken);
segmentIds.push(1);
tokenToOrigMap[tokens.length] = tokenToOrigIndex[splitTokenIndex];
}
tokens.push(_this.tokenizer.SEP_INDEX);
segmentIds.push(1);
var inputIds = tokens;
var inputMask = inputIds.map(function (id) { return 1; });
while ((inputIds.length < maxSeqLen)) {
inputIds.push(0);
inputMask.push(0);
segmentIds.push(0);
}
return { inputIds: inputIds, inputMask: inputMask, segmentIds: segmentIds, origTokens: origTokens, tokenToOrigMap: tokenToOrigMap };
});
return features;
};
MobileBertImpl.prototype.load = function () {
return __awaiter(this, void 0, void 0, function () {
var _a, inputIds, segmentIds, inputMask, _b;
return __generator(this, function (_c) {
switch (_c.label) {
case 0:
_a = this;
return [4, tfconv.loadGraphModel(MODEL_URL)];
case 1:
_a.model = _c.sent();
inputIds = tf.ones([1, size], 'int32');
segmentIds = tf.ones([1, size], 'int32');
inputMask = tf.ones([1, size], 'int32');
this.model.predict({
input_ids: inputIds,
segment_ids: segmentIds,
input_mask: inputMask,
global_step: tf.scalar(1, 'int32')
});
_b = this;
return [4, loadTokenizer()];
case 2:
_b.tokenizer = _c.sent();
return [2];
}
});
});
};
MobileBertImpl.prototype.findAnswers = function (question, context) {
var _this = this;
var features = this.process(question, context, MAX_QUERY_LEN, MAX_SEQ_LEN);
var answers = features.map(function (feature, index) {
console.log(feature);
var inputIds = tf.tensor2d(feature.inputIds, [1, size], 'int32');
var segmentIds = tf.tensor2d(feature.segmentIds, [1, size], 'int32');
var inputMask = tf.tensor2d(feature.inputMask, [1, size], 'int32');
var globalStep = tf.scalar(index, 'int32');
var result = _this.model.execute({
input_ids: inputIds,
segment_ids: segmentIds,
input_mask: inputMask,
global_step: globalStep
}, ['start_logits', 'end_logits']);
var startLogits = result[0].arraySync();
var endLogits = result[1].arraySync();
return _this.getBestAnswers(startLogits[0], endLogits[0], feature.origTokens, feature.tokenToOrigMap, index);
});
console.log(answers);
return []
.concat.apply([], answers)
.sort(function (a, b) { return b[1] - a[1]; })
.slice(0, PREDICT_ANS_NUM);
};
MobileBertImpl.prototype.getBestAnswers = function (startLogits, endLogits, origTokens, tokenToOrigMap, docIndex) {
if (docIndex === void 0) { docIndex = 0; }
var startIndexes = this.getBestIndex(startLogits);
var endIndexes = this.getBestIndex(endLogits);
var origResults = [];
startIndexes.forEach(function (start) {
endIndexes.forEach(function (end) {
if (tokenToOrigMap[start] && tokenToOrigMap[end] && end >= start) {
var length_2 = end - start + 1;
if (length_2 < MAX_ANS_LEN) {
origResults.push([start, end, startLogits[start] + endLogits[end]]);
}
}
});
});
origResults.sort(function (a, b) { return b[2] - a[2]; });
var answers = [];
for (var i = 0; i < origResults.length; i++) {
if (i >= PREDICT_ANS_NUM) {
break;
}
var convertedText = '';
if (origResults[i][0] > 0) {
convertedText = this.convertBack(origTokens, tokenToOrigMap, origResults[i][0], origResults[i][1]);
}
else {
convertedText = '';
}
answers.push([convertedText, origResults[i][2], docIndex]);
}
return answers;
};
MobileBertImpl.prototype.getBestIndex = function (logits) {
var tmpList = [];
for (var i = 0; i < MAX_SEQ_LEN; i++) {
tmpList.push([i, i, logits[i]]);
}
tmpList.sort(function (a, b) { return b[2] - a[2]; });
var indexes = [];
for (var i = 0; i < PREDICT_ANS_NUM; i++) {
indexes.push(tmpList[i][0]);
}
return indexes;
};
MobileBertImpl.prototype.convertBack = function (origTokens, tokenToOrigMap, start, end) {
var shiftedStart = start + OUTPUT_OFFSET;
var shiftedEnd = end + OUTPUT_OFFSET;
var startIndex = tokenToOrigMap[shiftedStart];
var endIndex = tokenToOrigMap[shiftedEnd];
var ans = origTokens.slice(startIndex, endIndex + 1).join(' ');
return ans;
};
return MobileBertImpl;
}());
var load = function () { return __awaiter(_this$1, void 0, void 0, function () {
var mobileBert;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
mobileBert = new MobileBertImpl();
return [4, mobileBert.load()];
case 1:
_a.sent();
return [2, mobileBert];
}
});
}); };
var version = '1.0.0';
exports.load = load;
exports.version = version;
Object.defineProperty(exports, '__esModule', { value: true });
})));
let modelPromise = undefined;
const input = document.getElementById('question');
const search = document.getElementById('search');
const contextDiv = document.getElementById('context');
const answerDiv = document.getElementById('answer');
const highlighter = document.getElementById('highlighter');
const step1 = document.getElementById('step1');
const step2 = document.getElementById('step2');
const reset = document.getElementById('reset');
const continueBtn = document.getElementById('continue');
async function process() {
const model = await modelPromise;
const answers = model.findAnswers(input.value, contextDiv.value);
console.log(answers[0][0]);
highlighter.innerHTML = highlighter.innerText.replace(answers[0][0], '<span>' + answers[0][0] + '</span>');
highlighter.setAttribute('class', '');
contextDiv.setAttribute('class', 'invisible');
var elems = document.querySelectorAll('#highlighter span');
for (var i = 0; i < elems.length; i++) {
elems[i].setAttribute('class', 'highlight');
}
}
function resetGUI() {
contextDiv.setAttribute('class', '');
step2.setAttribute('class', 'animated fadeOutUp');
step1.setAttribute('class', 'animated bounceInDown');
}
input.addEventListener('keyup', async (event) => {
if (event.key === 'Enter') {
process();
}
});
function sanitizeAndContinue() {
const tmp = document.createElement('p');
tmp.innerText = contextDiv.value.replace(/\s\s+/, ' ');
highlighter.innerHTML = tmp.innerText;
highlighter.setAttribute('class', '');
step1.setAttribute('class', 'animated fadeOutUp');
step2.setAttribute('class', 'animated bounceInDown');
}
continueBtn.addEventListener('click', function() {
sanitizeAndContinue();
});
contextDiv.addEventListener('keyup', function() {
sanitizeAndContinue();
});
search.addEventListener('click', process);
reset.addEventListener('click', resetGUI);
window.addEventListener('load', function() {
modelPromise = qna.load();
modelPromise.then(function() {
preloader.setAttribute('class', 'removed');
});
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.