captain-ui/es/scroll-nav/src/animate.css

有赞vue wap业务组件库

@keyframes slide-up-right {
  from {
    transform: rotate(15deg) skew(15deg) translate3d(0, 50px, 0);
    opacity: 0;
  }

  to {
    trnasform: rotate(15deg) skew(15deg) translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slide-up-left {
  from {
    transform: rotate(-15deg) skew(-15deg) translate3d(0, 50px, 0);
    opacity: 0;
  }

  to {
    trnasform: rotate(-15deg) skew(-15deg) translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slide-up-middle {
  from {
    transform: rotate(0) skew(0) translate3d(0, 50px, 0);
    opacity: 0;
  }

  to {
    trnasform: rotate(0) skew(0) translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes zoom-in-right {
  from {
    transform: rotate(15deg) skew(15deg) translate3d(0, 0, 0) scale(0.8);
    opacity: 0;
  }

  to {
    transform: rotate(15deg) skew(15deg) translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes zoom-in-left {
  from {
    transform: rotate(-15deg) skew(-15deg) translate3d(0, 0, 0) scale(0.8);
    opacity: 0;
  }

  to {
    transform: rotate(-15deg) skew(-15deg) translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes zoom-in-middle {
  from {
    transform: rotate(0) skew(0) translate3d(0, 0, 0) scale(0.8);
    opacity: 0;
  }

  to {
    transform: rotate(0) skew(0) translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes zoom-out-right {
  from {
    transform: rotate(15deg) skew(15deg) translate3d(0, 0, 0) scale(1.2);
    opacity: 0;
  }

  to {
    transform: rotate(15deg) skew(15deg) translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes zoom-out-left {
  from {
    transform: rotate(-15deg) skew(-15deg) translate3d(0, 0, 0) scale(1.2);
    opacity: 0;
  }

  to {
    transform: rotate(-15deg) skew(-15deg) translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes zoom-out-middle {
  from {
    transform: rotate(0) skew(0) translate3d(0, 0, 0) scale(1.2);
    opacity: 0;
  }

  to {
    transform: rotate(0) skew(0) translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes slide-left-right {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    transform: rotate(15deg) skew(15deg) translate3d(-3000px, 0, 0);
  }

  60% {
    transform: rotate(15deg) skew(15deg) translate3d(25px, 0, 0);
    opacity: 1;
  }

  75% {
    transform: rotate(15deg) skew(15deg) translate3d(-10px, 0, 0);
  }

  90% {
    transform: rotate(15deg) skew(15deg) translate3d(5px, 0, 0);
  }

  to {
    transform: rotate(15deg) skew(15deg) translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slide-left-left {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    transform: rotate(-15deg) skew(-15deg) translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: rotate(-15deg) skew(-15deg) translate3d(25px, 0, 0);
  }

  75% {
    transform: rotate(-15deg) skew(-15deg) translate3d(-10px, 0, 0);
  }

  90% {
    transform: rotate(-15deg) skew(-15deg) translate3d(5px, 0, 0);
  }

  to {
    transform: rotate(-15deg) skew(-15deg) translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slide-left-middle {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    transform: rotate(0) skew(0) translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: rotate(0) skew(0) translate3d(25px, 0, 0);
  }

  75% {
    transform: rotate(0) skew(0) translate3d(-10px, 0, 0);
  }

  90% {
    transform: rotate(0) skew(0) translate3d(5px, 0, 0);
  }

  to {
    transform: rotate(0) skew(0) translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slide-right-right {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    transform: rotate(15deg) skew(15deg) translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: rotate(15deg) skew(15deg) translate3d(-25px, 0, 0);
  }

  75% {
    transform: rotate(15deg) skew(15deg) translate3d(10px, 0, 0);
  }

  90% {
    transform: rotate(15deg) skew(15deg) translate3d(-5px, 0, 0);
  }

  to {
    transform: rotate(15deg) skew(15deg) translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slide-right-left {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    transform: rotate(-15deg) skew(-15deg) translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: rotate(-15deg) skew(-15deg) translate3d(-25px, 0, 0);
  }

  75% {
    transform: rotate(-15deg) skew(-15deg) translate3d(10px, 0, 0);
  }

  90% {
    transform: rotate(-15deg) skew(-15deg) translate3d(-5px, 0, 0);
  }

  to {
    transform: rotate(-15deg) skew(-15deg) translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slide-right-middle {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    transform: rotate(0) skew(0) translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: rotate(0) skew(0) translate3d(-25px, 0, 0);
  }

  75% {
    transform: rotate(0) skew(0) translate3d(10px, 0, 0);
  }

  90% {
    transform: rotate(0) skew(0) translate3d(-5px, 0, 0);
  }

  to {
    transform: rotate(0) skew(0) translate3d(0, 0, 0);
    opacity: 1;
  }
}