1376 lines
42 KiB
Plaintext
1376 lines
42 KiB
Plaintext
/*===============================================
|
|
Animate.css Helpers
|
|
================================================= */
|
|
/* used in conjuction with "data-animate"
|
|
* attr to create a delayed page animation
|
|
* read docs for more info on proper use*/
|
|
|
|
.animated-delay, .animated-waypoint {
|
|
opacity: 0
|
|
}
|
|
.sparkline-delay {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 40px;
|
|
height: 35px;
|
|
line-height: 24px;
|
|
}
|
|
.animated.animated-short {
|
|
-webkit-animation-duration: 0.6s !important;
|
|
animation-duration: 0.6s !important;
|
|
}
|
|
.animated.animated-shorter {
|
|
-webkit-animation-duration: 0.3s !important;
|
|
animation-duration: 0.3s !important;
|
|
}
|
|
.animated.animated-long {
|
|
-webkit-animation-duration: 1.4s !important;
|
|
animation-duration: 1.4s !important;
|
|
}
|
|
.animated.animated-longer {
|
|
-webkit-animation-duration: 2s !important;
|
|
animation-duration: 2s !important;
|
|
}
|
|
/*===============================================
|
|
Animate.css Library
|
|
=================================================
|
|
Animate.css - http://daneden.me/animate
|
|
Licensed under the MIT license - http://opensource.org/licenses/MIT
|
|
|
|
Copyright (c) 2014 Daniel Eden
|
|
*/
|
|
|
|
.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.hinge {
|
|
-webkit-animation-duration: 2s;
|
|
animation-duration: 2s;
|
|
}
|
|
& when (@animate-fades) {
|
|
/*===============================================
|
|
Animate.css "Fades" Pack
|
|
================================================*/
|
|
/* FADE ENTRANCES
|
|
* fadeIn
|
|
*/
|
|
|
|
@-webkit-keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.fadeIn {
|
|
-webkit-animation-name: fadeIn;
|
|
animation-name: fadeIn;
|
|
}
|
|
/* fadeInDown */
|
|
|
|
@-webkit-keyframes fadeInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes fadeInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
.fadeInDown {
|
|
-webkit-animation-name: fadeInDown;
|
|
animation-name: fadeInDown;
|
|
}
|
|
/* fadeInLeft */
|
|
|
|
@-webkit-keyframes fadeInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes fadeInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
.fadeInLeft {
|
|
-webkit-animation-name: fadeInLeft;
|
|
animation-name: fadeInLeft;
|
|
}
|
|
/* fadeInRight */
|
|
|
|
@-webkit-keyframes fadeInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes fadeInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
.fadeInRight {
|
|
-webkit-animation-name: fadeInRight;
|
|
animation-name: fadeInRight;
|
|
}
|
|
/* fadeInUp */
|
|
|
|
@-webkit-keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
.fadeInUp {
|
|
-webkit-animation-name: fadeInUp;
|
|
animation-name: fadeInUp;
|
|
}
|
|
} // end fades entrance pack
|
|
& when (@animate-fades-big) {
|
|
/*===============================================
|
|
Animate.css "Fades-Big" Pack
|
|
================================================*/
|
|
/* FADES BIG ENTRANCES
|
|
* fadeInDownBig
|
|
*/
|
|
|
|
@-webkit-keyframes fadeInDownBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -2000px, 0);
|
|
transform: translate3d(0, -2000px, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes fadeInDownBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -2000px, 0);
|
|
transform: translate3d(0, -2000px, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
.fadeInDownBig {
|
|
-webkit-animation-name: fadeInDownBig;
|
|
animation-name: fadeInDownBig;
|
|
}
|
|
/* fadeInLeftBig */
|
|
|
|
@-webkit-keyframes fadeInLeftBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(-2000px, 0, 0);
|
|
transform: translate3d(-2000px, 0, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes fadeInLeftBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(-2000px, 0, 0);
|
|
transform: translate3d(-2000px, 0, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
.fadeInLeftBig {
|
|
-webkit-animation-name: fadeInLeftBig;
|
|
animation-name: fadeInLeftBig;
|
|
}
|
|
/* fadeInRightBig */
|
|
|
|
@-webkit-keyframes fadeInRightBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(2000px, 0, 0);
|
|
transform: translate3d(2000px, 0, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes fadeInRightBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(2000px, 0, 0);
|
|
transform: translate3d(2000px, 0, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
.fadeInRightBig {
|
|
-webkit-animation-name: fadeInRightBig;
|
|
animation-name: fadeInRightBig;
|
|
}
|
|
/* fadeInUpBig */
|
|
|
|
@-webkit-keyframes fadeInUpBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 2000px, 0);
|
|
transform: translate3d(0, 2000px, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes fadeInUpBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 2000px, 0);
|
|
transform: translate3d(0, 2000px, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
.fadeInUpBig {
|
|
-webkit-animation-name: fadeInUpBig;
|
|
animation-name: fadeInUpBig;
|
|
}
|
|
} // end fades entrance pack
|
|
& when (@animate-flips) {
|
|
/*===============================================
|
|
Animate.css "Flips" Pack
|
|
================================================*/
|
|
/* FLIPPING ENTRANCES
|
|
* flip
|
|
*/
|
|
|
|
@-webkit-keyframes flip {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
40% {
|
|
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
|
transform: perspective(400px) 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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
|
transform: perspective(400px) 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(.95, .95, .95);
|
|
transform: perspective(400px) scale3d(.95, .95, .95);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
100% {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
}
|
|
@keyframes flip {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
40% {
|
|
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
|
transform: perspective(400px) 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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
|
transform: perspective(400px) 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(.95, .95, .95);
|
|
transform: perspective(400px) scale3d(.95, .95, .95);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
100% {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px);
|
|
-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;
|
|
}
|
|
/* flipInX */
|
|
|
|
@-webkit-keyframes flipInX {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
|
transition-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
|
transition-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);
|
|
}
|
|
100% {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px);
|
|
}
|
|
}
|
|
@keyframes flipInX {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
|
transition-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
|
transition-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);
|
|
}
|
|
100% {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px);
|
|
}
|
|
}
|
|
.flipInX {
|
|
-webkit-backface-visibility: visible !important;
|
|
backface-visibility: visible !important;
|
|
-webkit-animation-name: flipInX;
|
|
animation-name: flipInX;
|
|
}
|
|
/* flipInY */
|
|
|
|
@-webkit-keyframes flipInY {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
|
transition-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
|
transition-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);
|
|
}
|
|
100% {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px);
|
|
}
|
|
}
|
|
@keyframes flipInY {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
|
transition-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
|
transition-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);
|
|
}
|
|
100% {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px);
|
|
}
|
|
}
|
|
.flipInY {
|
|
-webkit-backface-visibility: visible !important;
|
|
backface-visibility: visible !important;
|
|
-webkit-animation-name: flipInY;
|
|
animation-name: flipInY;
|
|
}
|
|
} // end flips entrance pack
|
|
& when (@animate-bounces) {
|
|
/*===============================================
|
|
Animate.css "Bounces" Pack
|
|
================================================*/
|
|
/* BOUNCE ENTRANCES
|
|
* bounceIn
|
|
*/
|
|
|
|
@-webkit-keyframes bounceIn {
|
|
0%, 20%, 40%, 60%, 80%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
}
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
|
transform: scale3d(.3, .3, .3);
|
|
}
|
|
20% {
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
|
transform: scale3d(1.1, 1.1, 1.1);
|
|
}
|
|
40% {
|
|
-webkit-transform: scale3d(.9, .9, .9);
|
|
transform: scale3d(.9, .9, .9);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1.03, 1.03, 1.03);
|
|
transform: scale3d(1.03, 1.03, 1.03);
|
|
}
|
|
80% {
|
|
-webkit-transform: scale3d(.97, .97, .97);
|
|
transform: scale3d(.97, .97, .97);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
@keyframes bounceIn {
|
|
0%, 20%, 40%, 60%, 80%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
}
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
|
transform: scale3d(.3, .3, .3);
|
|
}
|
|
20% {
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
|
transform: scale3d(1.1, 1.1, 1.1);
|
|
}
|
|
40% {
|
|
-webkit-transform: scale3d(.9, .9, .9);
|
|
transform: scale3d(.9, .9, .9);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1.03, 1.03, 1.03);
|
|
transform: scale3d(1.03, 1.03, 1.03);
|
|
}
|
|
80% {
|
|
-webkit-transform: scale3d(.97, .97, .97);
|
|
transform: scale3d(.97, .97, .97);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
.bounceIn {
|
|
-webkit-animation-name: bounceIn;
|
|
animation-name: bounceIn;
|
|
-webkit-animation-duration: .75s;
|
|
animation-duration: .75s;
|
|
}
|
|
/* bounceInDown */
|
|
|
|
@-webkit-keyframes bounceInDown {
|
|
0%, 60%, 75%, 90%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
}
|
|
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);
|
|
}
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes bounceInDown {
|
|
0%, 60%, 75%, 90%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
}
|
|
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);
|
|
}
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
.bounceInDown {
|
|
-webkit-animation-name: bounceInDown;
|
|
animation-name: bounceInDown;
|
|
}
|
|
/* bounceInLeft */
|
|
|
|
@-webkit-keyframes bounceInLeft {
|
|
0%, 60%, 75%, 90%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
}
|
|
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);
|
|
}
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes bounceInLeft {
|
|
0%, 60%, 75%, 90%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
}
|
|
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);
|
|
}
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
.bounceInLeft {
|
|
-webkit-animation-name: bounceInLeft;
|
|
animation-name: bounceInLeft;
|
|
}
|
|
/* bounceInRight */
|
|
|
|
@-webkit-keyframes bounceInRight {
|
|
0%, 60%, 75%, 90%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
}
|
|
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);
|
|
}
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes bounceInRight {
|
|
0%, 60%, 75%, 90%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
}
|
|
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);
|
|
}
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
.bounceInRight {
|
|
-webkit-animation-name: bounceInRight;
|
|
animation-name: bounceInRight;
|
|
}
|
|
/* bounceInUp */
|
|
|
|
@-webkit-keyframes bounceInUp {
|
|
0%, 60%, 75%, 90%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
}
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 3000px, 0);
|
|
transform: translate3d(0, 3000px, 0);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, -20px, 0);
|
|
transform: translate3d(0, -20px, 0);
|
|
}
|
|
75% {
|
|
-webkit-transform: translate3d(0, 10px, 0);
|
|
transform: translate3d(0, 10px, 0);
|
|
}
|
|
90% {
|
|
-webkit-transform: translate3d(0, -5px, 0);
|
|
transform: translate3d(0, -5px, 0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
@keyframes bounceInUp {
|
|
0%, 60%, 75%, 90%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
}
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 3000px, 0);
|
|
transform: translate3d(0, 3000px, 0);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, -20px, 0);
|
|
transform: translate3d(0, -20px, 0);
|
|
}
|
|
75% {
|
|
-webkit-transform: translate3d(0, 10px, 0);
|
|
transform: translate3d(0, 10px, 0);
|
|
}
|
|
90% {
|
|
-webkit-transform: translate3d(0, -5px, 0);
|
|
transform: translate3d(0, -5px, 0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
.bounceInUp {
|
|
-webkit-animation-name: bounceInUp;
|
|
animation-name: bounceInUp;
|
|
}
|
|
} // End bounce entrance pack
|
|
& when (@animate-rotates) {
|
|
/*===============================================
|
|
Animate.css "Rotates" Pack
|
|
================================================*/
|
|
/* ROTATES ENTRANCES
|
|
* rotateIn
|
|
*/
|
|
|
|
@-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;
|
|
}
|
|
}
|
|
.rotateIn {
|
|
-webkit-animation-name: rotateIn;
|
|
animation-name: rotateIn;
|
|
}
|
|
/* rotateInDownLeft */
|
|
|
|
@-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;
|
|
}
|
|
}
|
|
.rotateInDownLeft {
|
|
-webkit-animation-name: rotateInDownLeft;
|
|
animation-name: rotateInDownLeft;
|
|
}
|
|
/* rotateInDownRight */
|
|
|
|
@-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;
|
|
}
|
|
}
|
|
.rotateInDownRight {
|
|
-webkit-animation-name: rotateInDownRight;
|
|
animation-name: rotateInDownRight;
|
|
}
|
|
/* rotateInUpLeft */
|
|
|
|
@-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;
|
|
}
|
|
}
|
|
.rotateInUpLeft {
|
|
-webkit-animation-name: rotateInUpLeft;
|
|
animation-name: rotateInUpLeft;
|
|
}
|
|
/* rotateInUpRight */
|
|
|
|
@-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;
|
|
}
|
|
}
|
|
.rotateInUpRight {
|
|
-webkit-animation-name: rotateInUpRight;
|
|
animation-name: rotateInUpRight;
|
|
}
|
|
} // End rotates entrance pack
|
|
& when (@animate-slides) {
|
|
/*===============================================
|
|
Animate.css "Slides" Pack
|
|
================================================*/
|
|
/* SLIDES ENTRANCES
|
|
* slideInDown
|
|
*/
|
|
|
|
@-webkit-keyframes slideInDown {
|
|
0% {
|
|
-webkit-transform: translateY(-100%);
|
|
transform: translateY(-100%);
|
|
visibility: visible;
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes slideInDown {
|
|
0% {
|
|
-webkit-transform: translateY(-100%);
|
|
transform: translateY(-100%);
|
|
visibility: visible;
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.slideInDown {
|
|
-webkit-animation-name: slideInDown;
|
|
animation-name: slideInDown;
|
|
}
|
|
/* slideInLeft */
|
|
|
|
@-webkit-keyframes slideInLeft {
|
|
0% {
|
|
-webkit-transform: translateX(-100%);
|
|
transform: translateX(-100%);
|
|
visibility: visible;
|
|
}
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes slideInLeft {
|
|
0% {
|
|
-webkit-transform: translateX(-100%);
|
|
transform: translateX(-100%);
|
|
visibility: visible;
|
|
}
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
.slideInLeft {
|
|
-webkit-animation-name: slideInLeft;
|
|
animation-name: slideInLeft;
|
|
}
|
|
/* slideInRight */
|
|
|
|
@-webkit-keyframes slideInRight {
|
|
0% {
|
|
-webkit-transform: translateX(100%);
|
|
transform: translateX(100%);
|
|
visibility: visible;
|
|
}
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes slideInRight {
|
|
0% {
|
|
-webkit-transform: translateX(100%);
|
|
transform: translateX(100%);
|
|
visibility: visible;
|
|
}
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
.slideInRight {
|
|
-webkit-animation-name: slideInRight;
|
|
animation-name: slideInRight;
|
|
}
|
|
|
|
/* slideInUp */
|
|
@-webkit-keyframes slideInUp {
|
|
0% {
|
|
-webkit-transform: translateY(100%);
|
|
transform: translateY(100%);
|
|
visibility: visible;
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes slideInUp {
|
|
0% {
|
|
-webkit-transform: translateY(100%);
|
|
transform: translateY(100%);
|
|
visibility: visible;
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.slideInUp {
|
|
-webkit-animation-name: slideInUp;
|
|
animation-name: slideInUp;
|
|
}
|
|
} // End slides entrance pack
|
|
& when (@animate-zooms) {
|
|
/*===============================================
|
|
Animate.css "Zooms" Pack
|
|
================================================*/
|
|
/* ZOOMS ENTRANCES
|
|
* zoomIn
|
|
*/
|
|
|
|
@-webkit-keyframes zoomIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
|
transform: scale3d(.3, .3, .3);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes zoomIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
|
transform: scale3d(.3, .3, .3);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.zoomIn {
|
|
-webkit-animation-name: zoomIn;
|
|
animation-name: zoomIn;
|
|
}
|
|
/* zoomInDown */
|
|
|
|
@-webkit-keyframes zoomInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
|
|
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
|
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
|
|
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
|
}
|
|
}
|
|
@keyframes zoomInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
|
|
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
|
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
|
|
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
|
}
|
|
}
|
|
.zoomInDown {
|
|
-webkit-animation-name: zoomInDown;
|
|
animation-name: zoomInDown;
|
|
}
|
|
/* zoomInLeft */
|
|
|
|
@-webkit-keyframes zoomInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
|
|
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
|
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
|
|
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
|
}
|
|
}
|
|
@keyframes zoomInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
|
|
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
|
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
|
|
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
|
}
|
|
}
|
|
.zoomInLeft {
|
|
-webkit-animation-name: zoomInLeft;
|
|
animation-name: zoomInLeft;
|
|
}
|
|
/* zoomInRight */
|
|
|
|
@-webkit-keyframes zoomInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
|
|
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
|
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
|
|
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
|
}
|
|
}
|
|
@keyframes zoomInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
|
|
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
|
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
|
|
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
|
}
|
|
}
|
|
.zoomInRight {
|
|
-webkit-animation-name: zoomInRight;
|
|
animation-name: zoomInRight;
|
|
}
|
|
/* zoomInUp */
|
|
|
|
@-webkit-keyframes zoomInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
|
|
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
|
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
|
|
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
|
}
|
|
}
|
|
@keyframes zoomInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
|
|
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
|
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
|
|
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
|
}
|
|
}
|
|
.zoomInUp {
|
|
-webkit-animation-name: zoomInUp;
|
|
animation-name: zoomInUp;
|
|
}
|
|
} // End zooms entrance pack
|
|
& when (@animate-specials) {
|
|
/*===============================================
|
|
Animate.css "Specials" Pack
|
|
================================================*/
|
|
/* SPECIAL EFFECTS
|
|
* zoomIn
|
|
*/
|
|
} // End specials pack
|
|
& when (@animate-lightspeed) {
|
|
/*===============================================
|
|
Animate.css "Lightspeed" Pack
|
|
================================================*/
|
|
/* LIGHTSPEED EFFECTS
|
|
* zoomIn
|
|
*/
|
|
} // End lightspeed pack
|
|
& when (@animate-attention) {
|
|
/*===============================================
|
|
Animate.css "Attention" Pack
|
|
================================================*/
|
|
/* ATTENTION EFFECTS
|
|
* zoomIn
|
|
*/
|
|
} // End attention pack
|