.animation-element {
    opacity: 0;
    position: relative;
}

/*** SLIDE LEFT ***/
.animation-element.slide-left {
    opacity: 0;
    -moz-transition: all 500ms linear;
    -webkit-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    transition: all 500ms linear;
    -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.slide-left.in-view {
    opacity: 1;
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}
/*** END of SLIDE LEFT ***/


/*** SLIDE RIGHT ***/
.animation-element.slide-right {
    opacity: 0;
    -moz-transition: all 500ms linear;
    -webkit-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    transition: all 500ms linear;
    -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.slide-right.in-view {
    opacity: 1;
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}
/*** END of SLIDE LEFT ***/

/*** SLIDE Up ***/
.animation-element.slide-up {
    opacity: 0;
    -moz-transition: all 500ms linear;
    -webkit-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    transition: all 500ms linear;
    -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.slide-up.in-view {
    opacity: 1;
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}
/*** END of SLIDE LEFT ***/


/*** FADE IN ***/
.animation-element.fade-in {
    opacity: 0;
    -moz-transition: all 500ms linear;
    -webkit-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    transition: all 500ms linear;
}
.animation-element.fade-in.in-view {
    opacity: 1;
}
/*** END of SLIDE LEFT ***/