66 lines
1.8 KiB
Sass
66 lines
1.8 KiB
Sass
// ---------------------------------------------------------------------------
|
|
+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)
|