// ---------------------------------------------------------------------------
+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)


// ---------------------------------------------------------------------------
+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)


// ---------------------------------------------------------------------------
+keyframes(flipOutX)
  0%
    +transform(perspective(400px) rotateX(0deg))
    +opacity(1)
  100%
    +transform(perspective(400px) rotateX(90deg))
    +opacity(0)


// ---------------------------------------------------------------------------
+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)


// ---------------------------------------------------------------------------
+keyframes(flipOutY)
  0%
    +transform(perspective(400px) rotateY(0deg))
    +opacity(1)
  100%
    +transform(perspective(400px) rotateY(90deg))
    +opacity(0)