/* ----------------------------------------------
* Slider Animation
* ---------------------------------------------- */
/*
* ----------------------------------------
* Reveal Animation
* ----------------------------------------
*/
@-webkit-keyframes clip-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
@keyframes clip-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
@-webkit-keyframes text-revealer {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
60% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
@keyframes text-revealer {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
60% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
@-webkit-keyframes text-revealer-vartical {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
60% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
100% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
@keyframes text-revealer-vartical {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
60% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
100% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
/*
* ----------------------------------------
* Border Animation
* ----------------------------------------
*/
@keyframes bar-top {
0% {
transform: scale(0, 1);
}
12.5% {
transform: scale(1, 1);
}
87.5% {
transform: scale(1, 1);
}
100% {
transform: scale(1, 1);
}
}
@keyframes bar-right {
0% {
transform: scale(1, 0);
}
12.5% {
transform: scale(1, 0);
}
25% {
transform: scale(1, 1);
}
75% {
transform: scale(1, 1);
}
87.5% {
transform: scale(1, 1);
}
100% {
transform: scale(1, 1);
}
}
@keyframes bar-bottom {
0% {
transform: scale(0, 1);
}
25% {
transform: scale(0, 1);
}
37.5% {
transform: scale(1, 1);
}
62.5% {
transform: scale(1, 1);
}
75% {
transform: scale(1, 1);
}
100% {
transform: scale(1, 1);
}
}
@keyframes bar-left {
0% {
transform: scale(1, 0);
}
37.5% {
transform: scale(1, 0);
}
50% {
transform: scale(1, 1);
}
62.5% {
transform: scale(1, 1);
}
100% {
transform: scale(1, 1);
}
}
/*--rotation--*/
@keyframes rotation {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
/**
* ----------------------------------------
* animation tracking-in-expand
* ----------------------------------------
*/
.tracking-in-expand {
-webkit-animation-name: tracking-in-expand;
animation-name: tracking-in-expand;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes tracking-in-expand {
0% {
letter-spacing: -8px;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
@keyframes tracking-in-expand {
0% {
letter-spacing: -8px;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
/**
* ----------------------------------------
* animation tracking-in-expand-fwd
* ----------------------------------------
*/
.tracking-in-expand-fwd {
-webkit-animation-name: tracking-in-expand-fwd;
animation-name: tracking-in-expand-fwd;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes tracking-in-expand-fwd {
0% {
letter-spacing: -0.5em;
-webkit-transform: translateZ(-700px);
transform: translateZ(-700px);
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
}
@keyframes tracking-in-expand-fwd {
0% {
letter-spacing: -0.5em;
-webkit-transform: translateZ(-700px);
transform: translateZ(-700px);
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation tracking-in-expand-fwd-top
* ----------------------------------------
*/
.tracking-in-expand-fwd-top {
-webkit-animation-name: tracking-in-expand-fwd-top;
animation-name: tracking-in-expand-fwd-top;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes tracking-in-expand-fwd-top {
0% {
letter-spacing: -0.5em;
-webkit-transform: translateZ(-700px) translateY(-500px);
transform: translateZ(-700px) translateY(-500px);
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
-webkit-transform: translateZ(0) translateY(0);
transform: translateZ(0) translateY(0);
opacity: 1;
}
}
@keyframes tracking-in-expand-fwd-top {
0% {
letter-spacing: -0.5em;
-webkit-transform: translateZ(-700px) translateY(-500px);
transform: translateZ(-700px) translateY(-500px);
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
-webkit-transform: translateZ(0) translateY(0);
transform: translateZ(0) translateY(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation tracking-in-expand-fwd-bottom
* ----------------------------------------
*/
.tracking-in-expand-fwd-bottom {
-webkit-animation-name: tracking-in-expand-fwd-bottom;
animation-name: tracking-in-expand-fwd-bottom;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes tracking-in-expand-fwd-bottom {
0% {
letter-spacing: -0.5em;
-webkit-transform: translateZ(-700px) translateY(500px);
transform: translateZ(-700px) translateY(500px);
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
-webkit-transform: translateZ(0) translateY(0);
transform: translateZ(0) translateY(0);
opacity: 1;
}
}
@keyframes tracking-in-expand-fwd-bottom {
0% {
letter-spacing: -0.5em;
-webkit-transform: translateZ(-700px) translateY(500px);
transform: translateZ(-700px) translateY(500px);
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
-webkit-transform: translateZ(0) translateY(0);
transform: translateZ(0) translateY(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation tracking-in-contract
* ----------------------------------------
*/
.tracking-in-contract {
-webkit-animation-name: tracking-in-contract;
animation-name: tracking-in-contract;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes tracking-in-contract {
0% {
letter-spacing: 1em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
letter-spacing: normal;
opacity: 1;
}
}
@keyframes tracking-in-contract {
0% {
letter-spacing: 1em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
letter-spacing: normal;
opacity: 1;
}
}
/**
* ----------------------------------------
* animation tracking-in-contract-bck
* ----------------------------------------
*/
.tracking-in-contract-bck {
-webkit-animation-name: tracking-in-contract-bck;
animation-name: tracking-in-contract-bck;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes tracking-in-contract-bck {
0% {
letter-spacing: 1em;
-webkit-transform: translateZ(400px);
transform: translateZ(400px);
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
}
@keyframes tracking-in-contract-bck {
0% {
letter-spacing: 1em;
-webkit-transform: translateZ(400px);
transform: translateZ(400px);
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation tracking-in-contract-bck-top
* ----------------------------------------
*/
.tracking-in-contract-bck-top {
-webkit-animation-name: tracking-in-contract-bck-top;
animation-name: tracking-in-contract-bck-top;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes tracking-in-contract-bck-top {
0% {
letter-spacing: 1em;
-webkit-transform: translateZ(400px) translateY(-300px);
transform: translateZ(400px) translateY(-300px);
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
-webkit-transform: translateZ(0) translateY(0);
transform: translateZ(0) translateY(0);
opacity: 1;
}
}
@keyframes tracking-in-contract-bck-top {
0% {
letter-spacing: 1em;
-webkit-transform: translateZ(400px) translateY(-300px);
transform: translateZ(400px) translateY(-300px);
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
-webkit-transform: translateZ(0) translateY(0);
transform: translateZ(0) translateY(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation tracking-in-contract-bck-bottom
* ----------------------------------------
*/
.tracking-in-contract-bck-bottom {
-webkit-animation-name: tracking-in-contract-bck-bottom;
animation-name: tracking-in-contract-bck-bottom;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes tracking-in-contract-bck-bottom {
0% {
letter-spacing: 1em;
-webkit-transform: translateZ(400px) translateY(300px);
transform: translateZ(400px) translateY(300px);
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
-webkit-transform: translateZ(0) translateY(0);
transform: translateZ(0) translateY(0);
opacity: 1;
}
}
@keyframes tracking-in-contract-bck-bottom {
0% {
letter-spacing: 1em;
-webkit-transform: translateZ(400px) translateY(300px);
transform: translateZ(400px) translateY(300px);
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
-webkit-transform: translateZ(0) translateY(0);
transform: translateZ(0) translateY(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation text-focus-in
* ----------------------------------------
*/
.text-focus-in {
-webkit-animation-name: text-focus-in;
animation-name: text-focus-in;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
@keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation focus-in-expand
* ----------------------------------------
*/
.focus-in-expand {
-webkit-animation-name: focus-in-expand;
animation-name: focus-in-expand;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes focus-in-expand {
0% {
letter-spacing: -0.5em;
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
@keyframes focus-in-expand {
0% {
letter-spacing: -0.5em;
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation focus-in-expand-fwd
* ----------------------------------------
*/
.focus-in-expand-fwd {
-webkit-animation-name: focus-in-expand-fwd;
animation-name: focus-in-expand-fwd;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes focus-in-expand-fwd {
0% {
letter-spacing: -0.5em;
-webkit-transform: translateZ(-800px);
transform: translateZ(-800px);
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
@keyframes focus-in-expand-fwd {
0% {
letter-spacing: -0.5em;
-webkit-transform: translateZ(-800px);
transform: translateZ(-800px);
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation focus-in-contract
* ----------------------------------------
*/
.focus-in-contract {
-webkit-animation-name: focus-in-contract;
animation-name: focus-in-contract;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes focus-in-contract {
0% {
letter-spacing: 8px;
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
@keyframes focus-in-contract {
0% {
letter-spacing: 8px;
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation focus-in-contract-bck
* ----------------------------------------
*/
.focus-in-contract-bck {
-webkit-animation-name: focus-in-contract-bck;
animation-name: focus-in-contract-bck;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes focus-in-contract-bck {
0% {
letter-spacing: 1em;
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(12px);
transform: translateZ(12px);
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
@keyframes focus-in-contract-bck {
0% {
letter-spacing: 1em;
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(12px);
transform: translateZ(12px);
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation slide-in-top
* ----------------------------------------
*/
.slide-in-top {
-webkit-animation-name: slide-in-top;
animation-name: slide-in-top;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes slide-in-top {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-top {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation slide-in-right
* ----------------------------------------
*/
.slide-in-right {
-webkit-animation-name: slide-in-right;
animation-name: slide-in-right;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes slide-in-right {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-right {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation slide-in-bottom
* ----------------------------------------
*/
.slide-in-bottom {
-webkit-animation-name: slide-in-bottom;
animation-name: slide-in-bottom;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation slide-in-left
* ----------------------------------------
*/
.slide-in-left {
-webkit-animation-name: slide-in-left;
animation-name: slide-in-left;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation bounce-in-top
* ----------------------------------------
*/
.bounce-in-top {
-webkit-animation-name: bounce-in-top;
animation-name: bounce-in-top;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
/**
* ----------------------------------------
* animation bounce-in-right
* ----------------------------------------
*/
.bounce-in-right {
-webkit-animation-name: bounce-in-right;
animation-name: bounce-in-right;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes bounce-in-right {
0% {
-webkit-transform: translateX(600px);
transform: translateX(600px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateX(68px);
transform: translateX(68px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateX(32px);
transform: translateX(32px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes bounce-in-right {
0% {
-webkit-transform: translateX(600px);
transform: translateX(600px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateX(68px);
transform: translateX(68px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateX(32px);
transform: translateX(32px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
/**
* ----------------------------------------
* animation bounce-in-bottom
* ----------------------------------------
*/
.bounce-in-bottom {
-webkit-animation-name: bounce-in-bottom;
animation-name: bounce-in-bottom;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes bounce-in-bottom {
0% {
-webkit-transform: translateY(500px);
transform: translateY(500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(65px);
transform: translateY(65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(28px);
transform: translateY(28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes bounce-in-bottom {
0% {
-webkit-transform: translateY(500px);
transform: translateY(500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(65px);
transform: translateY(65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(28px);
transform: translateY(28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
/**
* ----------------------------------------
* animation bounce-in-left
* ----------------------------------------
*/
.bounce-in-left {
-webkit-animation-name: bounce-in-left;
animation-name: bounce-in-left;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes bounce-in-left {
0% {
-webkit-transform: translateX(-600px);
transform: translateX(-600px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateX(-68px);
transform: translateX(-68px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateX(-28px);
transform: translateX(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateX(-8px);
transform: translateX(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes bounce-in-left {
0% {
-webkit-transform: translateX(-600px);
transform: translateX(-600px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateX(-68px);
transform: translateX(-68px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateX(-28px);
transform: translateX(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateX(-8px);
transform: translateX(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
/**
* ----------------------------------------
* animation bounce-in-fwd
* ----------------------------------------
*/
.bounce-in-fwd {
-webkit-animation-name: bounce-in-fwd;
animation-name: bounce-in-fwd;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes bounce-in-fwd {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: scale(0.84);
transform: scale(0.84);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
89% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes bounce-in-fwd {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: scale(0.84);
transform: scale(0.84);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
89% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
/**
* ----------------------------------------
* animation bounce-in-bck
* ----------------------------------------
*/
.bounce-in-bck {
-webkit-animation-name: bounce-in-bck;
animation-name: bounce-in-bck;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes bounce-in-bck {
0% {
-webkit-transform: scale(7);
transform: scale(7);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: scale(1.24);
transform: scale(1.24);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
89% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: scale(1.04);
transform: scale(1.04);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes bounce-in-bck {
0% {
-webkit-transform: scale(7);
transform: scale(7);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: scale(1.24);
transform: scale(1.24);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
89% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: scale(1.04);
transform: scale(1.04);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
/**
* ----------------------------------------
* animation fade-in
* ----------------------------------------
*/
.fade-in {
-webkit-animation-name: fade-in;
animation-name: fade-in;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/**
* ----------------------------------------
* animation fade-in-fwd
* ----------------------------------------
*/
.fade-in-fwd {
-webkit-animation-name: fade-in-fwd;
animation-name: fade-in-fwd;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes fade-in-fwd {
0% {
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
}
@keyframes fade-in-fwd {
0% {
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation fade-in-bck
* ----------------------------------------
*/
.fade-in-bck {
-webkit-animation-name: fade-in-bck;
animation-name: fade-in-bck;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes fade-in-bck {
0% {
-webkit-transform: translateZ(80px);
transform: translateZ(80px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
}
@keyframes fade-in-bck {
0% {
-webkit-transform: translateZ(80px);
transform: translateZ(80px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation fade-in-top
* ----------------------------------------
*/
.fade-in-top {
-webkit-animation-name: fade-in-top;
animation-name: fade-in-top;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes fade-in-top {
0% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes fade-in-top {
0% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation fade-in-tr
* ----------------------------------------
*/
.fade-in-tr {
-webkit-animation-name: fade-in-tr;
animation-name: fade-in-tr;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes fade-in-tr {
0% {
-webkit-transform: translateX(50px) translateY(-50px);
transform: translateX(50px) translateY(-50px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
opacity: 1;
}
}
@keyframes fade-in-tr {
0% {
-webkit-transform: translateX(50px) translateY(-50px);
transform: translateX(50px) translateY(-50px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation fade-in-right
* ----------------------------------------
*/
.fade-in-right {
-webkit-animation-name: fade-in-right;
animation-name: fade-in-right;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes fade-in-right {
0% {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes fade-in-right {
0% {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation fade-in-br
* ----------------------------------------
*/
.fade-in-br {
-webkit-animation-name: fade-in-br;
animation-name: fade-in-br;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes fade-in-br {
0% {
-webkit-transform: translateX(50px) translateY(50px);
transform: translateX(50px) translateY(50px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
opacity: 1;
}
}
@keyframes fade-in-br {
0% {
-webkit-transform: translateX(50px) translateY(50px);
transform: translateX(50px) translateY(50px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation fade-in-bottom
* ----------------------------------------
*/
.fade-in-bottom {
-webkit-animation-name: fade-in-bottom;
animation-name: fade-in-bottom;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes fade-in-bottom {
0% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes fade-in-bottom {
0% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation fade-in-bl
* ----------------------------------------
*/
.fade-in-bl {
-webkit-animation-name: fade-in-bl;
animation-name: fade-in-bl;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes fade-in-bl {
0% {
-webkit-transform: translateX(-50px) translateY(50px);
transform: translateX(-50px) translateY(50px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
opacity: 1;
}
}
@keyframes fade-in-bl {
0% {
-webkit-transform: translateX(-50px) translateY(50px);
transform: translateX(-50px) translateY(50px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation fade-in-left
* ----------------------------------------
*/
.fade-in-left {
-webkit-animation-name: fade-in-left;
animation-name: fade-in-left;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes fade-in-left {
0% {
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes fade-in-left {
0% {
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation fade-in-tl
* ----------------------------------------
*/
.fade-in-tl {
-webkit-animation-name: fade-in-tl;
animation-name: fade-in-tl;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes fade-in-tl {
0% {
-webkit-transform: translateX(-50px) translateY(-50px);
transform: translateX(-50px) translateY(-50px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
opacity: 1;
}
}
@keyframes fade-in-tl {
0% {
-webkit-transform: translateX(-50px) translateY(-50px);
transform: translateX(-50px) translateY(-50px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation zoomIn
* ----------------------------------------
*/
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.8, 0.8, 0.8);
transform: scale3d(0.8, 0.8, 0.8);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.8, 0.8, 0.8);
transform: scale3d(0.8, 0.8, 0.8);
}
50% {
opacity: 1;
}
}
/**
* ----------------------------------------
* animation rotateIn
* ----------------------------------------
*/
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateIn {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
/**
* ----------------------------------------
* animation rotateInDownLeft
* ----------------------------------------
*/
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
/**
* ----------------------------------------
* animation rotateInDownRight
* ----------------------------------------
*/
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
/**
* ----------------------------------------
* animation rotateInUpLeft
* ----------------------------------------
*/
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
/**
* ----------------------------------------
* animation rotateInUpRight
* ----------------------------------------
*/
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
/**
* ----------------------------------------
* animation kenburns-top
* ----------------------------------------
*/
.main-slider .slick-current.slick-active .kenburns-top {
-webkit-animation-name: kenburns-top;
animation-name: kenburns-top;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
/* Keyframes */
@-webkit-keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.07) translateY(-15px);
transform: scale(1.07) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
@keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.07) translateY(-15px);
transform: scale(1.07) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
/**
* ----------------------------------------
* animation kenburns-top-right
* ----------------------------------------
*/
.main-slider .slick-current.slick-active .kenburns-top-right {
-webkit-animation-name: kenburns-top-right;
animation-name: kenburns-top-right;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
/* Keyframes */
@-webkit-keyframes kenburns-top-right {
0% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
-webkit-transform-origin: 84% 16%;
transform-origin: 84% 16%;
}
100% {
-webkit-transform: scale(1.15) translate(20px, -15px);
transform: scale(1.15) translate(20px, -15px);
-webkit-transform-origin: right top;
transform-origin: right top;
}
}
@keyframes kenburns-top-right {
0% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
-webkit-transform-origin: 84% 16%;
transform-origin: 84% 16%;
}
100% {
-webkit-transform: scale(1.15) translate(20px, -15px);
transform: scale(1.15) translate(20px, -15px);
-webkit-transform-origin: right top;
transform-origin: right top;
}
}
/**
* ----------------------------------------
* animation kenburns-right
* ----------------------------------------
*/
.main-slider .slick-current.slick-active .kenburns-right {
-webkit-animation-name: kenburns-right;
animation-name: kenburns-right;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes kenburns-right {
0% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
-webkit-transform-origin: 84% 50%;
transform-origin: 84% 50%;
}
100% {
-webkit-transform: scale(1.15) translateX(20px);
transform: scale(1.15) translateX(20px);
-webkit-transform-origin: right;
transform-origin: right;
}
}
@keyframes kenburns-right {
0% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
-webkit-transform-origin: 84% 50%;
transform-origin: 84% 50%;
}
100% {
-webkit-transform: scale(1.15) translateX(20px);
transform: scale(1.15) translateX(20px);
-webkit-transform-origin: right;
transform-origin: right;
}
}
/**
* ----------------------------------------
* animation kenburns-bottom-right
* ----------------------------------------
*/
.main-slider .slick-current.slick-active .kenburns-bottom-right {
-webkit-animation-name: kenburns-bottom-right;
animation-name: kenburns-bottom-right;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes kenburns-bottom-right {
0% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
-webkit-transform-origin: 84% 84%;
transform-origin: 84% 84%;
}
100% {
-webkit-transform: scale(1.15) translate(20px, 15px);
transform: scale(1.15) translate(20px, 15px);
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
}
}
@keyframes kenburns-bottom-right {
0% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
-webkit-transform-origin: 84% 84%;
transform-origin: 84% 84%;
}
100% {
-webkit-transform: scale(1.15) translate(20px, 15px);
transform: scale(1.15) translate(20px, 15px);
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
}
}
/**
* ----------------------------------------
* animation kenburns-bottom
* ----------------------------------------
*/
.main-slider .slick-current.slick-active .kenburns-bottom {
-webkit-animation-name: kenburns-bottom;
animation-name: kenburns-bottom;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes kenburns-bottom {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 84%;
transform-origin: 50% 84%;
}
100% {
-webkit-transform: scale(1.15) translateY(15px);
transform: scale(1.15) translateY(15px);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
}
@keyframes kenburns-bottom {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 84%;
transform-origin: 50% 84%;
}
100% {
-webkit-transform: scale(1.15) translateY(15px);
transform: scale(1.15) translateY(15px);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
}
/**
* ----------------------------------------
* animation kenburns-bottom-left
* ----------------------------------------
*/
.main-slider .slick-current.slick-active .kenburns-bottom-left {
-webkit-animation-name: kenburns-bottom-left;
animation-name: kenburns-bottom-left;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes kenburns-bottom-left {
0% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
-webkit-transform-origin: 16% 84%;
transform-origin: 16% 84%;
}
100% {
-webkit-transform: scale(1.15) translate(-20px, 15px);
transform: scale(1.15) translate(-20px, 15px);
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
}
@keyframes kenburns-bottom-left {
0% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
-webkit-transform-origin: 16% 84%;
transform-origin: 16% 84%;
}
100% {
-webkit-transform: scale(1.15) translate(-20px, 15px);
transform: scale(1.15) translate(-20px, 15px);
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
}
/**
* ----------------------------------------
* animation kenburns-left
* ----------------------------------------
*/
.main-slider .slick-current.slick-active .kenburns-left {
-webkit-animation-name: kenburns-left;
animation-name: kenburns-left;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes kenburns-left {
0% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
-webkit-transform-origin: 16% 50%;
transform-origin: 16% 50%;
}
100% {
-webkit-transform: scale(1.15) translate(-20px, 15px);
transform: scale(1.15) translate(-20px, 15px);
-webkit-transform-origin: left;
transform-origin: left;
}
}
@keyframes kenburns-left {
0% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
-webkit-transform-origin: 16% 50%;
transform-origin: 16% 50%;
}
100% {
-webkit-transform: scale(1.15) translate(-20px, 15px);
transform: scale(1.15) translate(-20px, 15px);
-webkit-transform-origin: left;
transform-origin: left;
}
}
/*
* ----------------------------------------
* animation kenburns-top-left
* ----------------------------------------
*/
.main-slider .slick-current.slick-active .kenburns-top-left {
-webkit-animation-name: kenburns-top-left;
animation-name: kenburns-top-left;
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-fill-mode: both;
}
@-webkit-keyframes kenburns-top-left {
0% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
-webkit-transform-origin: 16% 16%;
transform-origin: 16% 16%;
}
100% {
-webkit-transform: scale(1.15) translate(-20px, -15px);
transform: scale(1.15) translate(-20px, -15px);
-webkit-transform-origin: top left;
transform-origin: top left;
}
}
@keyframes kenburns-top-left {
0% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
-webkit-transform-origin: 16% 16%;
transform-origin: 16% 16%;
}
/*
* ----------------------------------------
* Jump Animation
* ----------------------------------------
*/
@-webkit-keyframes jump {
20% {
-webkit-transform: translateY(2%) scaleY(0.9);
transform: translateY(2%) scaleY(0.9);
opacity: 1;
}
40% {
-webkit-transform: translateY(-100%) scaleY(1.2);
transform: translateY(-100%) scaleY(1.2);
opacity: 1;
}
50% {
-webkit-transform: translateY(10%) scaleY(0.8);
transform: translateY(10%) scaleY(0.8);
opacity: 1;
}
70% {
-webkit-transform: translateY(-5%) scaleY(1);
transform: translateY(-5%) scaleY(1);
opacity: 1;
}
80%, 100% {
-webkit-transform: translateY(0) scaleY(1);
transform: translateY(0) scaleY(1);
opacity: 1;
}
}
@keyframes jump {
20% {
-webkit-transform: translateY(2%) scaleY(0.9);
transform: translateY(2%) scaleY(0.9);
opacity: 1;
}
40% {
-webkit-transform: translateY(-100%) scaleY(1.2);
transform: translateY(-100%) scaleY(1.2);
opacity: 1;
}
50% {
-webkit-transform: translateY(10%) scaleY(0.8);
transform: translateY(10%) scaleY(0.8);
opacity: 1;
}
70% {
-webkit-transform: translateY(-5%) scaleY(1);
transform: translateY(-5%) scaleY(1);
opacity: 1;
}
80%, 100% {
-webkit-transform: translateY(0) scaleY(1);
transform: translateY(0) scaleY(1);
opacity: 1;
}
}