mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-29 21:59:41 +08:00
1872 lines
39 KiB
Plaintext
1872 lines
39 KiB
Plaintext
// 动画效果
|
||
// 组成： 1. 单个动画效果
|
||
// 2. 动画串联
|
||
// 3. 自定义动画
|
||
|
||
// Fade - 透明度从 0 到 1，从 1 到 0
|
||
.fade {
|
||
-webkit-animation-timing-function: @fc-ease-in;
|
||
-webkit-animation-duration: @fc-duration-600;
|
||
animation-timing-function: @fc-ease-in;
|
||
animation-duration: @fc-duration-600;
|
||
|
||
&.ng-enter,
|
||
&.fade-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: fadeIn;
|
||
animation-name: fadeIn;
|
||
|
||
}
|
||
|
||
&.ng-leave,
|
||
&.fade-remove,
|
||
&.ng-hide {
|
||
-webkit-animation-name: fadeOut;
|
||
animation-name: fadeOut;
|
||
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: fadeIn;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: fadeIn;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
&.ng-leave {
|
||
-webkit-animation-name: fadeOut;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: fadeOut;
|
||
animation-play-state: paused;
|
||
&.ng-leave-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
@-webkit-keyframes fadeIn {
|
||
0% {
|
||
opacity: 0;
|
||
}
|
||
50% {
|
||
opacity:1;
|
||
}
|
||
}
|
||
@keyframes fadeIn {
|
||
0% {
|
||
opacity: 0;
|
||
}
|
||
50% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fadeOut {
|
||
0% {
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
@keyframes fadeOut {
|
||
0% {
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
|
||
// zoom - 从中心点放大、缩小
|
||
.zoom {
|
||
-webkit-animation-timing-function: @fc-ease-in;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-600;
|
||
animation-timing-function: @fc-ease-in;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-600;
|
||
|
||
&.ng-enter,
|
||
&.zoom-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: zoomIn;
|
||
animation-name: zoomIn;
|
||
}
|
||
|
||
&.ng-leave,
|
||
&.zoom-remove,
|
||
&.ng-hide {
|
||
-webkit-animation-name: zoomOut;
|
||
animation-name: zoomOut;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: zoomIn;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: zoomIn;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
&.ng-leave {
|
||
-webkit-animation-name: zoomOut;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: zoomOut;
|
||
animation-play-state: paused;
|
||
&.ng-leave-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
}
|
||
|
||
.zoom-left {
|
||
-webkit-animation-timing-function: @fc-ease-in-out;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-500;
|
||
animation-timing-function: @fc-ease-in-out;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-500;
|
||
|
||
&.ng-enter,
|
||
&.zoom-left-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: zoomLeft;
|
||
animation-name: zoomLeft;
|
||
}
|
||
|
||
&.ng-leave,
|
||
&.zoom-left-remove,
|
||
&.ng-hide {
|
||
-webkit-animation-name: zoomLeftOut;
|
||
animation-name: zoomLeftOut;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: zoomLeft;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: zoomLeft;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
&.ng-leave {
|
||
-webkit-animation-name: zoomLeftOut;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: zoomLeftOut;
|
||
animation-play-state: paused;
|
||
&.ng-leave-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
}
|
||
.zoom-right {
|
||
-webkit-animation-timing-function: @fc-ease-in-out;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-500;
|
||
animation-timing-function: @fc-ease-in-out;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-500;
|
||
|
||
&.ng-enter,
|
||
&.zoom-right-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: zoomRight;
|
||
animation-name: zoomRight;
|
||
}
|
||
|
||
&.ng-leave,
|
||
&.zoom-right-remove,
|
||
&.ng-hide {
|
||
-webkit-animation-name: zoomRightOut;
|
||
animation-name: zoomRightOut;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: zoomRight;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: zoomRight;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
&.ng-leave {
|
||
-webkit-animation-name: zoomRightOut;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: zoomRightOut;
|
||
animation-play-state: paused;
|
||
&.ng-leave-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
}
|
||
|
||
.zoom-up {
|
||
-webkit-animation-timing-function: @fc-ease-in-out;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-500;
|
||
animation-timing-function: @fc-ease-in-out;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-500;
|
||
|
||
&.ng-enter,
|
||
&.zoom-up-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: zoomUp;
|
||
animation-name: zoomUp;
|
||
}
|
||
|
||
&.ng-leave,
|
||
&.zoom-up-remove,
|
||
&.ng-hide {
|
||
-webkit-animation-name: zoomUpOut;
|
||
animation-name: zoomUpOut;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: zoomUp;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: zoomUp;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
&.ng-leave {
|
||
-webkit-animation-name: zoomUpOut;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: zoomUpOut;
|
||
animation-play-state: paused;
|
||
&.ng-leave-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
}
|
||
|
||
.zoom-down {
|
||
-webkit-animation-timing-function: @fc-ease-in-out;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-500;
|
||
animation-timing-function: @fc-ease-in-out;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-500;
|
||
|
||
&.ng-enter,
|
||
&.zoom-down-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: zoomDown;
|
||
animation-name: zoomDown;
|
||
}
|
||
|
||
&.ng-leave,
|
||
&.zoom-down-remove,
|
||
&.ng-hide {
|
||
-webkit-animation-name: zoomDownOut;
|
||
animation-name: zoomDownOut;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: zoomDown;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: zoomDown;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
&.ng-leave {
|
||
-webkit-animation-name: zoomDownOut;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: zoomDownOut;
|
||
animation-play-state: paused;
|
||
&.ng-leave-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
}
|
||
|
||
.zoom-arr12 {
|
||
-webkit-animation-timing-function: @fc-ease-in;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-500;
|
||
animation-timing-function: @fc-ease-in;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-500;
|
||
|
||
&.ng-enter,
|
||
&.zoom-arr12-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: zoomArr12;
|
||
animation-name: zoomArr12;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: zoomArr12;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: zoomArr12;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
}
|
||
.zoom-arr1 {
|
||
-webkit-animation-timing-function: @fc-ease-in;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-500;
|
||
animation-timing-function: @fc-ease-in;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-500;
|
||
|
||
&.ng-enter,
|
||
&.zoom-arr1-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: zoomArr1;
|
||
animation-name: zoomArr1;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: zoomArr1;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: zoomArr1;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
}
|
||
.zoom-arr3 {
|
||
-webkit-animation-timing-function: @fc-ease-in;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-500;
|
||
animation-timing-function: @fc-ease-in;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-500;
|
||
|
||
&.ng-enter,
|
||
&.zoom-arr3-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: zoomArr3;
|
||
animation-name: zoomArr3;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: zoomArr3;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: zoomArr3;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
}
|
||
.zoom-arr5 {
|
||
-webkit-animation-timing-function: @fc-ease-in;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-500;
|
||
animation-timing-function: @fc-ease-in;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-500;
|
||
|
||
&.ng-enter,
|
||
&.zoom-arr5-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: zoomArr5;
|
||
animation-name: zoomArr5;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: zoomArr5;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: zoomArr5;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
}
|
||
.zoom-arr6 {
|
||
-webkit-animation-timing-function: @fc-ease-in;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-500;
|
||
animation-timing-function: @fc-ease-in;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-500;
|
||
|
||
&.ng-enter,
|
||
&.zoom-arr6-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: zoomArr6;
|
||
animation-name: zoomArr6;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: zoomArr6;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: zoomArr6;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
}
|
||
.zoom-arr7 {
|
||
-webkit-animation-timing-function: @fc-ease-in;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-500;
|
||
animation-timing-function: @fc-ease-in;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-500;
|
||
|
||
&.ng-enter,
|
||
&.zoom-arr7-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: zoomArr7;
|
||
animation-name: zoomArr7;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: zoomArr7;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: zoomArr7;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
.zoom-arr9 {
|
||
-webkit-animation-timing-function: @fc-ease-in;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-500;
|
||
animation-timing-function: @fc-ease-in;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-500;
|
||
|
||
&.ng-enter,
|
||
&.zoom-arr9-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: zoomArr9;
|
||
animation-name: zoomArr9;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: zoomArr9;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: zoomArr9;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
}
|
||
.zoom-arr11 {
|
||
-webkit-animation-timing-function: @fc-ease-in;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-500;
|
||
animation-timing-function: @fc-ease-in;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-500;
|
||
|
||
&.ng-enter,
|
||
&.zoom-arr11-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: zoomArr11;
|
||
animation-name: zoomArr11;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: zoomArr11;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: zoomArr11;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
@-webkit-keyframes zoomIn {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 50% 50%;
|
||
-webkit-transform: scale(0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 50% 50%;
|
||
-webkit-transform: scale(1, 1);
|
||
}
|
||
}
|
||
@keyframes zoomIn {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 50% 50%;
|
||
transform: scale(0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 50% 50%;
|
||
transform: scale(1, 1);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes zoomOut {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 50% 50%;
|
||
-webkit-transform: scale(1, 1);
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 50% 50%;
|
||
-webkit-transform: scale(0, 0);
|
||
}
|
||
}
|
||
|
||
@keyframes zoomOut {
|
||
0% {
|
||
opacity: 1;
|
||
transform-origin: 50% 50%;
|
||
transform: scale(1, 1);
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
transform-origin: 50% 50%;
|
||
transform: scale(0, 0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes zoomLeft {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 0% 0%;
|
||
-webkit-transform: scaleX(0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 0% 0%;
|
||
-webkit-transform: scaleX(1);
|
||
}
|
||
}
|
||
@keyframes zoomLeft {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 0% 0%;
|
||
transform: scaleX(0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 0% 0%;
|
||
transform: scaleX(1);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes zoomLeftOut {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 0% 0%;
|
||
-webkit-transform: scaleX(1);
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 0% 0%;
|
||
-webkit-transform: scaleX(0);
|
||
}
|
||
}
|
||
@keyframes zoomLeftOut {
|
||
0% {
|
||
opacity: 1;
|
||
transform-origin: 0% 0%;
|
||
transform: scaleX(1);
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
transform-origin: 0% 0%;
|
||
transform: scaleX(0);
|
||
}
|
||
}
|
||
@-webkit-keyframes zoomRight {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 100% 0%;
|
||
-webkit-transform: scaleX(0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 100% 0%;
|
||
-webkit-transform: scaleX(1);
|
||
}
|
||
}
|
||
@keyframes zoomRight {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 100% 0%;
|
||
transform: scaleX(0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 100% 0%;
|
||
transform: scaleX(1);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes zoomRightOut {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 100% 0%;
|
||
-webkit-transform: scaleX(1);
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 100% 0%;
|
||
-webkit-transform: scaleX(0);
|
||
}
|
||
}
|
||
@keyframes zoomRightOut {
|
||
0% {
|
||
opacity: 1;
|
||
transform-origin: 100% 0%;
|
||
transform: scaleX(1);
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
transform-origin: 100% 0%;
|
||
transform: scaleX(0);
|
||
}
|
||
}
|
||
@-webkit-keyframes zoomUp {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 0% 0%;
|
||
-webkit-transform: scaleY(0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 0% 0%;
|
||
-webkit-transform: scaleY(1);
|
||
}
|
||
}
|
||
@keyframes zoomUp {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 0% 0%;
|
||
transform: scaleY(0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 0% 0%;
|
||
transform: scaleY(1);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes zoomUpOut {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 0% 0%;
|
||
-webkit-transform: scaleY(1);
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 0% 0%;
|
||
-webkit-transform: scaleY(0);
|
||
}
|
||
}
|
||
@keyframes zoomUpOut {
|
||
0% {
|
||
opacity: 1;
|
||
transform-origin: 0% 0%;
|
||
transform: scaleY(1);
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
transform-origin: 0% 0%;
|
||
transform: scaleY(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes zoomDown {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 100% 100%;
|
||
-webkit-transform: scaleY(0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 100% 100%;
|
||
-webkit-transform: scaleY(1);
|
||
}
|
||
}
|
||
@keyframes zoomDown {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 100% 100%;
|
||
transform: scaleY(0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 100% 100%;
|
||
transform: scaleY(1);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes zoomDownOut {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 100% 100%;
|
||
-webkit-transform: scaleY(1);
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 100% 100%;
|
||
-webkit-transform: scaleY(0);
|
||
}
|
||
}
|
||
@keyframes zoomDownOut {
|
||
0% {
|
||
opacity: 1;
|
||
transform-origin: 100% 100%;
|
||
transform: scaleY(1);
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
transform-origin: 100% 100%;
|
||
transform: scaleY(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes zoomArr12 {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 50% 0%;
|
||
-webkit-transform: scale(0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 50% 0%;
|
||
-webkit-transform: scale(1, 1);
|
||
}
|
||
}
|
||
@keyframes zoomArr12 {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 50% 0%;
|
||
transform: scale(0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 50% 0%;
|
||
transform: scale(1, 1);
|
||
}
|
||
}
|
||
@-webkit-keyframes zoomArr1 {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 100% 0%;
|
||
-webkit-transform: scale(0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 100% 0%;
|
||
-webkit-transform: scale(1, 1);
|
||
}
|
||
}
|
||
@keyframes zoomArr1 {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 100% 0%;
|
||
transform: scale(0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 100% 0%;
|
||
transform: scale(1, 1);
|
||
}
|
||
}
|
||
@-webkit-keyframes zoomArr3 {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 100% 50%;
|
||
-webkit-transform: scale(0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 100% 50%;
|
||
-webkit-transform: scale(1, 1);
|
||
}
|
||
}
|
||
@keyframes zoomArr3 {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 100% 50%;
|
||
transform: scale(0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 100% 50%;
|
||
transform: scale(1, 1);
|
||
}
|
||
}
|
||
@-webkit-keyframes zoomArr5 {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 100% 100%;
|
||
-webkit-transform: scale(0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 100% 100%;
|
||
-webkit-transform: scale(1, 1);
|
||
}
|
||
}
|
||
@keyframes zoomArr5 {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 100% 100%;
|
||
transform: scale(0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 100% 100%;
|
||
transform: scale(1, 1);
|
||
}
|
||
}
|
||
@-webkit-keyframes zoomArr6 {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 50% 100%;
|
||
-webkit-transform: scale(0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 50% 100%;
|
||
-webkit-transform: scale(1, 1);
|
||
}
|
||
}
|
||
@keyframes zoomArr6 {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 50% 100%;
|
||
transform: scale(0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 50% 100%;
|
||
transform: scale(1, 1);
|
||
}
|
||
}
|
||
@-webkit-keyframes zoomArr7 {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 0% 100%;
|
||
-webkit-transform: scale(0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 0% 100%;
|
||
-webkit-transform: scale(1, 1);
|
||
}
|
||
}
|
||
@keyframes zoomArr7 {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 0% 100%;
|
||
transform: scale(0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 0% 100%;
|
||
transform: scale(1, 1);
|
||
}
|
||
}
|
||
@-webkit-keyframes zoomArr9 {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 0% 50%;
|
||
-webkit-transform: scale(0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 0% 50%;
|
||
-webkit-transform: scale(1, 1);
|
||
}
|
||
}
|
||
@keyframes zoomArr9 {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 0% 50%;
|
||
transform: scale(0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 0% 50%;
|
||
transform: scale(1, 1);
|
||
}
|
||
}
|
||
@-webkit-keyframes zoomArr11 {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 0% 0%;
|
||
-webkit-transform: scale(0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 0% 0%;
|
||
-webkit-transform: scale(1, 1);
|
||
}
|
||
}
|
||
@keyframes zoomArr11 {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 0% 0%;
|
||
transform: scale(0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 0% 0%;
|
||
transform: scale(1, 1);
|
||
}
|
||
}
|
||
// puff - 从本身放大、缩小
|
||
.puff {
|
||
-webkit-animation-timing-function: @fc-ease-in;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-500;
|
||
animation-timing-function: @fc-ease-in;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-500;
|
||
|
||
&.ng-enter,
|
||
&.puff-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: puffIn;
|
||
animation-name: puffIn;
|
||
}
|
||
|
||
&.ng-leave,
|
||
&.puff-remove,
|
||
&.ng-hide {
|
||
-webkit-animation-name: puffOut;
|
||
animation-name: puffOut;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: puffIn;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: puffIn;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
&.ng-leave {
|
||
-webkit-animation-name: puffOut;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: puffOut;
|
||
animation-play-state: paused;
|
||
&.ng-leave-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes puffIn {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 50% 50%;
|
||
-webkit-transform: scale(2, 2);
|
||
-webkit-filter: blur(2px);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 50% 50%;
|
||
-webkit-transform: scale(1, 1);
|
||
-webkit-filter: blur(0px);
|
||
}
|
||
}
|
||
@keyframes puffIn {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 50% 50%;
|
||
transform: scale(2, 2);
|
||
filter: blur(2px);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 50% 50%;
|
||
transform: scale(1, 1);
|
||
filter: blur(0px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes puffOut {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 50% 50%;
|
||
-webkit-transform: scale(1, 1);
|
||
-webkit-filter: blur(0px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 50% 50%;
|
||
-webkit-transform: scale(2, 2);
|
||
-webkit-filter: blur(2px);
|
||
}
|
||
}
|
||
|
||
@keyframes puffOut {
|
||
0% {
|
||
opacity: 1;
|
||
transform-origin: 50% 50%;
|
||
transform: scale(1, 1);
|
||
-webkit-filter: blur(0px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform-origin: 50% 50%;
|
||
transform: scale(2, 2);
|
||
-webkit-filter: blur(2px);
|
||
}
|
||
}
|
||
|
||
// Rotate - 旋转
|
||
.rotate-down {
|
||
-webkit-backface-visibility: visible !important;
|
||
backface-visibility: visible !important;
|
||
-webkit-animation-timing-function: @fc-ease-out;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-400;
|
||
animation-timing-function: @fc-ease-out;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-400;
|
||
|
||
&.ng-enter,
|
||
&.rotate-down-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: rotateDown;
|
||
animation-name: rotateDown;
|
||
}
|
||
|
||
&.ng-leave,
|
||
&.rotate-down-remove,
|
||
&.ng-hide {
|
||
-webkit-animation-name: rotateDownOut;
|
||
animation-name: rotateDownOut;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: rotateDown;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: rotateDown;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
&.ng-leave {
|
||
-webkit-animation-name: rotateDownOut;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: rotateDownOut;
|
||
animation-play-state: paused;
|
||
-webkit-animation-direction: reverse;
|
||
animation-direction: reverse;
|
||
&.ng-leave-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
}
|
||
.rotate-up {
|
||
-webkit-backface-visibility: visible !important;
|
||
backface-visibility: visible !important;
|
||
-webkit-animation-timing-function: @fc-ease-out;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-400;
|
||
animation-timing-function: @fc-ease-out;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-400;
|
||
|
||
&.ng-enter,
|
||
&.rotate-up-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: rotateUp;
|
||
animation-name: rotateUp;
|
||
}
|
||
|
||
&.ng-leave,
|
||
&.rotate-up-remove,
|
||
&.ng-hide {
|
||
-webkit-animation-name: rotateUpOut;
|
||
animation-name: rotateUpOut;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: rotateUp;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: rotateUp;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
&.ng-leave {
|
||
-webkit-animation-name: rotateUpOut;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: rotateUpOut;
|
||
animation-play-state: paused;
|
||
&.ng-leave-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
}
|
||
.rotate-left {
|
||
-webkit-backface-visibility: visible !important;
|
||
backface-visibility: visible !important;
|
||
-webkit-animation-timing-function: @fc-ease-out;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-400;
|
||
animation-timing-function: @fc-ease-out;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-400;
|
||
|
||
&.ng-enter,
|
||
&.rotate-left-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: rotateLeft;
|
||
animation-name: rotateLeft;
|
||
}
|
||
|
||
&.ng-leave,
|
||
&.rotate-left-remove,
|
||
&.ng-hide {
|
||
-webkit-animation-name: rotateLeftOut;
|
||
animation-name: rotateLeftOut;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: rotateLeft;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: rotateLeft;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
&.ng-leave {
|
||
-webkit-animation-name: rotateLeftOut;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: rotateLeftOut;
|
||
animation-play-state: paused;
|
||
&.ng-leave-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
}
|
||
.rotate-right {
|
||
-webkit-backface-visibility: visible !important;
|
||
backface-visibility: visible !important;
|
||
-webkit-animation-timing-function: @fc-ease-out;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-400;
|
||
animation-timing-function: @fc-ease-out;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-400;
|
||
|
||
&.ng-enter,
|
||
&.rotate-right-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: rotateRight;
|
||
animation-name: rotateRight;
|
||
}
|
||
|
||
&.ng-leave,
|
||
&.rotate-right-remove,
|
||
&.ng-hide {
|
||
-webkit-animation-name: rotateRightOut;
|
||
animation-name: rotateRightOut;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: rotateRight;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: rotateRight;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
&.ng-leave {
|
||
-webkit-animation-name: rotateRightOut;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: rotateRightOut;
|
||
animation-play-state: paused;
|
||
&.ng-leave-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes rotateDown {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 50% 100%;
|
||
-webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
|
||
}
|
||
}
|
||
@keyframes rotateDown {
|
||
0% {
|
||
opacity: 1;
|
||
transform-origin: 0 0;
|
||
transform: perspective(800px) rotateX(0deg) translateZ(0px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform-origin: 50% 100%;
|
||
transform: perspective(800px) rotateX(-180deg) translateZ(300px);
|
||
}
|
||
}
|
||
@-webkit-keyframes rotateDownOut {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 50% 100%;
|
||
-webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
|
||
}
|
||
}
|
||
@keyframes rotateDownOut {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 50% 100%;
|
||
transform: perspective(800px) rotateX(-180deg) translateZ(300px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 0 0;
|
||
transform: perspective(800px) rotateX(0deg) translateZ(0px);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes rotateLeft {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 50% 0;
|
||
-webkit-transform: perspective(800px) rotateY(180deg) translateZ(300px);
|
||
}
|
||
}
|
||
@keyframes rotateLeft {
|
||
0% {
|
||
opacity: 1;
|
||
transform-origin: 0 0;
|
||
transform: perspective(800px) rotateY(0deg) translateZ(0px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform-origin: 50% 0;
|
||
transform: perspective(800px) rotateY(180deg) translateZ(300px);
|
||
}
|
||
}
|
||
@-webkit-keyframes rotateLeftOut {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 50% 0;
|
||
-webkit-transform: perspective(800px) rotateY(180deg) translateZ(300px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px);
|
||
}
|
||
}
|
||
@keyframes rotateLeftOut {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 50% 0;
|
||
transform: perspective(800px) rotateY(180deg) translateZ(300px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 0 0;
|
||
transform: perspective(800px) rotateY(0deg) translateZ(0px);
|
||
}
|
||
}
|
||
@-webkit-keyframes rotateRight {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 50% 0;
|
||
-webkit-transform: perspective(800px) rotateY(-180deg) translateZ(150px);
|
||
}
|
||
}
|
||
@keyframes rotateRight {
|
||
0% {
|
||
opacity: 1;
|
||
transform-origin: 0 0;
|
||
transform: perspective(800px) rotateY(0deg) translate3d(0px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform-origin: 50% 0;
|
||
transform: perspective(800px) rotateY(-180deg) translateZ(150px);
|
||
}
|
||
}
|
||
@-webkit-keyframes rotateRightOut {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 50% 0;
|
||
-webkit-transform: perspective(800px) rotateY(-180deg) translateZ(150px);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px);
|
||
}
|
||
}
|
||
@keyframes rotateRightOut {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 50% 0;
|
||
transform: perspective(800px) rotateY(-180deg) translateZ(150px);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 0 0;
|
||
transform: perspective(800px) rotateY(0deg) translate3d(0px);
|
||
}
|
||
}
|
||
@-webkit-keyframes rotateUp {
|
||
0% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 50% 0;
|
||
-webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px);
|
||
}
|
||
}
|
||
@keyframes rotateUp {
|
||
0% {
|
||
opacity: 1;
|
||
transform-origin: 0 0;
|
||
transform: perspective(800px) rotateX(0deg) translateZ(0px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform-origin: 50% 0;
|
||
transform: perspective(800px) rotateX(180deg) translateZ(100px);
|
||
}
|
||
}
|
||
@-webkit-keyframes rotateUpOut {
|
||
0% {
|
||
opacity: 0;
|
||
-webkit-transform-origin: 50% 0;
|
||
-webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
|
||
}
|
||
|
||
|
||
}
|
||
@keyframes rotateUpOut {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 50% 0;
|
||
transform: perspective(800px) rotateX(180deg) translateZ(100px);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 0 0;
|
||
transform: perspective(800px) rotateX(0deg) translateZ(0px);
|
||
}
|
||
|
||
}
|
||
|
||
// Slide - 滑动
|
||
.slide-down {
|
||
-webkit-animation-timing-function: @fc-ease-in;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-600;
|
||
animation-timing-function: @fc-ease-in;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-600;
|
||
|
||
&.ng-enter,
|
||
&.slide-down-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: slideDown;
|
||
animation-name: slideDown;
|
||
}
|
||
|
||
&.ng-leave,
|
||
&.slide-down-remove,
|
||
&.ng-hide {
|
||
-webkit-animation-name: slideUp;
|
||
animation-name: slideUp;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: slideDown;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: slideDown;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
&.ng-leave {
|
||
-webkit-animation-name: slideUp;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: slideUp;
|
||
animation-play-state: paused;
|
||
&.ng-leave-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
}
|
||
.slide-left {
|
||
-webkit-animation-timing-function: @fc-ease-in;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-600;
|
||
animation-timing-function: @fc-ease-in;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-600;
|
||
|
||
&.ng-enter,
|
||
&.slide-left-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: slideLeft;
|
||
animation-name: slideLeft;
|
||
}
|
||
|
||
&.ng-leave,
|
||
&.slide-left-remove,
|
||
&.ng-hide {
|
||
-webkit-animation-name: slideRight;
|
||
animation-name: slideRight;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: slideLeft;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: slideLeft;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
&.ng-leave {
|
||
-webkit-animation-name: slideRight;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: slideRight;
|
||
animation-play-state: paused;
|
||
&.ng-leave-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
}
|
||
.slide-right {
|
||
-webkit-animation-timing-function: @fc-ease-in;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-600;
|
||
animation-timing-function: @fc-ease-in;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-600;
|
||
|
||
&.ng-enter,
|
||
&.slide-right-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: slideRight;
|
||
animation-name: slideRight;
|
||
}
|
||
|
||
&.ng-leave,
|
||
&.slide-right-remove,
|
||
&.ng-hide {
|
||
-webkit-animation-name: slideLeft;
|
||
animation-name: slideLeft;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: slideRight;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: slideRight;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
&.ng-leave {
|
||
-webkit-animation-name: slideLeft;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: slideLeft;
|
||
animation-play-state: paused;
|
||
&.ng-leave-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
}
|
||
.slide-up {
|
||
-webkit-animation-timing-function: @fc-ease-in;
|
||
-webkit-animation-fill-mode: backwards;
|
||
-webkit-animation-duration: @fc-duration-600;
|
||
animation-timing-function: @fc-ease-in;
|
||
animation-fill-mode: backwards;
|
||
animation-duration: @fc-duration-600;
|
||
|
||
&.ng-enter,
|
||
&.slide-up-add,
|
||
&.ng-hide-remove,
|
||
&.ng-move {
|
||
-webkit-animation-name: slideUp;
|
||
animation-name: slideUp;
|
||
}
|
||
|
||
&.ng-leave,
|
||
&.slide-up-remove,
|
||
&.ng-hide {
|
||
-webkit-animation-name: slideDown;
|
||
animation-name: slideDown;
|
||
}
|
||
|
||
&.ng-enter {
|
||
-webkit-animation-name: slideUp;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: slideUp;
|
||
animation-play-state: paused;
|
||
&.ng-enter-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
|
||
&.ng-leave {
|
||
-webkit-animation-name: slideDown;
|
||
-webkit-animation-play-state: paused;
|
||
animation-name: slideDown;
|
||
animation-play-state: paused;
|
||
&.ng-leave-active {
|
||
-webkit-animation-play-state: running;
|
||
animation-play-state: running;
|
||
}
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes slideDown {
|
||
0% {
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: translateY(80%);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: translateY(0%);
|
||
}
|
||
}
|
||
@keyframes slideDown {
|
||
0% {
|
||
transform-origin: 0 0;
|
||
transform: translateY(80%);
|
||
}
|
||
|
||
100% {
|
||
transform-origin: 0 0;
|
||
transform: translateY(0%);
|
||
}
|
||
}
|
||
@-webkit-keyframes slideDownOut {
|
||
0% {
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: translateY(0%);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: translateY(80%);
|
||
}
|
||
|
||
}
|
||
@keyframes slideDownOut {
|
||
0% {
|
||
transform-origin: 0 0;
|
||
transform: translateY(0%);
|
||
}
|
||
100% {
|
||
transform-origin: 0 0;
|
||
transform: translateY(80%);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes slideLeft {
|
||
0% {
|
||
-webkit-transform-origin: 0 0;;
|
||
-webkit-transform: translateX(-80%);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: translateX(0%);
|
||
}
|
||
}
|
||
@keyframes slideLeft {
|
||
0% {
|
||
transform-origin: 0 0;
|
||
transform: translateX(-80%);
|
||
}
|
||
|
||
100% {
|
||
transform-origin: 0 0;
|
||
transform: translateX(0%);
|
||
}
|
||
}
|
||
@-webkit-keyframes slideLeftOut {
|
||
0% {
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: translateX(0%);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform-origin: 0 0;;
|
||
-webkit-transform: translateX(-80%);
|
||
}
|
||
}
|
||
@keyframes slideLeftOut {
|
||
0% {
|
||
transform-origin: 0 0;
|
||
transform: translateX(0%);
|
||
}
|
||
|
||
100% {
|
||
transform-origin: 0 0;
|
||
transform: translateX(-80%);
|
||
}
|
||
}
|
||
@-webkit-keyframes slideRight {
|
||
0% {
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: translateX(80%);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: translateX(0%);
|
||
}
|
||
}
|
||
@keyframes slideRight {
|
||
0% {
|
||
transform-origin: 0 0;
|
||
transform: translateX(80%);
|
||
}
|
||
|
||
100% {
|
||
transform-origin: 0 0;
|
||
transform: translateX(0%);
|
||
}
|
||
}
|
||
@-webkit-keyframes slideRightOut {
|
||
0% {
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: translateX(0%);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: translateX(80%);
|
||
}
|
||
}
|
||
@keyframes slideRightOut {
|
||
0% {
|
||
transform-origin: 0 0;
|
||
transform: translateX(0%);
|
||
}
|
||
|
||
100% {
|
||
transform-origin: 0 0;
|
||
transform: translateX(80%);
|
||
}
|
||
}
|
||
@-webkit-keyframes slideUp {
|
||
0% {
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: translateY(-80%);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: translateY(0%);
|
||
}
|
||
}
|
||
@keyframes slideUp {
|
||
0% {
|
||
transform-origin: 0 0;
|
||
transform: translateY(-80%);
|
||
}
|
||
|
||
100% {
|
||
transform-origin: 0 0;
|
||
transform: translateY(0%);
|
||
}
|
||
}
|
||
@-webkit-keyframes slideUpOut {
|
||
0% {
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: translateY(0%);
|
||
}
|
||
100% {
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: translateY(-80%);
|
||
}
|
||
}
|
||
@keyframes slideUpOut {
|
||
0% {
|
||
transform-origin: 0 0;
|
||
transform: translateY(0%);
|
||
}
|
||
|
||
100% {
|
||
transform-origin: 0 0;
|
||
transform: translateY(-80%);
|
||
}
|
||
}
|
||
@-webkit-keyframes loadingCircle {
|
||
0% {
|
||
-webkit-transform-origin: 50% 50%;
|
||
-webkit-transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
-webkit-transform-origin: 50% 50%;
|
||
-webkit-transform: rotate(360deg);
|
||
}
|
||
}
|
||
@keyframes loadingCircle {
|
||
0% {
|
||
transform-origin: 50% 50%;
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
transform-origin: 50% 50%;
|
||
transform: rotate(360deg);
|
||
}
|
||
} |