.anim-el {
  opacity: 0;
  transition-timing-function: ease-in-out;
}

.anim-el[data-animation="slide-up"] {
  transform: translateY(100px);
}
.anim-el[data-animation="slide-down"] {
  transform: translateY(-100px);
}
.anim-el[data-animation="slide-left"] {
  transform: translateX(-100px);
}
.anim-el[data-animation="slide-right"] {
  transform: translateX(100px);
}
.anim-el.slide-up,
.anim-el.slide-down,
.anim-el.slide-left,
.anim-el.slide-right {
  opacity: 1;
  transform: translateY(0) translateX(0);
  transition-property: opacity, transform;
}

.anim-el.fade-in {
  opacity: 1;
  transition-property: opacity;
}