zarm-web/lib/transition/style/index.css

基于 React 的桌面端UI库

@keyframes door-enter {
  from {
    transform: scale3d(0, 1, 1);
  }
  to {
    transform: scale3d(1, 1, 0.1);
  }
}
.door-enter {
  animation: door-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@keyframes door-leave {
  from {
    transform: scale3d(1, 1, 1);
  }
  60% {
    transform: scale3d(0.01, 1, 1);
  }
  to {
    transform: scale3d(0, 1, 0.1);
  }
}
.door-leave {
  animation: door-leave both;
}

@keyframes fade-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-enter {
  animation: fade-enter both ease-in;
}

@keyframes fade-leave {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fade-leave {
  animation: fade-leave both ease-out;
}

@keyframes flip-enter {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
  }
  70% {
    transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    transform: perspective(400px);
  }
}
.flip-enter {
  animation: flip-enter both ease-in;
  backface-visibility: visible !important;
}

@keyframes flip-leave {
  from {
    transform: perspective(400px);
  }
  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
  }
}
.flip-leave {
  animation: flip-leave both;
  backface-visibility: visible !important;
}

@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotate360 {
  animation: rotate360 1s linear infinite;
}

/* rotate */
@keyframes rotate-enter {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
  }
  to {
    transform-origin: center;
    transform: scale3d(1, 1, 1);
  }
}
.rotate-enter {
  animation: rotate-enter both;
}

@keyframes rotate-leave {
  from {
    transform-origin: center;
  }
  to {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 180deg) scale3d(0.3, 0.3, 0.3);
  }
}
.rotate-leave {
  animation: rotate-leave both;
}

