.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);
}

@media only screen and (max-width:1100px)  {
  .animation-element.slide-end {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  .animation-element.slide-start {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}