meck-rc-table/assets/animation.css

table ui component for react

.move-enter,
.move-appear {
  opacity: 0;
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.move-leave {
  -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
          animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -webkit-animation-duration: .5s;
          animation-duration: .5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.move-enter.move-enter-active,
.move-appear.move-enter-active {
  -webkit-animation-name: moveLeftIn;
          animation-name: moveLeftIn;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.move-leave.move-leave-active {
  -webkit-animation-name: moveRightOut;
          animation-name: moveRightOut;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
@-webkit-keyframes moveLeftIn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
    opacity: 0;
    background: #fff6de;
  }
  20% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  80% {
    background: #fff6de;
  }
  100% {
    background: transparent;
    opacity: 1;
  }
}
@keyframes moveLeftIn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
    opacity: 0;
    background: #fff6de;
  }
  20% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  80% {
    background: #fff6de;
  }
  100% {
    background: transparent;
    opacity: 1;
  }
}
@-webkit-keyframes moveRightOut {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
    opacity: 0;
  }
}
@keyframes moveRightOut {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
    opacity: 0;
  }
}