xo_user_client/common/css/animation.css

/*
* 垂直放大
*/
.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);
    }
  }