.block { 

  height:300px;

  width:300px;

  background-color:orange;

  margin-top:50px;

}



.animBlock {

  opacity: 0;

  filter: alpha(opacity=0);

  position: relative;

  -webkit-transition: all .55s ease-in;

  -moz-transition: all .55s ease-in;

  -ms-transition: all .55s ease-in;

  -o-transition: all .55s ease-in;

  transition: all .55s ease-in;

}

.animBlock[data-position="left"] { left: -20%; }

.animBlock[data-position="right"] { right: -20%; }

.animBlock[data-position="top"] { top: -20%;}

.animBlock[data-position="bottom"] { bottom: -20%;}



.animBlock[data-position="left"].viewed {

  left: 0%;

  opacity: 1;

  filter: alpha(opacity=100);

}

.animBlock[data-position="right"].viewed {

  right: 0%;

  opacity: 1;

  filter: alpha(opacity=100);

}

.animBlock[data-position="top"].viewed {

  top: 0%;

  opacity: 1;

  filter: alpha(opacity=100);

}

.animBlock[data-position="bottom"].viewed {

  bottom: 0%;

  opacity: 1;

  filter: alpha(opacity=100);

}