.animation-element {
  position: relative;
}
.animation-element.slide-top {
    opacity: 0;
    transition: all 1000ms ease;
    transform: translate(0px, -50px);
  }
  .animation-element.slide-top.in-view {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  
  .animation-element.slide-bottom {
    opacity: 0;
    transition: all 1000ms ease;
    transform: translate(0px, 50px);
  }
  .animation-element.slide-bottom.in-view {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  
  .animation-element.slide-end {
    opacity: 0;
    transition: all 1000ms ease;
    transform: translate(50px, 0px);
  }
  .animation-element.slide-end.in-view {
    opacity: 1;
    transform: translate(0px, 0px);
  }

  .animation-element.slide-start {
    opacity: 0;
    transition: all 1000ms ease;
    transform: translate(-50px, 0px);
  }
  .animation-element.slide-start.in-view {
    opacity: 1;
    transform: translate(0px, 0px);
  }