[data-show=on-scroll] {

 opacity: 0;

 -webkit-transform: translate(0, 90px);

 -ms-transform: translate(0, 90px);

 transform: translate(0, 90px);

 -webkit-transition: opacity .8s .3s, -webkit-transform .8s ease;

 transition: opacity .8s .3s, transform .8s ease;

}

.in-view { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }



[data-show=on-scroll2] {

 opacity: 0;

 -webkit-transform: translate(-90px, 0);

 -ms-transform: translate(-90px, 0);

 transform: translate(-90px, 0);

 -webkit-transition: opacity .8s .3s, -webkit-transform .8s ease;

 transition: opacity .8s .3s, transform .8s ease;

}

.in-view { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }



[data-show=on-scroll3] {

 opacity: 0;

 -webkit-transform: translate(90px, 0);

 -ms-transform: translate(90px, 0);

 transform: translate(90px, 0);

 -webkit-transition: opacity .8s .3s, -webkit-transform .8s ease;

 transition: opacity .8s .3s, transform .8s ease;

}

.in-view { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }



[data-show=on-scroll4] {

 opacity: 0;

 -moz-transform: translate(0, 0px); -webkit-transform: translate(0, -0px); -o-transform: translate(0, 0px); -ms-transform: translate(0, 0px); transform: translate(0, 0px);

 -webkit-transition: opacity .8s .3s, -webkit-transform .8s ease;

 transition: opacity .8s .3s, transform .8s ease;

}

.in-view { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }