vr-shopxo-uniapp/common/css/animation.css

/* // 放大缩小 */
.scale-up-center {
	-webkit-animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.scale-up-center-infinite {
	-webkit-animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
	        animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
}

@keyframes scale-up-center {
    0% {
      -webkit-transform: scale(0.5);
              transform: scale(0.5);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }
/* // 中心缩小 */
.scale-out-center {
	-webkit-animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.scale-out-center-infinite {
	-webkit-animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
	        animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
}

@keyframes scale-out-center {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(0);
              transform: scale(0);
      opacity: 1;
    }
}
/* // 垂直放大 */
.scale-up-ver-bottom {
	-webkit-animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.scale-up-ver-bottom-infinite {
	-webkit-animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
	        animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
}
@keyframes scale-up-ver-bottom {
    0% {
        -webkit-transform: scaleY(0.4);
                transform: scaleY(0.4);
        -webkit-transform-origin: 50%;
                transform-origin: 50%;
    }
    80% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
        -webkit-transform-origin: 50%;
                transform-origin: 50%;
    }
    85% {
        -webkit-transform: rotate(-8deg);
                transform: rotate(-8deg);
    }
    95% {
        -webkit-transform: rotate(8deg);
                transform: rotate(8deg);
    }
    100% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
}
/* // 交替垂直放大 */
.scale-up-ver-bottom-alternate {
    -webkit-animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
	        animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
}
.scale-up-ver-bottom-alternate-infinite {
    -webkit-animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
	        animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
}
@keyframes scale-up-ver-bottom-alternate {
    0% {
        -webkit-transform: scaleY(0.4);
                transform: scaleY(0.4);
        -webkit-transform-origin: 0% 100%;
                transform-origin: 0% 100%;
    }
    100% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
        -webkit-transform-origin: 0% 100%;
                transform-origin: 0% 100%;
    }
}
/* 中间区域放大 */
.scale-up-ver-center {
	-webkit-animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.scale-up-ver-center-infinite {
	-webkit-animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
	        animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
}

@keyframes scale-up-ver-center {
    0% {
      -webkit-transform: scaleY(0.4);
              transform: scaleY(0.4);
    }
    100% {
      -webkit-transform: scaleY(1);
              transform: scaleY(1);
    }
}

/* // 淡出 */
.fade-out-fwd {
	-webkit-animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.fade-out-fwd-infinite {
	-webkit-animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
	        animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
}
@keyframes fade-out-fwd {
    0% {
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateZ(80px);
              transform: translateZ(80px);
      opacity: 0;
    }
}
/* // 淡入 */
.fade-in-bck {
	-webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.fade-in-bck-infinite {
	-webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
	        animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
}
/* // 淡入淡出 */
.fade-in-bck-alternate {
    -webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
	        animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
}
.fade-in-bck-alternate-infinite {
    -webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
	        animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
}
@keyframes fade-in-bck {
    0% {
      -webkit-transform: translateZ(80px);
              transform: translateZ(80px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      opacity: 1;
    }
}
/* //文字铺开 */
.tracking-in-expand {
	-webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

.tracking-in-expand-infinite {
	-webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite both;
	        animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite both;
}

@keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
}

/* // 心跳 */
.heartbeat {
	-webkit-animation: heartbeat 1s ease-in-out both;
	        animation: heartbeat 1s ease-in-out both;
}

.heartbeat-infinite {
	-webkit-animation: heartbeat 1s ease-in-out infinite both;
	        animation: heartbeat 1s ease-in-out infinite both;
}

@keyframes heartbeat {
    from {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: center center;
              transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    10% {
      -webkit-transform: scale(0.91);
              transform: scale(0.91);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    17% {
      -webkit-transform: scale(0.98);
              transform: scale(0.98);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    33% {
      -webkit-transform: scale(0.87);
              transform: scale(0.87);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    45% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
}

/* // 脉动 */
.pulsate-bck {
	-webkit-animation: pulsate-bck 1s ease-in-out both;
	        animation: pulsate-bck 1s ease-in-out both;
}

.pulsate-bck-infinite {
	-webkit-animation: pulsate-bck 1s ease-in-out infinite both;
	        animation: pulsate-bck 1s ease-in-out infinite both;
}

@keyframes pulsate-bck {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    50% {
      -webkit-transform: scale(0.9);
              transform: scale(0.9);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
}

/* // 向上弹跳 */
.bounce-top {
	-webkit-animation: bounce-top 1.5s both;
	        animation: bounce-top 1.5s both;
}
.bounce-top-infinite {
	-webkit-animation: bounce-top 1.5s infinite both;
	        animation: bounce-top 1.5s infinite both;
}

@keyframes bounce-top {
    0%, 30%, 60%, 100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    15% {
      -webkit-transform: translateY(-40px);
              transform: translateY(-40px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: translateY(-20px);
                transform: translateY(-20px);
        -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    75% {
      -webkit-transform: translateY(-8px);
              transform: translateY(-8px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
}

/* // 向下弹跳 */
.bounce-bottom {
	-webkit-animation: bounce-bottom 1.5s both;
	        animation: bounce-bottom 1.5s both;
}
.bounce-bottom-infinite {
	-webkit-animation: bounce-bottom 1.5s infinite both;
	        animation: bounce-bottom 1.5s infinite both;
}

@keyframes bounce-bottom {
    0%, 30%, 60%, 100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }
    15% {
        -webkit-transform: translateY(40px);
                transform: translateY(40px);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: translateY(20px);
                transform: translateY(20px);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
    75% {
        -webkit-transform: translateY(8px);
                transform: translateY(8px);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
}

/* // 向左弹跳 */
.bounce-left {
	-webkit-animation: bounce-left 1.5s both;
	        animation: bounce-left 1.5s both;
}
.bounce-left-infinite {
	-webkit-animation: bounce-left 1.5s infinite both;
	        animation: bounce-left 1.5s infinite both;
}

@keyframes bounce-left {
    0%, 30%, 60%, 100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }
    15% {
        -webkit-transform: translateX(-40px);
                transform: translateX(-40px);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: translateX(-20px);
                transform: translateX(-20px);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
    75% {
        -webkit-transform: translateX(-8px);
                transform: translateX(-8px);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
}
/* // 向右弹跳 */
.bounce-right {
	-webkit-animation: bounce-right 1.5s both;
	        animation: bounce-right 1.5s both;
}
.bounce-right-infinite {
	-webkit-animation: bounce-right 1.5s infinite both;
	        animation: bounce-right 1.5s infinite both;
}

@keyframes bounce-right {
    0%, 30%, 60%, 100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }
    15% {
        -webkit-transform: translateX(40px);
                transform: translateX(40px);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: translateX(20px);
                transform: translateX(20px);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
    75% {
        -webkit-transform: translateX(8px);
                transform: translateX(8px);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
}
/* // 左侧弹跳 */
.bounce-in-left {
	-webkit-animation: bounce-in-left 2s both;
	        animation: bounce-in-left 2s both;
}
.bounce-in-left-infinite {
	-webkit-animation: bounce-in-left 2s infinite both;
	        animation: bounce-in-left 2s infinite both;
}

@keyframes bounce-in-left {
    0% {
      -webkit-transform: translateX(-500px);
              transform: translateX(-500px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 0;
    }
    38% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
    55% {
      -webkit-transform: translateX(-68px);
              transform: translateX(-68px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    72% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    81% {
      -webkit-transform: translateX(-28px);
              transform: translateX(-28px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    90% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    95% {
      -webkit-transform: translateX(-8px);
              transform: translateX(-8px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
}

/* // 翻转 */
.flip-in-diag-2-tl {
	-webkit-animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.flip-in-diag-2-tl-infinite {
	-webkit-animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
	        animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
}

@keyframes flip-in-diag-2-tl {
    0% {
      -webkit-transform: rotate3d(-1, 1, 0, 80deg);
              transform: rotate3d(-1, 1, 0, 80deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotate3d(1, 1, 0, 0deg);
              transform: rotate3d(1, 1, 0, 0deg);
      opacity: 1;
    }
}

/* // 从左滑动 */
.slide-in-left {
	-webkit-animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-in-left-infinite {
	-webkit-animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
	        animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
}

@keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-500px);
              transform: translateX(-500px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
}

/* // 在fwd中心滑动 */
.slide-in-fwd-center {
	-webkit-animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-in-fwd-center-infinite {
	-webkit-animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
	        animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
}

@keyframes slide-in-fwd-center {
    0% {
      -webkit-transform: translateZ(-1400px);
              transform: translateZ(-1400px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      opacity: 1;
    }
  }
/* // 左前轮旋转 */
.swirl-in-left-fwd {
	-webkit-animation: swirl-in-left-fwd 2s ease-out both;
	        animation: swirl-in-left-fwd 2s ease-out both;
}
.swirl-in-left-fwd-infinite {
	-webkit-animation: swirl-in-left-fwd 2s ease-out infinite both;
	        animation: swirl-in-left-fwd 2s ease-out infinite both;
}
@keyframes swirl-in-left-fwd {
    0% {
      -webkit-transform: rotate(-540deg) scale(0);
              transform: rotate(-540deg) scale(0);
      -webkit-transform-origin: 0 50%;
              transform-origin: 0 50%;
      opacity: 0;
    }
    100% {
      -webkit-transform: rotate(0) scale(1);
              transform: rotate(0) scale(1);
      -webkit-transform-origin: 0 50%;
              transform-origin: 0 50%;
      opacity: 1;
    }
}
/* // 摇动 */
.shake-bottom {
	-webkit-animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
.shake-bottom-infinite {
	-webkit-animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
	        animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
@keyframes shake-bottom {
    0% {
        -webkit-transform: scale(1) rotate(0deg);
                transform: scale(1) rotate(0deg);
        -webkit-transform-origin: 50%;
                transform-origin: 50%;
    }
    80% {
        -webkit-transform: scale(1.2);
                transform: scale(1.2);
        -webkit-transform-origin: 50%;
                transform-origin: 50%;
    }
    85% {
      -webkit-transform: rotate(-16deg);
              transform: rotate(-16deg);
    }
    95% {
      -webkit-transform: rotate(16deg);
              transform: rotate(16deg);
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-transform-origin: 50%;
                transform-origin: 50%;
    }
  }
/* // 震动 */
.vibrate {
	-webkit-animation: vibrate 0.3s linear both;
	        animation: vibrate 0.3s linear both;
}
.vibrate-infinite {
	-webkit-animation: vibrate 0.3s linear infinite both;
	        animation: vibrate 0.3s linear infinite both;
}

@keyframes vibrate {
    0% {
      -webkit-transform: translate(0);
              transform: translate(0);
    }
    20% {
      -webkit-transform: translate(2px, -2px);
              transform: translate(2px, -2px);
    }
    40% {
      -webkit-transform: translate(2px, 2px);
              transform: translate(2px, 2px);
    }
    60% {
      -webkit-transform: translate(-2px, 2px);
              transform: translate(-2px, 2px);
    }
    80% {
      -webkit-transform: translate(-2px, -2px);
              transform: translate(-2px, -2px);
    }
    100% {
      -webkit-transform: translate(0);
              transform: translate(0);
    }
}
/* // 模糊显示 */
.text-focus-in {
	-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.text-focus-in-infinite {
	-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
	        animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
}

@keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
}
  
/* // 果冻 */
.jello-horizontal {
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
}
.jello-horizontal-infinite {
	-webkit-animation: jello-horizontal 0.9s infinite both;
	        animation: jello-horizontal 0.9s infinite both;
}
@keyframes jello-horizontal {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
              transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
              transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
              transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
              transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
              transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }