.ui-anim {
    width: 100%;
    position: relative;
    border: 1px solid red;
}

.anim-upToDown {
  opacity: 0;
  transform-origin: center center;
}
.anim-upToDown.active {
  animation-name: upToDown;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}
.anim-downToUp {
  opacity: 0;
  transform-origin: bottom center;


  /* opacity: 0; */
  /* transform: scale(.5) translateY(-50%); */

}
.anim-downToUp.active {
  animation-name: downToUp;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}





.anim-delay-0  { animation-delay: 0.0s }
.anim-delay-1  { animation-delay: 0.1s }
.anim-delay-2  { animation-delay: 0.2s }
.anim-delay-3  { animation-delay: 0.3s }
.anim-delay-4  { animation-delay: 0.4s }
.anim-delay-5  { animation-delay: 0.5s }
.anim-delay-6  { animation-delay: 0.6s }
.anim-delay-7  { animation-delay: 0.7s }
.anim-delay-8  { animation-delay: 0.8s }
.anim-delay-9  { animation-delay: 0.9s }
.anim-delay-10 { animation-delay: 1.0s }
.anim-delay-11 { animation-delay: 1.1s }
.anim-delay-12 { animation-delay: 1.2s }
.anim-delay-13 { animation-delay: 1.3s }
.anim-delay-14 { animation-delay: 1.4s }
.anim-delay-15 { animation-delay: 1.5s }
.anim-delay-16 { animation-delay: 1.6s }
.anim-delay-17 { animation-delay: 1.7s }
.anim-delay-18 { animation-delay: 1.8s }
.anim-delay-19 { animation-delay: 1.9s }
.anim-delay-20 { animation-delay: 2.0s }
.anim-delay-21 { animation-delay: 2.1s }
.anim-delay-22 { animation-delay: 2.2s }
.anim-delay-23 { animation-delay: 2.3s }
.anim-delay-24 { animation-delay: 2.4s }
.anim-delay-25 { animation-delay: 2.5s }
.anim-delay-26 { animation-delay: 2.6s }
.anim-delay-27 { animation-delay: 2.7s }
.anim-delay-28 { animation-delay: 2.8s }
.anim-delay-29 { animation-delay: 2.9s }
.anim-delay-30 { animation-delay: 3.0s }


@-webkit-keyframes upToDown {
  0% {
    opacity: 0.5;
    transform: scale(1) translateY(-150px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes upToDown {
  0% {
    opacity: 0.5;
    transform: scale(1) translateY(-150px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@-webkit-keyframes downToUp {
  0% {
    opacity: 0;
    transform: scale(.1) translateY(150px);
  }
  90% {
    opacity: 1;
    transform: scale(1.01) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes downToUp {
  0% {
    opacity: 0;
    transform: translateY(150px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}