/* 淡入 */
/* -webkit-:谷歌、苹果浏览器 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
    visibility: hidden
  }

  to {
    opacity: 1;
    visibility: visible
  }
}

/* -ms-:IE浏览器 */
@-ms-keyframes fade-in {
  0% {
    opacity: 0;
    visibility: hidden
  }

  to {
    opacity: 1;
    visibility: visible
  }
}

/* -moz-:火狐浏览器 */
@-moz-keyframes fade-in {
  0% {
    opacity: 0;
    visibility: hidden
  }

  to {
    opacity: 1;
    visibility: visible
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
    visibility: hidden
  }

  to {
    opacity: 1;
    visibility: visible
  }
}

/* end 淡入 */

/* 淡出 */
/* -webkit-:谷歌、苹果浏览器 */
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
    visibility: visible
  }

  to {
    opacity: 0;
    visibility: hidden
  }
}

/* -ms-:IE浏览器 */
@-ms-keyframes fade-out {
  0% {
    opacity: 1;
    visibility: visible
  }

  to {
    opacity: 0;
    visibility: hidden
  }
}

/* -moz-:火狐浏览器 */
@-moz-keyframes fade-out {
  0% {
    opacity: 1;
    visibility: visible
  }

  to {
    opacity: 0;
    visibility: hidden
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
    visibility: visible
  }

  to {
    opacity: 0;
    visibility: hidden
  }
}

/* end 淡出 */

/* 从右侧滑出 */
/* -webkit-:谷歌、苹果浏览器 */
@-webkit-keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(60px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

/* -ms-:IE浏览器 */
@-ms-keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(60px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

/* -moz-:火狐浏览器 */
@-moz-keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(60px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

/* -o-:欧朋浏览器 */
@-o-keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(60px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

@keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(60px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

/* end 从右侧滑出 */


/* 从左侧滑出 */
/* -webkit-:谷歌、苹果浏览器 */
@-webkit-keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-60px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

/* -ms-:IE浏览器 */
@-ms-keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-60px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

/* -moz-:火狐浏览器 */
@-moz-keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-60px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

/* -o-:欧朋浏览器 */
@-o-keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-60px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-60px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

/* end 从左侧滑出 */





#downloadPopup {
  display: flex;
  visibility: hidden;
  animation: .6s ease .3s both;
}

#downloadPopup[data-show] {
  animation-name: slide-in-right;
}

#downloadPopup[data-hidden] {
  animation-name: fade-out;
}