.animation-element {
  position: relative;
  opacity: 0;
  -moz-transition: all 700ms ease-in-out;
  -webkit-transition: all 700ms ease-in-out;
  -o-transition: all 700ms ease-in-out;
  transition: all 700ms ease-in-out;
}

.animation-element.from-bottom {  
  -moz-transform: translate3d(0px, 50px, 0px);
  -webkit-transform: translate3d(0px, 50px, 0px);
  -o-transform: translate(0px, 50px);
  -ms-transform: translate(0px, 50px);
  transform: translate3d(0px, 50px, 0px);
}

.animation-element.from-left {  
  -moz-transform: translate3d(-50px, 0px, 0px);
  -webkit-transform: translate3d(-50px, 0px, 0px);
  -o-transform: translate(-50px, 0px);
  -ms-transform: translate(-50px, 0px);
  transform: translate3d(-50px, 0px, 0px);
}

.animation-element.from-right {  
  -moz-transform: translate3d(50px, 0px, 0px);
  -webkit-transform: translate3d(50px, 0px, 0px);
  -o-transform: translate(50px, 0px);
  -ms-transform: translate(50px, 0px);
  transform: translate3d(50px, 0px, 0px);
}

.animation-element.slight-rotate {
  -moz-transform: translate3d(0px, 250px, 0px) rotate(15deg);
  -webkit-transform: translate3d(0px, 250px, 0px) rotate(15deg);
  -o-transform: translate(0px, 250px) rotate(15deg);
  -ms-transform: translate(0px, 250px) rotate(15deg);
  transform: translate3d(0px, 250px, 0px) rotate(15deg);
}

.animation-element.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px) rotate(0deg);
  -webkit-transform: translate3d(0px, 0px, 0px) rotate(0deg);
  -o-transform: translate(0px, 0px) rotate(0deg);
  -ms-transform: translate(0px, 0px) rotate(0deg);
  transform: translate3d(0px, 0px, 0px) rotate(0deg);
}