zarm/lib/style/animations/index.css

基于 React 的移动端UI库

.za-fade-enter,
.za-fade-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-fade-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-fade-enter.za-fade-enter-active,
.za-fade-appear.za-fade-appear-active {
  animation-name: za-fade-in;
  animation-play-state: running;
}

.za-fade-leave.za-fade-leave-active {
  animation-name: za-fade-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-fade-enter,
.za-fade-appear {
  opacity: 0;
  animation-timing-function: linear;
}

.za-fade-leave {
  animation-timing-function: linear;
}

@keyframes za-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes za-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.za-door-enter,
.za-door-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-door-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-door-enter.za-door-enter-active,
.za-door-appear.za-door-appear-active {
  animation-name: za-door-in;
  animation-play-state: running;
}

.za-door-leave.za-door-leave-active {
  animation-name: za-door-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-door-enter,
.za-door-appear {
  opacity: 0;
  animation-timing-function: cubic-bezier(0.4, 0, 0, 0);
}

.za-door-leave {
  animation-timing-function: ease;
}

@keyframes za-door-in {
  from {
    opacity: 0;
    transform: scale3d(0, 1, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 0.1);
  }
}
@keyframes za-door-out {
  from {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  60% {
    transform: scale3d(0.01, 1, 1);
  }
  to {
    opacity: 0;
    transform: scale3d(0, 1, 0.1);
  }
}
.za-flip-enter,
.za-flip-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-flip-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-flip-enter.za-flip-enter-active,
.za-flip-appear.za-flip-appear-active {
  animation-name: za-flip-in;
  animation-play-state: running;
}

.za-flip-leave.za-flip-leave-active {
  animation-name: za-flip-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-flip-enter,
.za-flip-appear {
  opacity: 0;
  animation-timing-function: cubic-bezier(0.4, 0, 0, 0);
  backface-visibility: visible !important;
}

.za-flip-leave {
  animation-timing-function: ease;
  backface-visibility: visible !important;
}

@keyframes za-flip-in {
  from {
    opacity: 0;
    transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
  }
  70% {
    transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px);
  }
}
@keyframes za-flip-out {
  from {
    opacity: 1;
    transform: perspective(400px);
  }
  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    opacity: 0;
    transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
  }
}
.za-rotate-enter,
.za-rotate-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-rotate-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-rotate-enter.za-rotate-enter-active,
.za-rotate-appear.za-rotate-appear-active {
  animation-name: za-rotate-in;
  animation-play-state: running;
}

.za-rotate-leave.za-rotate-leave-active {
  animation-name: za-rotate-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-rotate-enter,
.za-rotate-appear {
  animation-timing-function: ease;
}

.za-rotate-leave {
  animation-timing-function: ease;
}

@keyframes za-rotate-in {
  from {
    opacity: 0;
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
    transform-origin: center;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes za-rotate-out {
  from {
    opacity: 1;
    transform-origin: center;
  }
  to {
    opacity: 0;
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 180deg) scale3d(0.3, 0.3, 0.3);
  }
}
.za-slide-up-enter,
.za-slide-up-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-slide-up-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-slide-up-enter.za-slide-up-enter-active,
.za-slide-up-appear.za-slide-up-appear-active {
  animation-name: za-slide-up-in;
  animation-play-state: running;
}

.za-slide-up-leave.za-slide-up-leave-active {
  animation-name: za-slide-up-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-slide-up-enter,
.za-slide-up-appear {
  animation-timing-function: ease-out;
}

.za-slide-up-leave {
  animation-timing-function: ease-in;
}

.za-slide-down-enter,
.za-slide-down-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-slide-down-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-slide-down-enter.za-slide-down-enter-active,
.za-slide-down-appear.za-slide-down-appear-active {
  animation-name: za-slide-down-in;
  animation-play-state: running;
}

.za-slide-down-leave.za-slide-down-leave-active {
  animation-name: za-slide-down-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-slide-down-enter,
.za-slide-down-appear {
  animation-timing-function: ease-out;
}

.za-slide-down-leave {
  animation-timing-function: ease-in;
}

.za-slide-left-enter,
.za-slide-left-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-slide-left-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-slide-left-enter.za-slide-left-enter-active,
.za-slide-left-appear.za-slide-left-appear-active {
  animation-name: za-slide-left-in;
  animation-play-state: running;
}

.za-slide-left-leave.za-slide-left-leave-active {
  animation-name: za-slide-left-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-slide-left-enter,
.za-slide-left-appear {
  animation-timing-function: ease-out;
}

.za-slide-left-leave {
  animation-timing-function: ease-in;
}

.za-slide-right-enter,
.za-slide-right-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-slide-right-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-slide-right-enter.za-slide-right-enter-active,
.za-slide-right-appear.za-slide-right-appear-active {
  animation-name: za-slide-right-in;
  animation-play-state: running;
}

.za-slide-right-leave.za-slide-right-leave-active {
  animation-name: za-slide-right-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-slide-right-enter,
.za-slide-right-appear {
  animation-timing-function: ease-out;
}

.za-slide-right-leave {
  animation-timing-function: ease-in;
}

@keyframes za-slide-up-in {
  from {
    transform: translate3d(0, 100px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes za-slide-up-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 100px, 0);
  }
}
@keyframes za-slide-down-in {
  from {
    transform: translate3d(0, -100px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes za-slide-down-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -100px, 0);
  }
}
@keyframes za-slide-left-in {
  from {
    transform: translate3d(-150px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes za-slide-left-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-150px, 0, 0);
  }
}
@keyframes za-slide-right-in {
  from {
    transform: translate3d(150px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes za-slide-right-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(150px, 0, 0);
  }
}
.za-menu-slide-up-enter,
.za-menu-slide-up-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-menu-slide-up-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-menu-slide-up-enter.za-menu-slide-up-enter-active,
.za-menu-slide-up-appear.za-menu-slide-up-appear-active {
  animation-name: za-menu-slide-up-in;
  animation-play-state: running;
}

.za-menu-slide-up-leave.za-menu-slide-up-leave-active {
  animation-name: za-menu-slide-up-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-menu-slide-up-enter,
.za-menu-slide-up-appear {
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.za-menu-slide-up-leave {
  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

.za-menu-slide-down-enter,
.za-menu-slide-down-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-menu-slide-down-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-menu-slide-down-enter.za-menu-slide-down-enter-active,
.za-menu-slide-down-appear.za-menu-slide-down-appear-active {
  animation-name: za-menu-slide-down-in;
  animation-play-state: running;
}

.za-menu-slide-down-leave.za-menu-slide-down-leave-active {
  animation-name: za-menu-slide-down-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-menu-slide-down-enter,
.za-menu-slide-down-appear {
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.za-menu-slide-down-leave {
  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

@keyframes za-menu-slide-up-in {
  0% {
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}
@keyframes za-menu-slide-up-out {
  0% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }
}
@keyframes za-menu-slide-down-in {
  0% {
    transform: scaleY(0.8);
    transform-origin: 100% 100%;
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
}
@keyframes za-menu-slide-down-out {
  0% {
    transform: scaleY(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0.8);
    transform-origin: 100% 100%;
    opacity: 0;
  }
}
.za-zoom-enter,
.za-zoom-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-zoom-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-zoom-enter.za-zoom-enter-active,
.za-zoom-appear.za-zoom-appear-active {
  animation-name: za-zoom-in;
  animation-play-state: running;
}

.za-zoom-leave.za-zoom-leave-active {
  animation-name: za-zoom-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-zoom-enter,
.za-zoom-appear {
  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}

.za-zoom-leave {
  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

@keyframes za-zoom-in {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes za-zoom-out {
  from {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.za-zoom-fade-enter,
.za-zoom-fade-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-zoom-fade-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-zoom-fade-enter.za-zoom-fade-enter-active,
.za-zoom-fade-appear.za-zoom-fade-appear-active {
  animation-name: za-zoom-fade-in;
  animation-play-state: running;
}

.za-zoom-fade-leave.za-zoom-fade-leave-active {
  animation-name: za-zoom-fade-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-zoom-fade-enter,
.za-zoom-fade-appear {
  opacity: 0;
  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}

.za-zoom-fade-leave {
  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

@keyframes za-zoom-fade-in {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes za-zoom-fade-out {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}
.za-move-up-enter,
.za-move-up-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-move-up-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-move-up-enter.za-move-up-enter-active,
.za-move-up-appear.za-move-up-appear-active {
  animation-name: za-move-up-in;
  animation-play-state: running;
}

.za-move-up-leave.za-move-up-leave-active {
  animation-name: za-move-up-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-move-up-enter,
.za-move-up-appear {
  animation-timing-function: ease-out;
}

.za-move-up-leave {
  animation-timing-function: ease-in;
}

.za-move-down-enter,
.za-move-down-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-move-down-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-move-down-enter.za-move-down-enter-active,
.za-move-down-appear.za-move-down-appear-active {
  animation-name: za-move-down-in;
  animation-play-state: running;
}

.za-move-down-leave.za-move-down-leave-active {
  animation-name: za-move-down-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-move-down-enter,
.za-move-down-appear {
  animation-timing-function: ease-out;
}

.za-move-down-leave {
  animation-timing-function: ease-in;
}

.za-move-left-enter,
.za-move-left-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-move-left-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-move-left-enter.za-move-left-enter-active,
.za-move-left-appear.za-move-left-appear-active {
  animation-name: za-move-left-in;
  animation-play-state: running;
}

.za-move-left-leave.za-move-left-leave-active {
  animation-name: za-move-left-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-move-left-enter,
.za-move-left-appear {
  animation-timing-function: ease-out;
}

.za-move-left-leave {
  animation-timing-function: ease-in;
}

.za-move-right-enter,
.za-move-right-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-move-right-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-move-right-enter.za-move-right-enter-active,
.za-move-right-appear.za-move-right-appear-active {
  animation-name: za-move-right-in;
  animation-play-state: running;
}

.za-move-right-leave.za-move-right-leave-active {
  animation-name: za-move-right-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-move-right-enter,
.za-move-right-appear {
  animation-timing-function: ease-out;
}

.za-move-right-leave {
  animation-timing-function: ease-in;
}

@keyframes za-move-up-in {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes za-move-up-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes za-move-down-in {
  from {
    transform: translate3d(0, -100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes za-move-down-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes za-move-left-in {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes za-move-left-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes za-move-right-in {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes za-move-right-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}