43 lines
1.0 KiB
Sass
43 lines
1.0 KiB
Sass
// ---------------------------------------------------------------------------
|
|
+keyframes(hinge)
|
|
0%
|
|
+rotate(0)
|
|
+transform-origin(top left)
|
|
+animation-timing-function(ease-in-out)
|
|
20%, 60%
|
|
+rotate(80deg)
|
|
+transform-origin(top left)
|
|
+animation-timing-function(ease-in-out)
|
|
40%
|
|
+rotate(60deg)
|
|
+transform-origin(top left)
|
|
+animation-timing-function(ease-in-out)
|
|
80%
|
|
+transform(rotate(60deg) translateY(0))
|
|
+opacity(1)
|
|
+transform-origin(top left)
|
|
+animation-timing-function(ease-in-out)
|
|
100%
|
|
+translateY(700px)
|
|
+opacity(0)
|
|
|
|
|
|
// ---------------------------------------------------------------------------
|
|
+keyframes(rollIn)
|
|
0%
|
|
+opacity(0)
|
|
+transform(translateX(-100%) rotate(-120deg))
|
|
100%
|
|
+opacity(1)
|
|
+transform(translateX(0px) rotate(0deg))
|
|
|
|
|
|
// ---------------------------------------------------------------------------
|
|
+keyframes(rollOut)
|
|
0%
|
|
+opacity(1)
|
|
+transform(translateX(0px) rotate(0deg))
|
|
100%
|
|
+opacity(0)
|
|
+transform(translateX(-100%) rotate(-120deg))
|