@keyframes flipInX {
    from {
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      animation-timing-function: ease-in;
      opacity: 0;
    }
  
    40% {
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      animation-timing-function: ease-in;
    }
  
    60% {
      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      opacity: 1;
    }
  
    80% {
      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
  
    to {
      transform: perspective(400px);
    }
  }
  
  .flipInX {
    backface-visibility: visible !important;
    animation-name: flipInX;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    // 循环
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }