// ---------------------------------------------------------------------------
@mixin flip {
  @keyframes flip {
    0% {
      transform: perspective(400px) rotateY(0);
      @animation-timing-function ease-out;
    }
    40% {
      transform: perspective(400px) translateZ(150px) rotateY(170deg);
      @animation-timing-function ease-out;
    }
    50% {
      transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
      @animation-timing-function ease-in;
    }
    80% {
      transform: perspective(400px) rotateY(360deg) scale(0.95);
      @animation-timing-function ease-in;
    }
    100% {
      transform: perspective(400px) scale(1);
      @animation-timing-function ease-in;
    }
  }
}

// ---------------------------------------------------------------------------
@mixin flipInX {
  @keyframes flipInX {
    0% {
      transform: perspective(400px) rotateX(90deg);
      opacity: 0;
    }
    40% {
      transform: perspective(400px) rotateX(-10deg);
    }
    70% {
      transform: perspective(400px) rotateX(10deg);
    }
    100% {
      transform: perspective(400px) rotateX(0deg);
      opacity: 1;
    }
  }
}

// ---------------------------------------------------------------------------
@mixin flipOutX {
  @keyframes flipOutX {
    0% {
      transform: perspective(400px) rotateX(0deg);
      opacity: 1;
    }
    100% {
      transform: perspective(400px) rotateX(90deg);
      opacity: 0;
    }
  }
}

// ---------------------------------------------------------------------------
@mixin flipInY {
  @keyframes flipInY {
    0% {
      transform: perspective(400px) rotateY(90deg);
      opacity: 0;
    }
    40% {
      transform: perspective(400px) rotateY(-10deg);
    }
    70% {
      transform: perspective(400px) rotateY(10deg);
    }
    100% {
      transform: perspective(400px) rotateY(0deg);
      opacity: 1;
    }
  }
}

// ---------------------------------------------------------------------------
@mixin flipOutY {
  @keyframes flipOutY {
    0% {
      transform: perspective(400px) rotateY(0deg);
      opacity: 1;
    }
    100% {
      transform: perspective(400px) rotateY(90deg);
      opacity: 0;
    }
  }
}