@keyframes x-kf-fade-in {
  0% {opacity: 0;}/*初始状态 透明度为0*/
  40% {opacity: 0.4;}/*过渡状态 透明度为0*/
  100% {opacity: 1;}/*结束状态 透明度为1*/
}
@-webkit-keyframes x-kf-fade-in {/*针对webkit内核*/
  0% {opacity: 0;}
  40% {opacity: 0.4;}
  100% {opacity: 1;}
}

@-webkit-keyframes x-kf-fade-in-up {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes x-kf-fade-in-up {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.x-anim-fade-in {
  animation: x-kf-fade-in;/*动画名称*/
  animation-duration: .5s;/*动画持续时间*/
  -webkit-animation: x-kf-fade-in .5s;/*针对webkit内核*/
}

.x-anim-fade-in-up {
  animation: x-kf-fade-in-up;/*动画名称*/
  animation-duration: .5s;/*动画持续时间*/
  -webkit-animation: x-kf-fade-in-up .5s;/*针对webkit内核*/
}
// Blink
.x-animation-blink {
  animation: x-kf-blink 1s steps(5, start) infinite;
}

@keyframes x-kf-blink {
  to {
    visibility: hidden;
  }
}