[anim-effect=top] {
  transform: translate(0, -1.2rem);
  opacity: 0;
  transition: transform ease 0.5s, opacity ease 0.5s;
}
[anim-effect=top].anim-reveal {
  transform: translate(0, 0);
  opacity: 1;
}

[anim-effect=bottom] {
  transform: translate(0, 1.2rem);
  opacity: 0;
  transition: transform ease 0.5s, opacity ease 0.5s;
}
[anim-effect=bottom].anim-reveal {
  transform: translate(0, 0);
  opacity: 1;
}

[anim-effect=right] {
  transform: translate(100%, 0);
  opacity: 0;
  transition: 0.5s transform ease, opacity ease 0.5s;
}
[anim-effect=right].anim-reveal {
  transform: translate(0, 0);
  opacity: 1;
}

[anim-effect=left] {
  transform: translate(-100%, 0);
  opacity: 0;
  transition: 0.5s transform ease, opacity ease 0.5s;
}
[anim-effect=left].anim-reveal {
  transform: translate(0, 0);
  opacity: 1;
}

[anim-effect=fade] {
  opacity: 0;
  transition: 1s all ease 0.3s;
}
[anim-effect=fade].anim-reveal {
  opacity: 1;
}