@import './animate_base.less';
|
|
@keyframes backInUp {
|
0% {
|
transform: translateY(1500px) scale(0.7);
|
opacity: 0.7;
|
}
|
|
80% {
|
transform: translateY(0px) scale(0.7);
|
opacity: 0.7;
|
}
|
|
100% {
|
transform: scale(1);
|
opacity: 1;
|
}
|
}
|
|
.backInUp {
|
animation-name: backInUp;
|
}
|
|
@keyframes backOutDown {
|
0% {
|
transform: scale(1);
|
opacity: 1;
|
}
|
|
20% {
|
transform: translateY(0px) scale(0.7);
|
opacity: 0.7;
|
}
|
|
100% {
|
transform: translateY(1500px) scale(0.7);
|
opacity: 0.7;
|
}
|
}
|
|
.backOutDown {
|
animation-name: backOutDown;
|
}
|
|
@keyframes fadeInUp {
|
from {
|
opacity: 0;
|
transform: translate3d(0, 100%, 0);
|
}
|
|
to {
|
opacity: 1;
|
transform: translate3d(0, 0, 0);
|
}
|
}
|
|
.fadeInUp {
|
animation-name: fadeInUp;
|
}
|
|
@keyframes fadeInLeft {
|
from {
|
opacity: 0;
|
transform: translate3d(-100%, 0, 0);
|
}
|
|
to {
|
opacity: 1;
|
transform: translate3d(0, 0, 0);
|
}
|
}
|
|
.fadeInLeft {
|
animation-name: fadeInLeft;
|
}
|
|
@keyframes fadeInRight {
|
from {
|
opacity: 0;
|
transform: translate3d(100%, 0, 0);
|
}
|
|
to {
|
opacity: 1;
|
transform: translate3d(0, 0, 0);
|
}
|
}
|
|
.fadeInRight {
|
animation-name: fadeInRight;
|
}
|
|
@keyframes slideInLeft {
|
from {
|
transform: translate3d(-100%, 0, 0);
|
visibility: visible;
|
}
|
|
to {
|
transform: translate3d(0, 0, 0);
|
}
|
}
|
|
.slideInLeft {
|
animation-name: slideInLeft;
|
}
|
|
@keyframes slideInRight {
|
from {
|
transform: translate3d(100%, 0, 0);
|
visibility: visible;
|
}
|
|
to {
|
transform: translate3d(0, 0, 0);
|
}
|
}
|
|
.slideInRight {
|
animation-name: slideInRight;
|
}
|
|
@keyframes fadeOutUpBig {
|
from {
|
opacity: 1;
|
}
|
|
to {
|
opacity: 0;
|
transform: translate3d(0, -2000px, 0);
|
}
|
}
|
|
.fadeOutUpBig {
|
animation-name: fadeOutUpBig;
|
}
|
|
@keyframes fadeInUpBig {
|
from {
|
opacity: 0;
|
transform: translate3d(0, 2000px, 0);
|
}
|
|
to {
|
opacity: 1;
|
transform: translate3d(0, 0, 0);
|
}
|
}
|
|
.fadeInUpBig {
|
animation-name: fadeInUpBig;
|
}
|
|
@keyframes flipInY {
|
from {
|
transform: rotate3d(0, 1, 0, 180deg);
|
animation-timing-function: ease-in;
|
opacity: 0;
|
}
|
|
100% {
|
transform: rotate3d(0, 1, 0, 0deg);
|
}
|
}
|
|
@keyframes flipInX {
|
// 0% {
|
// transform: perspective(400px) rotateY(-90deg);
|
// opacity: 0;
|
// }
|
// 50% {
|
// transform: perspective(400px) rotateY(8deg);
|
// opacity: 1;
|
// }
|
// 70% {
|
// transform: perspective(400px) rotateY(-6deg);
|
// }
|
// 80% {
|
// transform: perspective(400px) rotateY(4deg);
|
// }
|
// 90% {
|
// transform: perspective(400px) rotateY(-2deg);
|
// }
|
// 100% {
|
// transform: perspective(400px);
|
// }
|
}
|
|
.flipInY {
|
backface-visibility: visible !important;
|
animation-name: flipInY;
|
}
|
|
.flipInX {
|
animation: flipInX 0.7s both ease-in;
|
}
|
