.animation-top {
  opacity: 0.2;
  transform: translateY(40px);
  transition: all 800ms ease-in-out;
}

.animation-top.active {
  opacity: 1;
  transform: translateY(0);
}
.animation-left{
    opacity: 0;
    transform: translateX(-100px);
    transition: all 800ms ease-in-out;
}
.animation-left.active{
    opacity: 1;
    transform: translateX(0px);
}
.animation-right{
    opacity: 0;
    transform: translateX(100px);
    transition: all 800ms ease-in-out;
}
.animation-right.active{
    opacity: 1;
    transform: translateX(0px);
}

.animation-show{
    scale: 0.9;
    opacity: 0;
    transition: all 800ms ease-in-out;
}
.animation-show.active{
    scale: 1;
    opacity: 1;
}