[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);
}