.bc-motion {
  position: relative;
  transition-property: all;

  &.motion {
    &-left {
      transform: translateX(-10%);
    }

    &-right {
      transform: translateX(10%);
    }

    &-top {
      transform: translateY(-10%);
    }

    &-bottom {
      transform: translateY(10%);
    }

    &-fade {
      opacity: 0;
    }

    &-zoom {
      transform: scale(0);
    }

    &-flipX {
      transform: rotateY(90deg);
    }

    &-flipY {
      transform: rotateX(90deg);
    }

    &-ready {
      opacity: 1;
      transform: scale(1);
    }
  }
}