@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;
|
}
|
