mirror of
https://github.com/dawidolko/Website-Templates.git
synced 2025-10-27 16:03:10 +01:00
1622 lines
38 KiB
CSS
1622 lines
38 KiB
CSS
|
|
|
|
|
|
.animated {
|
|
opacity: 0;
|
|
|
|
-webkit-animation-duration: 1s;
|
|
-moz-animation-duration: 1s;
|
|
-o-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
|
|
-webkit-animation-fill-mode: both;
|
|
-moz-animation-fill-mode: both;
|
|
-o-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
|
|
}
|
|
|
|
.animated.hinge {
|
|
-webkit-animation-duration: 5s;
|
|
-moz-animation-duration: 5s;
|
|
-o-animation-duration: 5s;
|
|
animation-duration: 5s;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* pulse */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes pulse {
|
|
0% {-webkit-transform: scale(1);}
|
|
50% {-webkit-transform: scale(1.1);}
|
|
100% {-webkit-transform: scale(1);}
|
|
}
|
|
@-moz-keyframes pulse {
|
|
0% {-moz-transform: scale(1);}
|
|
50% {-moz-transform: scale(1.1);}
|
|
100% {-moz-transform: scale(1);}
|
|
}
|
|
@-o-keyframes pulse {
|
|
0% {-o-transform: scale(1);}
|
|
50% {-o-transform: scale(1.1);}
|
|
100% {-o-transform: scale(1);}
|
|
}
|
|
@keyframes pulse {
|
|
0% { transform: scale(1);}
|
|
50% { transform: scale(1.1);}
|
|
100% { transform: scale(1);}
|
|
}
|
|
|
|
.animated.pulse {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: pulse;
|
|
-moz-animation-name: pulse;
|
|
-o-animation-name: pulse;
|
|
animation-name: pulse;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* flipInX */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes flipInX {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotateX(-10deg);
|
|
}
|
|
|
|
70% {
|
|
-webkit-transform: perspective(400px) rotateX(10deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-moz-keyframes flipInX {
|
|
0% {
|
|
-moz-transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
-moz-transform: perspective(400px) rotateX(-10deg);
|
|
}
|
|
|
|
70% {
|
|
-moz-transform: perspective(400px) rotateX(10deg);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-o-keyframes flipInX {
|
|
0% {
|
|
-o-transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
-o-transform: perspective(400px) rotateX(-10deg);
|
|
}
|
|
|
|
70% {
|
|
-o-transform: perspective(400px) rotateX(10deg);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes flipInX {
|
|
0% {
|
|
transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
transform: perspective(400px) rotateX(-10deg);
|
|
}
|
|
|
|
70% {
|
|
transform: perspective(400px) rotateX(10deg);
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animated.flipInX {
|
|
opacity: 1;
|
|
|
|
-webkit-backface-visibility: visible !important;
|
|
-moz-backface-visibility: visible !important;
|
|
-o-backface-visibility: visible !important;
|
|
backface-visibility: visible !important;
|
|
|
|
-webkit-animation-name: flipInX;
|
|
-moz-animation-name: flipInX;
|
|
-o-animation-name: flipInX;
|
|
animation-name: flipInX;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* fadeIn */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes fadeIn {
|
|
0% {opacity: 0;}
|
|
100% {opacity: 1;}
|
|
}
|
|
|
|
@-moz-keyframes fadeIn {
|
|
0% {opacity: 0;}
|
|
100% {opacity: 1;}
|
|
}
|
|
|
|
@-o-keyframes fadeIn {
|
|
0% {opacity: 0;}
|
|
100% {opacity: 1;}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {opacity: 0;}
|
|
100% {opacity: 1;}
|
|
}
|
|
|
|
.animated.fadeIn {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: fadeIn;
|
|
-moz-animation-name: fadeIn;
|
|
-o-animation-name: fadeIn;
|
|
animation-name: fadeIn;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* fadeInUp */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-o-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animated.fadeInUp {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: fadeInUp;
|
|
-moz-animation-name: fadeInUp;
|
|
-o-animation-name: fadeInUp;
|
|
animation-name: fadeInUp;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* fadeInDown */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes fadeInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-o-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInDown {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animated.fadeInDown {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: fadeInDown;
|
|
-moz-animation-name: fadeInDown;
|
|
-o-animation-name: fadeInDown;
|
|
animation-name: fadeInDown;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* fadeInLeft */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes fadeInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-100px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(-100px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateX(-100px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-o-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-100px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.animated.fadeInLeft {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: fadeInLeft;
|
|
-moz-animation-name: fadeInLeft;
|
|
-o-animation-name: fadeInLeft;
|
|
animation-name: fadeInLeft;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* fadeInRight */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes fadeInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(100px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(100px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateX(100px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-o-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(100px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.animated.fadeInRight {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: fadeInRight;
|
|
-moz-animation-name: fadeInRight;
|
|
-o-animation-name: fadeInRight;
|
|
animation-name: fadeInRight;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* fadeInUpBig */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes fadeInUpBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInUpBig {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInUpBig {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateY(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-o-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUpBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animated.fadeInUpBig {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: fadeInUpBig;
|
|
-moz-animation-name: fadeInUpBig;
|
|
-o-animation-name: fadeInUpBig;
|
|
animation-name: fadeInUpBig;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* fadeInDownBig */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes fadeInDownBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInDownBig {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInDownBig {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-o-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInDownBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animated.fadeInDownBig {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: fadeInDownBig;
|
|
-moz-animation-name: fadeInDownBig;
|
|
-o-animation-name: fadeInDownBig;
|
|
animation-name: fadeInDownBig;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* fadeInLeftBig */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes fadeInLeftBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
}
|
|
@-moz-keyframes fadeInLeftBig {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(0);
|
|
}
|
|
}
|
|
@-o-keyframes fadeInLeftBig {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-o-transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes fadeInLeftBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.animated.fadeInLeftBig {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: fadeInLeftBig;
|
|
-moz-animation-name: fadeInLeftBig;
|
|
-o-animation-name: fadeInLeftBig;
|
|
animation-name: fadeInLeftBig;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* fadeInRightBig */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes fadeInRightBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInRightBig {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInRightBig {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-o-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInRightBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.animated.fadeInRightBig {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: fadeInRightBig;
|
|
-moz-animation-name: fadeInRightBig;
|
|
-o-animation-name: fadeInRightBig;
|
|
animation-name: fadeInRightBig;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* bounceIn */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1.05);
|
|
}
|
|
|
|
70% {
|
|
-webkit-transform: scale(.9);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: scale(.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
-moz-transform: scale(1.05);
|
|
}
|
|
|
|
70% {
|
|
-moz-transform: scale(.9);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: scale(.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
-o-transform: scale(1.05);
|
|
}
|
|
|
|
70% {
|
|
-o-transform: scale(.9);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
70% {
|
|
transform: scale(.9);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.animated.bounceIn {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: bounceIn;
|
|
-moz-animation-name: bounceIn;
|
|
-o-animation-name: bounceIn;
|
|
animation-name: bounceIn;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* bounceInUp */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes bounceInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(-30px);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateY(10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
}
|
|
@-moz-keyframes bounceInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(-30px);
|
|
}
|
|
|
|
80% {
|
|
-moz-transform: translateY(10px);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateY(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-o-transform: translateY(-30px);
|
|
}
|
|
|
|
80% {
|
|
-o-transform: translateY(10px);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes bounceInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-ms-transform: translateY(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-ms-transform: translateY(-30px);
|
|
}
|
|
|
|
80% {
|
|
-ms-transform: translateY(10px);
|
|
}
|
|
|
|
100% {
|
|
-ms-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceInUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateY(-30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animated.bounceInUp {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: bounceInUp;
|
|
-moz-animation-name: bounceInUp;
|
|
-o-animation-name: bounceInUp;
|
|
animation-name: bounceInUp;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* bounceInDown */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes bounceInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(30px);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(30px);
|
|
}
|
|
|
|
80% {
|
|
-moz-transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateY(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-o-transform: translateY(30px);
|
|
}
|
|
|
|
80% {
|
|
-o-transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceInDown {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateY(30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animated.bounceInDown {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: bounceInDown;
|
|
-moz-animation-name: bounceInDown;
|
|
-o-animation-name: bounceInDown;
|
|
animation-name: bounceInDown;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* bounceInLeft */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes bounceInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(30px);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateX(-10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(30px);
|
|
}
|
|
|
|
80% {
|
|
-moz-transform: translateX(-10px);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateX(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-o-transform: translateX(30px);
|
|
}
|
|
|
|
80% {
|
|
-o-transform: translateX(-10px);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateX(30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateX(-10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.animated.bounceInLeft {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: bounceInLeft;
|
|
-moz-animation-name: bounceInLeft;
|
|
-o-animation-name: bounceInLeft;
|
|
animation-name: bounceInLeft;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* bounceInRight */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes bounceInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(-30px);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateX(10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(-30px);
|
|
}
|
|
|
|
80% {
|
|
-moz-transform: translateX(10px);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateX(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-o-transform: translateX(-30px);
|
|
}
|
|
|
|
80% {
|
|
-o-transform: translateX(10px);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceInRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateX(-30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateX(10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.animated.bounceInRight {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: bounceInRight;
|
|
-moz-animation-name: bounceInRight;
|
|
-o-animation-name: bounceInRight;
|
|
animation-name: bounceInRight;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* rotateInUpLeft */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes rotateInUpLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
-webkit-transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
-webkit-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateInUpLeft {
|
|
0% {
|
|
-moz-transform-origin: left bottom;
|
|
-moz-transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform-origin: left bottom;
|
|
-moz-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateInUpLeft {
|
|
0% {
|
|
-o-transform-origin: left bottom;
|
|
-o-transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-o-transform-origin: left bottom;
|
|
-o-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateInUpLeft {
|
|
0% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animated.rotateInUpLeft {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: rotateInUpLeft;
|
|
-moz-animation-name: rotateInUpLeft;
|
|
-o-animation-name: rotateInUpLeft;
|
|
animation-name: rotateInUpLeft;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* otateInDownLeft */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes rotateInDownLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
-webkit-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
-webkit-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateInDownLeft {
|
|
0% {
|
|
-moz-transform-origin: left bottom;
|
|
-moz-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform-origin: left bottom;
|
|
-moz-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateInDownLeft {
|
|
0% {
|
|
-o-transform-origin: left bottom;
|
|
-o-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-o-transform-origin: left bottom;
|
|
-o-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateInDownLeft {
|
|
0% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animated.rotateInDownLeft {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: rotateInDownLeft;
|
|
-moz-animation-name: rotateInDownLeft;
|
|
-o-animation-name: rotateInDownLeft;
|
|
animation-name: rotateInDownLeft;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* rotateInUpRight */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes rotateInUpRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
-webkit-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
-webkit-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateInUpRight {
|
|
0% {
|
|
-moz-transform-origin: right bottom;
|
|
-moz-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform-origin: right bottom;
|
|
-moz-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateInUpRight {
|
|
0% {
|
|
-o-transform-origin: right bottom;
|
|
-o-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-o-transform-origin: right bottom;
|
|
-o-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateInUpRight {
|
|
0% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animated.rotateInUpRight {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: rotateInUpRight;
|
|
-moz-animation-name: rotateInUpRight;
|
|
-o-animation-name: rotateInUpRight;
|
|
animation-name: rotateInUpRight;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* rotateInDownRight */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes rotateInDownRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
-webkit-transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
-webkit-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateInDownRight {
|
|
0% {
|
|
-moz-transform-origin: right bottom;
|
|
-moz-transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform-origin: right bottom;
|
|
-moz-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateInDownRight {
|
|
0% {
|
|
-o-transform-origin: right bottom;
|
|
-o-transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-o-transform-origin: right bottom;
|
|
-o-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateInDownRight {
|
|
0% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animated.rotateInDownRight {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: rotateInDownRight;
|
|
-moz-animation-name: rotateInDownRight;
|
|
-o-animation-name: rotateInDownRight;
|
|
animation-name: rotateInDownRight;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* lightSpeedRight */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes lightSpeedRight {
|
|
0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
|
60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
|
80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
|
100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
|
}
|
|
|
|
@-moz-keyframes lightSpeedRight {
|
|
0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
|
60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
|
80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
|
100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
|
}
|
|
|
|
@-o-keyframes lightSpeedRight {
|
|
0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
|
60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
|
80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
|
100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
|
}
|
|
|
|
@keyframes lightSpeedRight {
|
|
0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
|
60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
|
80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
|
100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
|
|
}
|
|
|
|
.animated.lightSpeedRight {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: lightSpeedRight;
|
|
-moz-animation-name: lightSpeedRight;
|
|
-o-animation-name: lightSpeedRight;
|
|
animation-name: lightSpeedRight;
|
|
|
|
-webkit-animation-timing-function: ease-out;
|
|
-moz-animation-timing-function: ease-out;
|
|
-o-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
.animated.lightSpeedRight {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-duration: 0.5s;
|
|
-moz-animation-duration: 0.5s;
|
|
-o-animation-duration: 0.5s;
|
|
animation-duration: 0.5s;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* lightSpeedLeft */
|
|
/*===================================================================================*/
|
|
|
|
@-webkit-keyframes lightSpeedLeft {
|
|
0% { -webkit-transform: translateX(-100%) skewX(-30deg); opacity: 0; }
|
|
60% { -webkit-transform: translateX(20%) skewX(30deg); opacity: 1; }
|
|
80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
|
100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
|
}
|
|
|
|
@-moz-keyframes lightSpeedLeft {
|
|
0% { -moz-transform: translateX(-100%) skewX(-30deg); opacity: 0; }
|
|
60% { -moz-transform: translateX(20%) skewX(30deg); opacity: 1; }
|
|
80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
|
100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
|
}
|
|
|
|
@-o-keyframes lightSpeedLeft {
|
|
0% { -o-transform: translateX(-100%) skewX(-30deg); opacity: 0; }
|
|
60% { -o-transform: translateX(20%) skewX(30deg); opacity: 1; }
|
|
80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
|
100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
|
}
|
|
|
|
@keyframes lightSpeedLeft {
|
|
0% { transform: translateX(-100%) skewX(-30deg); opacity: 0; }
|
|
60% { transform: translateX(20%) skewX(30deg); opacity: 1; }
|
|
80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
|
100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
|
|
}
|
|
|
|
.animated.lightSpeedLeft {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: lightSpeedLeft;
|
|
-moz-animation-name: lightSpeedLeft;
|
|
-o-animation-name: lightSpeedLeft;
|
|
animation-name: lightSpeedLeft;
|
|
|
|
-webkit-animation-timing-function: ease-out;
|
|
-moz-animation-timing-function: ease-out;
|
|
-o-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
.animated.lightSpeedLeft {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-duration: 0.5s;
|
|
-moz-animation-duration: 0.5s;
|
|
-o-animation-duration: 0.5s;
|
|
animation-duration: 0.5s;
|
|
}
|
|
|
|
|
|
|
|
/*===================================================================================*/
|
|
/* rollin */
|
|
/*===================================================================================*/
|
|
|
|
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
|
|
|
@-webkit-keyframes rollIn {
|
|
0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
|
|
100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
|
|
}
|
|
|
|
@-moz-keyframes rollIn {
|
|
0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
|
|
100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
|
|
}
|
|
|
|
@-o-keyframes rollIn {
|
|
0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }
|
|
100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
|
|
}
|
|
|
|
@keyframes rollIn {
|
|
0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
|
|
100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
|
|
}
|
|
|
|
.animated.rollIn {
|
|
opacity: 1;
|
|
|
|
-webkit-animation-name: rollIn;
|
|
-moz-animation-name: rollIn;
|
|
-o-animation-name: rollIn;
|
|
animation-name: rollIn;
|
|
} |