You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
2.0 KiB
119 lines
2.0 KiB
.slide-motion(@className, @keyframeName) {
|
|
.make-motion(@className, @keyframeName);
|
|
.@{className}-enter {
|
|
opacity: 0;
|
|
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
|
}
|
|
.@{className}-leave {
|
|
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
|
}
|
|
}
|
|
|
|
.slide-motion(slide-up, slideUp);
|
|
.slide-motion(slide-down, slideDown);
|
|
.slide-motion(slide-left, slideLeft);
|
|
.slide-motion(slide-right, slideRight);
|
|
|
|
@keyframes slideUpIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleY(0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
@keyframes slideUpOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleY(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideDownIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform-origin: 100% 100%;
|
|
transform: scaleY(0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform-origin: 100% 100%;
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
@keyframes slideDownOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform-origin: 100% 100%;
|
|
transform: scaleY(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform-origin: 100% 100%;
|
|
transform: scaleY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideLeftIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleX(0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
@keyframes slideLeftOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleX(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideRightIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform-origin: 100% 0%;
|
|
transform: scaleX(0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform-origin: 100% 0%;
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
@keyframes slideRightOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform-origin: 100% 0%;
|
|
transform: scaleX(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform-origin: 100% 0%;
|
|
transform: scaleX(0);
|
|
}
|
|
}
|