:root {
  /* straight movements */
  --fade-move: 14px;

  /* diagonal movements */
  --fade-diagonal-move: 20px;
}

/* === FADE IN === */
@keyframes fadeInUp {
  from {opacity:0; transform:translate3d(0, var(--fade-move), 0)}
  to   {opacity:1; transform:none}
}
@keyframes fadeInDown {
  from {opacity:0; transform:translate3d(0, calc(-1 * var(--fade-move)), 0)}
  to   {opacity:1; transform:none}
}
@keyframes fadeInLeft {
  from {opacity:0; transform:translate3d(calc(-1 * var(--fade-move)), 0, 0)}
  to   {opacity:1; transform:none}
}
@keyframes fadeInRight {
  from {opacity:0; transform:translate3d(var(--fade-move), 0, 0)}
  to   {opacity:1; transform:none}
}

/* === FADE OUT === */
@keyframes fadeOutUp {
  from {opacity:1; transform:none}
  to   {opacity:0; transform:translate3d(0, calc(-1 * var(--fade-move)), 0)}
}
@keyframes fadeOutDown {
  from {opacity:1; transform:none}
  to   {opacity:0; transform:translate3d(0, var(--fade-move), 0)}
}
@keyframes fadeOutLeft {
  from {opacity:1; transform:none}
  to   {opacity:0; transform:translate3d(calc(-1 * var(--fade-move)), 0, 0)}
}
@keyframes fadeOutRight {
  from {opacity:1; transform:none}
  to   {opacity:0; transform:translate3d(var(--fade-move), 0, 0)}
}

/* === FADE IN (DIAGONALS) === */
@keyframes fadeInTopLeft {
  from {
    opacity:0;
    transform:translate3d(calc(-1 * var(--fade-diagonal-move)), calc(-1 * var(--fade-diagonal-move)), 0);
  }
  to {opacity:1; transform:none}
}
@keyframes fadeInTopRight {
  from {
    opacity:0;
    transform:translate3d(var(--fade-diagonal-move), calc(-1 * var(--fade-diagonal-move)), 0);
  }
  to {opacity:1; transform:none}
}
@keyframes fadeInBottomLeft {
  from {
    opacity:0;
    transform:translate3d(calc(-1 * var(--fade-diagonal-move)), var(--fade-diagonal-move), 0);
  }
  to {opacity:1; transform:none}
}
@keyframes fadeInBottomRight {
  from {
    opacity:0;
    transform:translate3d(var(--fade-diagonal-move), var(--fade-diagonal-move), 0);
  }
  to {opacity:1; transform:none}
}

/* === FADE OUT (DIAGONALS) === */
@keyframes fadeOutTopLeft {
  from {opacity:1; transform:none}
  to {
    opacity:0;
    transform:translate3d(calc(-1 * var(--fade-diagonal-move)), calc(-1 * var(--fade-diagonal-move)), 0);
  }
}
@keyframes fadeOutTopRight {
  from {opacity:1; transform:none}
  to {
    opacity:0;
    transform:translate3d(var(--fade-diagonal-move), calc(-1 * var(--fade-diagonal-move)), 0);
  }
}
@keyframes fadeOutBottomLeft {
  from {opacity:1; transform:none}
  to {
    opacity:0;
    transform:translate3d(calc(-1 * var(--fade-diagonal-move)), var(--fade-diagonal-move), 0);
  }
}
@keyframes fadeOutBottomRight {
  from {opacity:1; transform:none}
  to {
    opacity:0;
    transform:translate3d(var(--fade-diagonal-move), var(--fade-diagonal-move), 0);
  }
}