Update motion classes to support in/out direction

[gakimball]

The way the current motion mixins are implemented doesn't account for distinct in/out states. This is because all of the mixins transition to a null position, like so:

.slideToRight {
  transform: translateX(-100%);
  &.motion {
    transform: translateX(0%);
  }
}

This works for in animations, where you're transitioning to the default state, but doesn't work for out animations, where you're transitioning away from the default state.

To correct this, each transition mixin needs a $direction property, which can be set to in or out. If the direction is out, then the mixin should start at the default state (e.g., opacity: 1, transform: translateX(0)) and transition to another state when the motion classes are added.