.effect {
  opacity: 0;
  transition: all .5s ease;

}

.effect.show {
  opacity: 1;
  transform: none;
}

.effect--lr {
  transform: translate(-100px, 0);
}

.effect--rl {
  transform: translate(100px, 0);
}

.effect--up {
  transform: translate(0, 100px);
}

.effect--down {
  transform: translate(0, -100px);
}

.effect--scaleUp {
  transform: scale(.5);
}

.effect--scaleDown {
  transform: scale(1.5);
}

.effect--rotateL {
  transform: rotate(180deg);
}

.effect--rotateR {
  transform: rotate(-180deg);
}