678 lines
15 KiB
SCSS
678 lines
15 KiB
SCSS
|
|
/* keyframes 定义 */
|
|
@-webkit-keyframes uSlideUpIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 0% 0%;
|
|
transform-origin: 0% 0%;
|
|
-webkit-transform: scaleY(0.8);
|
|
transform: scaleY(0.8);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform-origin: 0% 0%;
|
|
transform-origin: 0% 0%;
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
@keyframes uSlideUpIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 0% 0%;
|
|
transform-origin: 0% 0%;
|
|
-webkit-transform: scaleY(0.8);
|
|
transform: scaleY(0.8);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform-origin: 0% 0%;
|
|
transform-origin: 0% 0%;
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
@-webkit-keyframes uSlideUpOut {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform-origin: 0% 0%;
|
|
transform-origin: 0% 0%;
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 0% 0%;
|
|
transform-origin: 0% 0%;
|
|
-webkit-transform: scaleY(0.8);
|
|
transform: scaleY(0.8);
|
|
}
|
|
}
|
|
@keyframes uSlideUpOut {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform-origin: 0% 0%;
|
|
transform-origin: 0% 0%;
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 0% 0%;
|
|
transform-origin: 0% 0%;
|
|
-webkit-transform: scaleY(0.8);
|
|
transform: scaleY(0.8);
|
|
}
|
|
}
|
|
@-webkit-keyframes uSlideDownIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 100% 100%;
|
|
transform-origin: 100% 100%;
|
|
-webkit-transform: scaleY(0.8);
|
|
transform: scaleY(0.8);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform-origin: 100% 100%;
|
|
transform-origin: 100% 100%;
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
@keyframes uSlideDownIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 100% 100%;
|
|
transform-origin: 100% 100%;
|
|
-webkit-transform: scaleY(0.8);
|
|
transform: scaleY(0.8);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform-origin: 100% 100%;
|
|
transform-origin: 100% 100%;
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
@-webkit-keyframes uSlideDownOut {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform-origin: 100% 100%;
|
|
transform-origin: 100% 100%;
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 100% 100%;
|
|
transform-origin: 100% 100%;
|
|
-webkit-transform: scaleY(0.8);
|
|
transform: scaleY(0.8);
|
|
}
|
|
}
|
|
@keyframes uSlideDownOut {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform-origin: 100% 100%;
|
|
transform-origin: 100% 100%;
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 100% 100%;
|
|
transform-origin: 100% 100%;
|
|
-webkit-transform: scaleY(0.8);
|
|
transform: scaleY(0.8);
|
|
}
|
|
}
|
|
@-webkit-keyframes uSlideLeftIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 0% 0%;
|
|
transform-origin: 0% 0%;
|
|
-webkit-transform: scaleX(0.8);
|
|
transform: scaleX(0.8);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform-origin: 0% 0%;
|
|
transform-origin: 0% 0%;
|
|
-webkit-transform: scaleX(1);
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
@keyframes uSlideLeftIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 0% 0%;
|
|
transform-origin: 0% 0%;
|
|
-webkit-transform: scaleX(0.8);
|
|
transform: scaleX(0.8);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform-origin: 0% 0%;
|
|
transform-origin: 0% 0%;
|
|
-webkit-transform: scaleX(1);
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
@-webkit-keyframes uSlideLeftOut {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform-origin: 0% 0%;
|
|
transform-origin: 0% 0%;
|
|
-webkit-transform: scaleX(1);
|
|
transform: scaleX(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 0% 0%;
|
|
transform-origin: 0% 0%;
|
|
-webkit-transform: scaleX(0.8);
|
|
transform: scaleX(0.8);
|
|
}
|
|
}
|
|
@keyframes uSlideLeftOut {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform-origin: 0% 0%;
|
|
transform-origin: 0% 0%;
|
|
-webkit-transform: scaleX(1);
|
|
transform: scaleX(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 0% 0%;
|
|
transform-origin: 0% 0%;
|
|
-webkit-transform: scaleX(0.8);
|
|
transform: scaleX(0.8);
|
|
}
|
|
}
|
|
@-webkit-keyframes uSlideRightIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 100% 0%;
|
|
transform-origin: 100% 0%;
|
|
-webkit-transform: scaleX(0.8);
|
|
transform: scaleX(0.8);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform-origin: 100% 0%;
|
|
transform-origin: 100% 0%;
|
|
-webkit-transform: scaleX(1);
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
@keyframes uSlideRightIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 100% 0%;
|
|
transform-origin: 100% 0%;
|
|
-webkit-transform: scaleX(0.8);
|
|
transform: scaleX(0.8);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform-origin: 100% 0%;
|
|
transform-origin: 100% 0%;
|
|
-webkit-transform: scaleX(1);
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
@-webkit-keyframes uSlideRightOut {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform-origin: 100% 0%;
|
|
transform-origin: 100% 0%;
|
|
-webkit-transform: scaleX(1);
|
|
transform: scaleX(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 100% 0%;
|
|
transform-origin: 100% 0%;
|
|
-webkit-transform: scaleX(0.8);
|
|
transform: scaleX(0.8);
|
|
}
|
|
}
|
|
@keyframes uSlideRightOut {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform-origin: 100% 0%;
|
|
transform-origin: 100% 0%;
|
|
-webkit-transform: scaleX(1);
|
|
transform: scaleX(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 100% 0%;
|
|
transform-origin: 100% 0%;
|
|
-webkit-transform: scaleX(0.8);
|
|
transform: scaleX(0.8);
|
|
}
|
|
}
|
|
@-webkit-keyframes uSwingIn {
|
|
0%,
|
|
100% {
|
|
-webkit-transform: translateX(0px);
|
|
transform: translateX(0px);
|
|
}
|
|
20% {
|
|
-webkit-transform: translateX(-10px);
|
|
transform: translateX(-10px);
|
|
}
|
|
40% {
|
|
-webkit-transform: translateX(10px);
|
|
transform: translateX(10px);
|
|
}
|
|
60% {
|
|
-webkit-transform: translateX(-5px);
|
|
transform: translateX(-5px);
|
|
}
|
|
80% {
|
|
-webkit-transform: translateX(5px);
|
|
transform: translateX(5px);
|
|
}
|
|
}
|
|
@keyframes uSwingIn {
|
|
0%,
|
|
100% {
|
|
-webkit-transform: translateX(0px);
|
|
transform: translateX(0px);
|
|
}
|
|
20% {
|
|
-webkit-transform: translateX(-10px);
|
|
transform: translateX(-10px);
|
|
}
|
|
40% {
|
|
-webkit-transform: translateX(10px);
|
|
transform: translateX(10px);
|
|
}
|
|
60% {
|
|
-webkit-transform: translateX(-5px);
|
|
transform: translateX(-5px);
|
|
}
|
|
80% {
|
|
-webkit-transform: translateX(5px);
|
|
transform: translateX(5px);
|
|
}
|
|
}
|
|
@-webkit-keyframes uZoomIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.2);
|
|
transform: scale(0.2);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes uZoomIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.2);
|
|
transform: scale(0.2);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@-webkit-keyframes uZoomOut {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.2);
|
|
transform: scale(0.2);
|
|
}
|
|
}
|
|
@keyframes uZoomOut {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.2);
|
|
transform: scale(0.2);
|
|
}
|
|
}
|
|
@-webkit-keyframes uZoomBigIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes uZoomBigIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@-webkit-keyframes uZoomBigOut {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
@keyframes uZoomBigOut {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
@-webkit-keyframes uZoomUpIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 50% 0%;
|
|
transform-origin: 50% 0%;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
100% {
|
|
-webkit-transform-origin: 50% 0%;
|
|
transform-origin: 50% 0%;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes uZoomUpIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 50% 0%;
|
|
transform-origin: 50% 0%;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
100% {
|
|
-webkit-transform-origin: 50% 0%;
|
|
transform-origin: 50% 0%;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@-webkit-keyframes uZoomUpOut {
|
|
0% {
|
|
-webkit-transform-origin: 50% 0%;
|
|
transform-origin: 50% 0%;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 50% 0%;
|
|
transform-origin: 50% 0%;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
@keyframes uZoomUpOut {
|
|
0% {
|
|
-webkit-transform-origin: 50% 0%;
|
|
transform-origin: 50% 0%;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 50% 0%;
|
|
transform-origin: 50% 0%;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
@-webkit-keyframes uZoomLeftIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 0% 50%;
|
|
transform-origin: 0% 50%;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
100% {
|
|
-webkit-transform-origin: 0% 50%;
|
|
transform-origin: 0% 50%;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes uZoomLeftIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 0% 50%;
|
|
transform-origin: 0% 50%;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
100% {
|
|
-webkit-transform-origin: 0% 50%;
|
|
transform-origin: 0% 50%;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@-webkit-keyframes uZoomLeftOut {
|
|
0% {
|
|
-webkit-transform-origin: 0% 50%;
|
|
transform-origin: 0% 50%;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 0% 50%;
|
|
transform-origin: 0% 50%;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
@keyframes uZoomLeftOut {
|
|
0% {
|
|
-webkit-transform-origin: 0% 50%;
|
|
transform-origin: 0% 50%;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 0% 50%;
|
|
transform-origin: 0% 50%;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
@-webkit-keyframes uZoomRightIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 100% 50%;
|
|
transform-origin: 100% 50%;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
100% {
|
|
-webkit-transform-origin: 100% 50%;
|
|
transform-origin: 100% 50%;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes uZoomRightIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 100% 50%;
|
|
transform-origin: 100% 50%;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
100% {
|
|
-webkit-transform-origin: 100% 50%;
|
|
transform-origin: 100% 50%;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@-webkit-keyframes uZoomRightOut {
|
|
0% {
|
|
-webkit-transform-origin: 100% 50%;
|
|
transform-origin: 100% 50%;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 100% 50%;
|
|
transform-origin: 100% 50%;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
@keyframes uZoomRightOut {
|
|
0% {
|
|
-webkit-transform-origin: 100% 50%;
|
|
transform-origin: 100% 50%;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 100% 50%;
|
|
transform-origin: 100% 50%;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
@-webkit-keyframes uZoomDownIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 50% 100%;
|
|
transform-origin: 50% 100%;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
100% {
|
|
-webkit-transform-origin: 50% 100%;
|
|
transform-origin: 50% 100%;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes uZoomDownIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 50% 100%;
|
|
transform-origin: 50% 100%;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
100% {
|
|
-webkit-transform-origin: 50% 100%;
|
|
transform-origin: 50% 100%;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@-webkit-keyframes uZoomDownOut {
|
|
0% {
|
|
-webkit-transform-origin: 50% 100%;
|
|
transform-origin: 50% 100%;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 50% 100%;
|
|
transform-origin: 50% 100%;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
@keyframes uZoomDownOut {
|
|
0% {
|
|
-webkit-transform-origin: 50% 100%;
|
|
transform-origin: 50% 100%;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform-origin: 50% 100%;
|
|
transform-origin: 50% 100%;
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
@keyframes rcMenuOpenZoomIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1, 1);
|
|
}
|
|
}
|
|
@keyframes rcMenuOpenZoomOut {
|
|
0% {
|
|
|
|
transform: scale(1, 1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0, 0);
|
|
}
|
|
}
|
|
@keyframes rcMenuOpenSlideUpIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleY(0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
@keyframes rcMenuOpenSlideUpOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleY(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleY(0);
|
|
}
|
|
} |