/* 左滑入 */
  [data-name='aBounce-In'] {
    -ms-animation: dhBounce-In 1s ease-in;
    -webkit-animation: dhBounce-In 1s ease-in;
    -o-animation: dhBounce-In 1s ease-in;
    animation: dhBounce-In 1s ease-in;
    -ms-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  @-webkit-keyframes dhBounce-In {
    0% {
      opacity: 0;
      -webkit-transform: translate(-200px, 0);
      -ms-transform: translate(-200px, 0);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0);
      -ms-transform: translate(0);
      visibility: visible;
    }
  }

  @-ms-keyframes dhBounce-In {
    0% {
      opacity: 0;
      -webkit-transform: translate(-200px, 0);
      -ms-transform: translate(-200px, 0);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0);
      -ms-transform: translate(0);
      visibility: visible;
    }
  }

  @-o-keyframes dhBounce-In {
    0% {
      opacity: 0;
      -webkit-transform: translate(-200px, 0);
      -ms-transform: translate(-200px, 0);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0);
      -ms-transform: translate(0);
      visibility: visible;
    }
  }

  @keyframes dhBounce-In {
    0% {
      opacity: 0;
      -webkit-transform: translate(-200px, 0);
      -ms-transform: translate(-200px, 0);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0);
      -ms-transform: translate(0);
      visibility: visible;
    }
  }
  /* 右滑入 */
  [data-name='aGlide-In'] {
    -ms-animation: dhGlide-In 1s linear;
    -webkit-animation: dhGlide-In 1s linear;
    -o-animation: dhGlide-In 1s linear;
    animation: dhGlide-In 1s linear;
    -ms-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  @-webkit-keyframes dhGlide-In {
    0% {
      opacity: 0;
      -webkit-transform: translate(200px, 0);
      -ms-transform: translate(200px, 0);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0);
      -ms-transform: translate(0);
      visibility: visible;
    }
  }

  @-ms-keyframes dhGlide-In {
    0% {
      opacity: 0;
      -webkit-transform: translate(200px, 0);
      -ms-transform: translate(200px, 0);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0);
      -ms-transform: translate(0);
      visibility: visible;
    }
  }

  @-o-keyframes dhGlide-In {
    0% {
      opacity: 0;
      -webkit-transform: translate(200px, 0);
      -ms-transform: translate(200px, 0);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0);
      -ms-transform: translate(0);
      visibility: visible;
    }
  }

  @keyframes dhGlide-In {
    0% {
      opacity: 0;
      -webkit-transform: translate(200px, 0);
      -ms-transform: translate(200px, 0);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0);
      -ms-transform: translate(0);
      visibility: visible;
    }
  }
  /* 淡入 */
  [data-name='aFade-In'] {
    -ms-animation: dhFade-In 1s linear;
    -webkit-animation: dhFade-In 1s linear;
    -o-animation: dhFade-In 1s linear;
    animation: dhFade-In 1s linear;
    -ms-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  @-webkit-keyframes dhFade-In {
    0% {
      opacity: 0;
      visibility: visible;
    }

    100% {
      opacity: 1;
      visibility: visible;
    }
  }

  @-ms-keyframes dhFade-In {
    0% {
      opacity: 0;
      visibility: visible;
    }

    100% {
      opacity: 1;
      visibility: visible;
    }
  }

  @-o-keyframes dhFade-In {
    0% {
      opacity: 0;
      visibility: visible;
    }

    100% {
      opacity: 1;
      visibility: visible;
    }
  }

  @keyframes dhFade-In {
    0% {
      opacity: 0;
      visibility: visible;
    }

    100% {
      opacity: 1;
      visibility: visible;
    }
  }
  /* 上滑入 */
  [data-name='topSlide'] {
    -ms-animation: topSlide-in 1s linear;
    -o-animation: topSlide-in 1s linear;
    -webkit-animation: topSlide-in 1s linear;
    animation: topSlide-in 1s linear;
    -ms-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  @-webkit-keyframes topSlide-in {
    0% {
      opacity: 0;
      -webkit-transform: translate(0, -200px);
      -ms-transform: translate(0, -200px);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0);
      -ms-transform: translate(0);
      visibility: visible;
    }
  }

  @-ms-keyframes topSlide-in {
    0% {
      opacity: 0;
      -webkit-transform: translate(0, -200px);
      -ms-transform: translate(0, -200px);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0);
      -ms-transform: translate(0);
      visibility: visible;
    }
  }

  @-o-keyframes topSlide-in {
    0% {
      opacity: 0;
      -webkit-transform: translate(0, -200px);
      -ms-transform: translate(0, -200px);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0);
      -ms-transform: translate(0);
      visibility: visible;
    }
  }

  @keyframes topSlide-in {
    0% {
      opacity: 0;
      -webkit-transform: translate(0, -200px);
      -ms-transform: translate(0, -200px);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0);
      -ms-transform: translate(0);
      visibility: visible;
    }
  }
  /* 下滑入 */
  [data-name='bottomSlide'] {
    -ms-animation: bottomSlide-in 1s linear;
    -o-animation: bottomSlide-in 1s linear;
    -webkit-animation: bottomSlide-in 1s linear;
    animation: bottomSlide-in 1s linear;
    -ms-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  @-webkit-keyframes bottomSlide-in {
    0% {
      opacity: 0;
      -webkit-transform: translate(0, 200px);
      -ms-transform: translate(0, 200px);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0);
      -ms-transform: translate(0);
      visibility: visible;
    }
  }

  @-ms-keyframes bottomSlide-in {
    0% {
      opacity: 0;
      -webkit-transform: translate(0, 200px);
      -ms-transform: translate(0, 200px);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0);
      -ms-transform: translate(0);
      visibility: visible;
    }
  }

  @-o-keyframes bottomSlide-in {
    0% {
      opacity: 0;
      -webkit-transform: translate(0, 200px);
      -ms-transform: translate(0, 200px);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0);
      -ms-transform: translate(0);
      visibility: visible;
    }
  }

  @keyframes bottomSlide-in {
    0% {
      opacity: 0;
      -webkit-transform: translate(0, 200px);
      -ms-transform: translate(0, 200px);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(0);
      -ms-transform: translate(0);
      visibility: visible;
    }
  }
  /* 中心放大 */
  [data-name='aExpand-In'] {
    transform: scale(1);
    -webkit-animation: dhExpand-In 2s ease-out;
    -ms-animation: dhExpand-In 2s ease-out;
    -o-animation: dhExpand-In 2s ease-out;
    animation: dhExpand-In 2s ease-out;
    -ms-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  @-webkit-keyframes dhExpand-In {
    0% {
      transform: scale(0);
      -webkit-transform: scale(0);
      opacity: 0;
      visibility: visible;
    }

    100% {
      transform: scale(1);
      -webkit-transform: scale(1);
      opacity: 1;
      visibility: visible;
    }
  }

  @-ms-keyframes dhExpand-In {
    0% {
      transform: scale(0);
      -webkit-transform: scale(0);
      opacity: 0;
      visibility: visible;
    }

    100% {
      transform: scale(1);
      -webkit-transform: scale(1);
      opacity: 1;
      visibility: visible;
    }
  }

  @-o-keyframes dhExpand-In {
    0% {
      transform: scale(0);
      -webkit-transform: scale(0);
      opacity: 0;
      visibility: visible;
    }

    100% {
      transform: scale(1);
      -webkit-transform: scale(1);
      opacity: 1;
      visibility: visible;
    }
  }

  @keyframes dhExpand-In {
    0% {
      transform: scale(0);
      -webkit-transform: scale(0);
      opacity: 0;
      visibility: visible;
    }

    100% {
      transform: scale(1);
      -webkit-transform: scale(1);
      opacity: 1;
      visibility: visible;
    }
  }
  /* 旋转进入 */
  [data-name='aSpin-In'] {
    transform: scale(1);
    -ms-animation: dhSpin-In 1s ease-in;
    -webkit-animation: dhSpin-In 1s ease-in;
    -o-animation: dhSpin-In 1s ease-in;
    animation: dhSpin-In 1s ease-in;
    -ms-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  @-webkit-keyframes dhSpin-In {
    0% {
      transform: rotate(-540deg) scale(0);
      -ms-transform: rotate(-540deg) scale(0);
      -webkit-transform: rotate(-540deg) scale(0);
      -o-transform: rotate(-540deg) scale(0);
      opacity: 0;
      visibility: visible;
    }

    100% {
      transform: rotate(0) scale(1);
      -ms-transform: rotate(0) scale(1);
      -webkit-transform: rotate(0) scale(1);
      -o-transform: rotate(0) scale(1);
      opacity: 1;
      visibility: visible;
    }
  }

  @-ms-keyframes dhSpin-In {
    0% {
      transform: rotate(-540deg) scale(0);
      -ms-transform: rotate(-540deg) scale(0);
      -webkit-transform: rotate(-540deg) scale(0);
      -o-transform: rotate(-540deg) scale(0);
      opacity: 0;
      visibility: visible;
    }

    100% {
      transform: rotate(0) scale(1);
      -ms-transform: rotate(0) scale(1);
      -webkit-transform: rotate(0) scale(1);
      -o-transform: rotate(0) scale(1);
      opacity: 1;
      visibility: visible;
    }
  }

  @-o-keyframes dhSpin-In {
    0% {
      transform: rotate(-540deg) scale(0);
      -ms-transform: rotate(-540deg) scale(0);
      -webkit-transform: rotate(-540deg) scale(0);
      -o-transform: rotate(-540deg) scale(0);
      opacity: 0;
      visibility: visible;
    }

    100% {
      transform: rotate(0) scale(1);
      -ms-transform: rotate(0) scale(1);
      -webkit-transform: rotate(0) scale(1);
      -o-transform: rotate(0) scale(1);
      opacity: 1;
      visibility: visible;
    }
  }

  @keyframes dhSpin-In {
    0% {
      transform: rotate(-540deg) scale(0);
      -ms-transform: rotate(-540deg) scale(0);
      -webkit-transform: rotate(-540deg) scale(0);
      -o-transform: rotate(-540deg) scale(0);
      opacity: 0;
      visibility: visible;
    }

    100% {
      transform: rotate(0) scale(1);
      -ms-transform: rotate(0) scale(1);
      -webkit-transform: rotate(0) scale(1);
      -o-transform: rotate(0) scale(1);
      opacity: 1;
      visibility: visible;
    }
  }
  /* 右侧飞入 */
  [data-name='aFly-In'] {
    -ms-animation: dhFly-In 1s ease-in-out;
    -webkit-animation: dhFly-In 1s ease-in-out;
    -o-animation: dhFly-In 1s ease-in-out;
    animation: dhFly-In 1s ease-in-out;
    -ms-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  @-ms-keyframes dhFly-In {
    0% {
      opacity: 0;
      -webkit-transform: translateX(200%);
      -ms-transform: translateX(200%);
      -ms-transform: translateX(200%);
      -o-transform: translateX(200%);
      transform: translateX(200%);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0);
      visibility: visible;
    }
  }

  @-webkit-keyframes dhFly-In {
    0% {
      opacity: 0;
      -webkit-transform: translateX(200%);
      -ms-transform: translateX(200%);
      -o-transform: translateX(200%);
      transform: translateX(200%);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0);
      visibility: visible;
    }
  }

  @-o-keyframes dhFly-In {
    0% {
      opacity: 0;
      -webkit-transform: translateX(200%);
      -ms-transform: translateX(200%);
      -o-transform: translateX(200%);
      transform: translateX(200%);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0);
      visibility: visible;
    }
  }

  @keyframes dhFly-In {
    0% {
      opacity: 0;
      -webkit-transform: translateX(200%);
      -ms-transform: translateX(200%);
      -o-transform: translateX(200%);
      transform: translateX(200%);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0);
      visibility: visible;
    }
  }
  /* 左侧飞入 */
  [data-name='aTurn-In'] {
    -webkit-animation: dhTurn-In 1s ease-out;
    -ms-animation: dhTurn-In 1s ease-out;
    -o-animation: dhTurn-In 1s ease-out;
    animation: dhTurn-In 1s ease-out;
    -ms-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  @-ms-keyframes dhTurn-In {
    0% {
      opacity: 0;
      -webkit-transform: rotate(90deg) translate(-300px, -600px) scaleY(0);
      -ms-transform: rotate(90deg) translate(-300px, -600px) scaleY(0);
      transform: rotate(90deg) translate(-300px, -600px) scaleY(0);
      visibility: visible;
    }

    100% {
      -webkit-transform: rotate(0) translate(0) scaleY(1);
      -ms-transform: rotate(0) translate(0) scaleY(1);
      transform: rotate(0) translate(0) scaleY(1);
      opacity: 1;
      visibility: visible;
    }
  }

  @-webkit-keyframes dhTurn-In {
    0% {
      opacity: 0;
      -webkit-transform: rotate(90deg) translate(-300px, -600px) scaleY(0);
      -ms-transform: rotate(90deg) translate(-300px, -600px) scaleY(0);
      transform: rotate(90deg) translate(-300px, -600px) scaleY(0);
      visibility: visible;
    }

    100% {
      -webkit-transform: rotate(0) translate(0) scaleY(1);
      -ms-transform: rotate(0) translate(0) scaleY(1);
      transform: rotate(0) translate(0) scaleY(1);
      opacity: 1;
      visibility: visible;
    }
  }

  @-o-keyframes dhTurn-In {
    0% {
      opacity: 0;
      -webkit-transform: rotate(90deg) translate(-300px, -600px) scaleY(0);
      -ms-transform: rotate(90deg) translate(-300px, -600px) scaleY(0);
      transform: rotate(90deg) translate(-300px, -600px) scaleY(0);
      visibility: visible;
    }

    100% {
      -webkit-transform: rotate(0) translate(0) scaleY(1);
      -ms-transform: rotate(0) translate(0) scaleY(1);
      opacity: 1;
      visibility: visible;
    }
  }

  @keyframes dhTurn-In {
    0% {
      opacity: 0;
      -webkit-transform: rotate(90deg) translate(-300px, -600px) scaleY(0);
      -ms-transform: rotate(90deg) translate(-300px, -600px) scaleY(0);
      transform: rotate(90deg) translate(-300px, -600px) scaleY(0);
      visibility: visible;
    }

    100% {
      -webkit-transform: rotate(0) translate(0) scaleY(1);
      -ms-transform: rotate(0) translate(0) scaleY(1);
      opacity: 1;
      visibility: visible;
    }
  }
  /* 电弧旋入 */
  [data-name='aArc-In'] {
    -webkit-animation: dhArc-In 1s ease-out;
    animation: dhArc-In 1s ease-out;
    -ms-animation: dhArc-In 1s ease-out;
    -o-animation: dhArc-In 1s ease-out;
    -ms-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  @-ms-keyframes dhArc-In {
    0% {
      opacity: 0;
      -webkit-transform: rotateY(180deg) translate(200px, 0) scale(0);
      -ms-transform: rotateY(180deg) translate(200px, 0) scale(0);
      transform: rotateY(180deg) translate(200px, 0) scale(0);
      visibility: visible;
    }

    100% {
      -webkit-transform: rotateY(0) translate(0) scale(1);
      -ms-transform: rotateY(0) translate(0) scale(1);
      transform: rotateY(0) translate(0) scale(1);
      opacity: 1;
      visibility: visible;
    }
  }

  @-webkit-keyframes dhArc-In {
    0% {
      opacity: 0;
      -webkit-transform: rotateY(180deg) translate(200px, 0) scale(0);
      -ms-transform: rotateY(180deg) translate(200px, 0) scale(0);
      transform: rotateY(180deg) translate(200px, 0) scale(0);
      visibility: visible;
    }

    100% {
      -webkit-transform: rotateY(0) translate(0) scale(1);
      -ms-transform: rotateY(0) translate(0) scale(1);
      transform: rotateY(0) translate(0) scale(1);
      opacity: 1;
      visibility: visible;
    }
  }

  @-o-keyframes dhArc-In {
    0% {
      opacity: 0;
      -webkit-transform: rotateY(180deg) translate(200px, 0) scale(0);
      -ms-transform: rotateY(180deg) translate(200px, 0) scale(0);
      transform: rotateY(180deg) translate(200px, 0) scale(0);
      visibility: visible;
    }

    100% {
      -webkit-transform: rotateY(0) translate(0) scale(1);
      -ms-transform: rotateY(0) translate(0) scale(1);
      transform: rotateY(0) translate(0) scale(1);
      opacity: 1;
      visibility: visible;
    }
  }

  @keyframes dhArc-In {
    0% {
      opacity: 0;
      -webkit-transform: rotateY(180deg) translate(200px, 0) scale(0);
      -ms-transform: rotateY(180deg) translate(200px, 0) scale(0);
      transform: rotateY(180deg) translate(200px, 0) scale(0);
      visibility: visible;
    }

    100% {
      -webkit-transform: rotateY(0) translate(0) scale(1);
      -ms-transform: rotateY(0) translate(0) scale(1);
      transform: rotateY(0) translate(0) scale(1);
      opacity: 1;
      visibility: visible;
    }
  }
  /* 吸入 */
  [data-name='aPuff-In'] {
    -webkit-animation: dhPuff-In 1s ease-out;
    -ms-animation: dhPuff-In 1s ease-out;
    -o-animation: dhPuff-In 1s ease-out;
    animation: dhPuff-In 1s ease-out;
    -ms-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  @-ms-keyframes dhPuff-In {
    0% {
      opacity: 0;
      -webkit-transform: scale(5);
      -ms-transform: scale(5);
      transform: scale(5);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      visibility: visible;
    }
  }

  @-webkit-keyframes dhPuff-In {
    0% {
      opacity: 0;
      -webkit-transform: scale(5);
      -ms-transform: scale(5);
      transform: scale(5);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      visibility: visible;
    }
  }

  @-o-keyframes dhPuff-In {
    0% {
      opacity: 0;
      -webkit-transform: scale(5);
      -ms-transform: scale(5);
      transform: scale(5);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      visibility: visible;
    }
  }

  @keyframes dhPuff-In {
    0% {
      opacity: 0;
      -webkit-transform: scale(5);
      -ms-transform: scale(5);
      transform: scale(5);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      visibility: visible;
    }
  }
  /* 折叠打开 */
  [data-name='aFold-In'] {
    -webkit-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-animation: dhFold-In 1s ease-in-out;
    -ms-animation: dhFold-In 1s ease-in-out;
    -o-animation: dhFold-In 1s ease-in-out;
    animation: dhFold-In 1s ease-in-out;
    -ms-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  @-ms-keyframes dhFold-In {
    0% {
      opacity: 0;
      -webkit-transform: rotateY(90deg);
      -ms-transform: rotateY(90deg);
      -o-transform: rotateY(90deg);
      transform: rotateY(90deg);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: rotateY(0);
      -ms-transform: rotateY(0);
      -o-transform: rotateY(0);
      transform: rotateY(0);
      visibility: visible;
    }
  }

  @-webkit-keyframes dhFold-In {
    0% {
      opacity: 0;
      -webkit-transform: rotateY(90deg);
      -ms-transform: rotateY(90deg);
      -o-transform: rotateY(90deg);
      transform: rotateY(90deg);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: rotateY(0);
      -ms-transform: rotateY(0);
      -o-transform: rotateY(0);
      transform: rotateY(0);
      visibility: visible;
    }
  }

  @-o-keyframes dhFold-In {
    0% {
      opacity: 0;
      -webkit-transform: rotateY(90deg);
      -ms-transform: rotateY(90deg);
      -o-transform: rotateY(90deg);
      transform: rotateY(90deg);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: rotateY(0);
      -ms-transform: rotateY(0);
      -o-transform: rotateY(0);
      transform: rotateY(0);
      visibility: visible;
    }
  }

  @keyframes dhFold-In {
    0% {
      opacity: 0;
      -webkit-transform: rotateY(90deg);
      -ms-transform: rotateY(90deg);
      -o-transform: rotateY(90deg);
      transform: rotateY(90deg);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: rotateY(0);
      -ms-transform: rotateY(0);
      -o-transform: rotateY(0);
      transform: rotateY(0);
      visibility: visible;
    }
  }
  /* 旋转 */
  [data-name='aFlip-In'] {
    -webkit-animation: dhFlip-In 1s ease-in-out;
    -ms-animation: dhFlip-In 1s ease-in-out;
    animation: dhFlip-In 1s ease-in-out;
    -ms-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  @-ms-keyframes dhFlip-In {
    0% {
      opacity: 0;
      -ms-transform: rotateY(0);
      transform: rotateY(0);
      visibility: visible;
    }

    50% {
      opacity: 0.5;
      -ms-transform: rotateY(180deg);
      transform: rotateY(180deg);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -ms-transform: rotateY(360deg);
      transform: rotateY(360deg);
      visibility: visible;
    }
  }

  @-webkit-keyframes dhFlip-In {
    0% {
      opacity: 0;
      -webkit-transform: rotateY(0);
      transform: rotateY(0);
      visibility: visible;
    }

    50% {
      opacity: 0.5;
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: rotateY(360deg);
      transform: rotateY(360deg);
      visibility: visible;
    }
  }

  @-o-keyframes dhFlip-In {
    0% {
      opacity: 0;
      -o-transform: rotateY(0);
      transform: rotateY(0);
      visibility: visible;
    }

    50% {
      opacity: 0.5;
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -o-transform: rotateY(360deg);
      transform: rotateY(360deg);
      visibility: visible;
    }
  }

  @keyframes dhFlip-In {
    0% {
      opacity: 0;
      -webkit-transform: rotateY(0);
      -ms-transform: rotateY(0);
      -o-transform: rotateY(0);
      transform: rotateY(0);
      visibility: visible;
    }

    50% {
      opacity: 0.5;
      -webkit-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: rotateY(360deg);
      -ms-transform: rotateY(360deg);
      -o-transform: rotateY(360deg);
      transform: rotateY(360deg);
      visibility: visible;
    }
  }
  /* 揭示 */
  [data-name='aReveal'] {
    -webkit-perspective: 1500px;
    -ms-perspective: 900px;
    perspective: 900px;
    transform-origin: 0 80px 0;
    -webkit-animation: dhReveal 1s ease-out;
    -ms-animation: dhReveal 1s ease-out;
    -o-animation: dhReveal 1s ease-out;
    animation: dhReveal 1s ease-out;
    -ms-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  @-ms-keyframes dhReveal {
    0% {
      opacity: 0;
      -webkit-transform: scale(0, 1);
      -ms-transform: scale(0, 1);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
      visibility: visible;
    }
  }

  @-webkit-keyframes dhReveal {
    0% {
      opacity: 0;
      -webkit-transform: scale(0, 1);
      -ms-transform: scale(0, 1);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
      visibility: visible;
    }
  }

  @-o-keyframes dhReveal {
    0% {
      opacity: 0;
      -webkit-transform: scale(0, 1);
      -ms-transform: scale(0, 1);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
      visibility: visible;
    }
  }

  @keyframes dhReveal {
    0% {
      opacity: 0;
      -webkit-transform: scale(0, 1);
      -ms-transform: scale(0, 1);
      visibility: visible;
    }

    100% {
      opacity: 1;
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
      visibility: visible;
    }
  }