@-webkit-keyframes first-message {
  0% {
    -webkit-transform: translate3d(0, 48px, 0);
    transform: translate3d(0, 48px, 0);
    opacity: 0;
  }
  20% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  40% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  60% {
    -webkit-transform: translate3d(0, -48px, 0);
    transform: translate3d(0, -48px, 0);
    opacity: 0;
  }
  80% {
    -webkit-transform: translate3d(0, -48px, 0);
    transform: translate3d(0, -48px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, -48px, 0);
    transform: translate3d(0, -48px, 0);
    opacity: 0;
  }
}
@keyframes first-message {
  0% {
    -webkit-transform: translate3d(0, 48px, 0);
    transform: translate3d(0, 48px, 0);
    opacity: 0;
  }
  20% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  40% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  60% {
    -webkit-transform: translate3d(0, -48px, 0);
    transform: translate3d(0, -48px, 0);
    opacity: 0;
  }
  80% {
    -webkit-transform: translate3d(0, -48px, 0);
    transform: translate3d(0, -48px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, -48px, 0);
    transform: translate3d(0, -48px, 0);
    opacity: 0;
  }
}
@-webkit-keyframes second-message {
  0% {
    -webkit-transform: translate3d(0, -48px, 0);
    transform: translate3d(0, -48px, 0);
    opacity: 0;
  }
  20% {
    -webkit-transform: translate3d(0, -48px, 0);
    transform: translate3d(0, -48px, 0);
    opacity: 0;
  }
  40% {
    -webkit-transform: translate3d(0, 48px, 0);
    transform: translate3d(0, 48px, 0);
    opacity: 0;
  }
  60% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  80% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -48px, 0);
    transform: translate3d(0, -48px, 0);
  }
}
@keyframes second-message {
  0% {
    -webkit-transform: translate3d(0, -48px, 0);
    transform: translate3d(0, -48px, 0);
    opacity: 0;
  }
  20% {
    -webkit-transform: translate3d(0, -48px, 0);
    transform: translate3d(0, -48px, 0);
    opacity: 0;
  }
  40% {
    -webkit-transform: translate3d(0, 48px, 0);
    transform: translate3d(0, 48px, 0);
    opacity: 0;
  }
  60% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  80% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -48px, 0);
    transform: translate3d(0, -48px, 0);
  }
}