/**
 * Module: Flip X
 * Filename: ca__FlipX.css
 */

.flipX {
  animation-name: flipX;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}

@keyframes flipX {
  from {
    transform: perspective(600px) rotateX(-180deg);
    opacity: 0;
  }

  to {
    transform: perspective(600px) rotateX(-360deg);
  }
}

.flipXZoomIn {
  animation-name: flipXZoomIn;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}

@keyframes flipXZoomIn {
  0% {
    transform: perspective(600px) rotateX(0deg) scale(1);
    animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(600px) rotateX(-180deg) scale(1.8);
    animation-timing-function: ease-out;
  }

  80% {
    transform: perspective(600px) rotateX(-360deg) scale(0.7);
    animation-timing-function: ease-in;
  }

  100% {
    transform: scale(1);
  }
}

.flipXZoomOut {
  animation-name: flipXZoomOut;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}

@keyframes flipXZoomOut {
  0% {
    transform: perspective(600px) rotateX(0deg) scale(1);
    animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(600px) rotateX(180deg) scale(1.8);
    animation-timing-function: ease-out;
  }

  80% {
    transform: perspective(600px) rotateX(360deg) scale(0.7);
    animation-timing-function: ease-in;
  }

  100% {
    transform: scale(1);
  }
}

.flipOutLeft {
  animation-name: flipOutLeft;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}

@keyframes flipOutLeft {
  0% {
    transform: perspective(600px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    transform: perspective(600px) rotateY(-90deg) translateX(-60px);
    opacity: 0;
  }
}

.flipOutRight {
  animation-name: flipOutRight;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}

@keyframes flipOutRight {
  0% {
    transform: perspective(600px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    transform: perspective(600px) rotateY(90deg) translateX(60px);
    opacity: 0;
  }
}

.flipOutXLeft {
  animation-name: flipOutXLeft;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}

@keyframes flipOutXLeft {
  0% {
    transform: perspective(600px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    transform: perspective(600px) rotateX(-90deg) translateX(-60px);
    opacity: 0;
  }
}

.flipOutXRight {
  animation-name: flipOutXRight;
  backface-visibility: var(--cssanimation-backface-visibility);
  transform-style: var(--cssanimation-transform-style);
  will-change: var(--cssanimation-will-change);
}

@keyframes flipOutXRight {
  0% {
    transform: perspective(600px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    transform: perspective(600px) rotateX(90deg) translateX(60px);
    opacity: 0;
  }
}