.next_box{
  animation: topTobottom 2s ease-in-out infinite;
}
.first,.second{
  opacity:0;
}
@keyframes topTobottom {
  100%{
      transform: translate(0, 0);
  }
  50%{
      transform: translate(0, 1rem);
  }
}

.animate1 {
  -webkit-animation: fadetop 1s ease both;
  animation: fadetop 1s ease both;
  will-change: transform;
}
.animate2 {
  -webkit-animation: fadetop 1s ease both;
  animation: fadetop 1s ease both;
  will-change: transform;
}
/*下边进入*/
@keyframes fadetop {
  0% {
      opacity: 0;
      transform: translate3d(0, 200%, 0);
  }
  100% {
      opacity: 1;
      transform: translate3d(0%, 0%, 0);
  }
}

@-webkit-keyframes fadetop {
  0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 200%, 0);
  }
  100% {
      opacity: 1;
      -webkit-transform: translate3d(0%, 0%, 0);
  }
}