/* slideUp */
@keyframes slideUp-enter {
  from {
    transform: translate3d(0, 100px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideUp-enter {
  animation: slideUp-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@keyframes slideUp-leave {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 100px, 0);
  }
}
.slideUp-leave {
  animation: slideUp-leave both;
}

/* slideDown */
@keyframes slideDown-enter {
  from {
    transform: translate3d(0, -100px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideDown-enter {
  animation: slideDown-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@keyframes slideDown-leave {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -100px, 0);
  }
}
.slideDown-leave {
  animation: slideDown-leave both;
}

/* slideLeft */
@keyframes slideLeft-enter {
  from {
    transform: translate3d(150px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideLeft-enter {
  animation: slideLeft-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@keyframes slideLeft-leave {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(150px, 0, 0);
  }
}
.slideLeft-leave {
  animation: slideLeft-leave both;
}

/* slideRight */
@keyframes slideRight-enter {
  from {
    transform: translate3d(-150px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideRight-enter {
  animation: slideRight-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@keyframes slideRight-leave {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-150px, 0, 0);
  }
}
.slideRight-leave {
  animation: slideRight-leave both;
}

@keyframes zoom-enter {
  from {
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.zoom-enter {
  animation: zoom-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@keyframes zoom-leave {
  from {
    transform: scale3d(1, 1, 1);
  }
  to {
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.zoom-leave {
  animation: zoom-leave both cubic-bezier(0.4, 0, 0, 1.5);
}

@keyframes za-zoom-fade-enter {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.za-zoom-fade-enter {
  animation: za-zoom-fade-enter both cubic-bezier(0.08, 0.82, 0.17, 1);
}

@keyframes za-zoom-fade-leave {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}
.za-zoom-fade-leave {
  animation: za-zoom-fade-leave both cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

/* moveUp */
@keyframes moveUp-enter {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.moveUp-enter {
  animation: moveUp-enter both ease-in;
}

@keyframes moveUp-leave {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 100%, 0);
  }
}
.moveUp-leave {
  animation: moveUp-leave both ease-out;
}

/* moveDown */
@keyframes moveDown-enter {
  from {
    transform: translate3d(0, -100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.moveDown-enter {
  animation: moveDown-enter both ease-in;
}

@keyframes moveDown-leave {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -100%, 0);
  }
}
.moveDown-leave {
  animation: moveDown-leave both ease-out;
}

/* moveLeft */
@keyframes moveLeft-enter {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.moveLeft-enter {
  animation: moveLeft-enter both ease-in;
}

@keyframes moveLeft-leave {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}
.moveLeft-leave {
  animation: moveLeft-leave both ease-out;
}

/* moveRight */
@keyframes moveRight-enter {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.moveRight-enter {
  animation: moveRight-enter both ease-in;
}

@keyframes moveRight-leave {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
.moveRight-leave {
  animation: moveRight-leave both ease-out;
}

@keyframes scaleDown-enter {
  from {
    opacity: 0;
    transform-origin: 0 0;
    transform: scaleY(0.8);
  }
  to {
    opacity: 1;
    transform-origin: 0 0;
    transform: scaleY(1);
  }
}
.scaleDown-enter {
  animation: scaleDown-enter both;
}

@keyframes scaleDown-leave {
  from {
    opacity: 1;
    transform-origin: 0 0;
    transform: scaleY(1);
  }
  to {
    opacity: 0;
    transform-origin: 0 0;
    transform: scaleY(0.8);
  }
}
.scaleDown-leave {
  animation: scaleDown-leave both;
}

@keyframes scaleUp-enter {
  from {
    opacity: 0;
    transform-origin: bottom center;
    transform: scaleY(0.8);
  }
  to {
    opacity: 1;
    transform-origin: bottom center;
    transform: scaleY(1);
  }
}
.scaleUp-enter {
  animation: scaleUp-enter both;
}

@keyframes scaleUp-leave {
  from {
    opacity: 1;
    transform-origin: bottom center;
    transform: scaleY(1);
  }
  to {
    opacity: 0;
    transform-origin: bottom center;
    transform: scaleY(0.8);
  }
}
.scaleUp-leave {
  animation: scaleUp-leave both;
}

@keyframes bounce-enter {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounce-leave {
  20% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}
@keyframes tada {
  0% {
    transform: scale(1);
  }
  10%, 20% {
    transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.transition {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-duration: 300ms;
  animation-duration: 300ms;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  /* static animation */
}
.transition.visible {
  display: block !important;
  visibility: visible !important;
}
.transition.hidden {
  display: none !important;
  visibility: hidden !important;
}
.transition.fade-in {
  animation-name: fade-enter;
}
.transition.fade-out {
  animation-name: fade-leave;
}
.transition.zoom-in {
  animation-name: zoom-enter;
}
.transition.zoom-out {
  animation-name: zoom-leave;
}
.transition.door-in {
  animation-name: door-enter;
}
.transition.door-out {
  animation-name: door-leave;
}
.transition.flip-in {
  animation-name: flip-enter;
}
.transition.flip-out {
  animation-name: flip-leave;
}
.transition.moveUp-in {
  animation-name: moveUp-enter;
}
.transition.moveUp-out {
  animation-name: moveUp-leave;
}
.transition.moveDown-in {
  animation-name: moveDown-enter;
}
.transition.moveDown-out {
  animation-name: moveDown-leave;
}
.transition.moveLeft-in {
  animation-name: moveLeft-enter;
}
.transition.moveLeft-out {
  animation-name: moveLeft-leave;
}
.transition.moveRight-in {
  animation-name: moveRight-enter;
}
.transition.moveRight-out {
  animation-name: moveRight-leave;
}
.transition.rotate-in {
  animation-name: rotate-enter;
}
.transition.rotate-out {
  animation-name: rotate-leave;
}
.transition.scaleDown-in {
  animation-name: scaleDown-enter;
}
.transition.scaleDown-out {
  animation-name: scaleDown-leave;
}
.transition.scaleUp-in {
  animation-name: scaleUp-enter;
}
.transition.scaleUp-out {
  animation-name: scaleUp-leave;
}
.transition.slideUp-in {
  animation-name: slideUp-enter;
}
.transition.slideUp-out {
  animation-name: slideUp-leave;
}
.transition.slideDown-in {
  animation-name: slideDown-enter;
}
.transition.slideDown-out {
  animation-name: slideDown-leave;
}
.transition.slideLeft-in {
  animation-name: slideLeft-enter;
}
.transition.slideLeft-out {
  animation-name: slideLeft-leave;
}
.transition.slideRight-in {
  animation-name: slideRight-enter;
}
.transition.slideRight-out {
  animation-name: slideRight-leave;
}
.transition.bounces-in {
  animation-name: bounce-enter;
}
.transition.bounces-out {
  animation-name: bounce-leave;
}
.transition.flash {
  animation-name: flash;
}
.transition.shake {
  animation-name: shake;
}
.transition.tada {
  animation-name: tada;
}
.transition.pulse {
  animation-name: pulse;
}
.transition.swing {
  animation-name: swing;
}