[data-scroll] {
  opacity: 0;
  transition: all 1s;
}
[data-scroll="in"] {
  opacity: 1;
}
[data-scroll="out"] {
  opacity: 0;
}
[data-scroll][data-left] {
	transform:translateX(-5rem);
}
[data-scroll="in"][data-left] {
	transform:translateX(0);
}
[data-scroll][data-right] {
	transform:translateX(5rem);
}
[data-scroll="in"][data-right] {
	transform:translateX(0);
}
[data-scroll][data-toUp] {
	transform:translateY(5rem);	
}
[data-scroll="in"][data-toUp] {
	transform:translateY(0);	
}
[data-scroll][data-toDown] {
	transform:translateY(-5rem);	
}
[data-scroll="in"][data-toDown] {
	transform:translateY(0);	
}