140 lines
3.5 KiB
Sass
140 lines
3.5 KiB
Sass
|
@import mixins
|
||
|
|
|
||
|
|
// Overlay/content animations
|
||
|
|
|
||
|
|
=keyframes-vex-fadein
|
||
|
|
+vex-keyframes("vex-fadein")
|
||
|
|
0%
|
||
|
|
opacity: 0
|
||
|
|
100%
|
||
|
|
opacity: 1
|
||
|
|
|
||
|
|
=keyframes-vex-fadeout
|
||
|
|
+vex-keyframes("vex-fadeout")
|
||
|
|
0%
|
||
|
|
opacity: 1
|
||
|
|
100%
|
||
|
|
opacity: 0
|
||
|
|
|
||
|
|
// Content animations
|
||
|
|
|
||
|
|
=keyframes-vex-flyin
|
||
|
|
+vex-keyframes("vex-flyin")
|
||
|
|
0%
|
||
|
|
opacity: 0
|
||
|
|
+vex-transform(translateY(-40px))
|
||
|
|
100%
|
||
|
|
opacity: 1
|
||
|
|
+vex-transform(translateY(0))
|
||
|
|
|
||
|
|
=keyframes-vex-flyout
|
||
|
|
+vex-keyframes("vex-flyout")
|
||
|
|
0%
|
||
|
|
opacity: 1
|
||
|
|
+vex-transform(translateY(0))
|
||
|
|
100%
|
||
|
|
opacity: 0
|
||
|
|
+vex-transform(translateY(-40px))
|
||
|
|
|
||
|
|
=keyframes-vex-dropin
|
||
|
|
+vex-keyframes("vex-dropin")
|
||
|
|
// We start at 0 first and, while hidden
|
||
|
|
// move to -800px, where the animation
|
||
|
|
// really begins. This was necessary because
|
||
|
|
// otherwise, when starting the animation
|
||
|
|
// at -800px, the browser scrolls up 800px
|
||
|
|
// to try to display this object positioned
|
||
|
|
// above the page.
|
||
|
|
// https://github.com/HubSpot/vex/issues/21
|
||
|
|
0%
|
||
|
|
+vex-transform(translateY(0))
|
||
|
|
opacity: 0
|
||
|
|
1%
|
||
|
|
+vex-transform(translateY(-800px))
|
||
|
|
opacity: 0
|
||
|
|
|
||
|
|
// Real animation begins here
|
||
|
|
2%
|
||
|
|
+vex-transform(translateY(-800px))
|
||
|
|
opacity: 1
|
||
|
|
100%
|
||
|
|
+vex-transform(translateY(0))
|
||
|
|
opacity: 1
|
||
|
|
|
||
|
|
=keyframes-vex-dropout
|
||
|
|
+vex-keyframes("vex-dropout")
|
||
|
|
0%
|
||
|
|
+vex-transform(translateY(0))
|
||
|
|
100%
|
||
|
|
+vex-transform(translateY(-800px))
|
||
|
|
|
||
|
|
=keyframes-vex-slideup
|
||
|
|
+vex-keyframes("vex-slideup")
|
||
|
|
// We start at 0 first and, while hidden
|
||
|
|
// move to -800px, where the animation
|
||
|
|
// really begins. This was necessary because
|
||
|
|
// otherwise, when starting the animation
|
||
|
|
// at -800px, the browser scrolls up 800px
|
||
|
|
// to try to display this object positioned
|
||
|
|
// above the page.
|
||
|
|
// https://github.com/HubSpot/vex/issues/21
|
||
|
|
0%
|
||
|
|
+vex-transform(translateY(0))
|
||
|
|
opacity: 0
|
||
|
|
1%
|
||
|
|
+vex-transform(translateY(800px))
|
||
|
|
opacity: 0
|
||
|
|
|
||
|
|
// Real animation begins here
|
||
|
|
2%
|
||
|
|
+vex-transform(translateY(800px))
|
||
|
|
opacity: 1
|
||
|
|
100%
|
||
|
|
+vex-transform(translateY(0))
|
||
|
|
opacity: 1
|
||
|
|
|
||
|
|
=keyframes-vex-slidedown
|
||
|
|
+vex-keyframes("vex-slidedown")
|
||
|
|
0%
|
||
|
|
+vex-transform(translateY(0))
|
||
|
|
100%
|
||
|
|
+vex-transform(translateY(800px))
|
||
|
|
|
||
|
|
=keyframes-vex-flipin-horizontal
|
||
|
|
+vex-keyframes("vex-flipin-horizontal")
|
||
|
|
0%
|
||
|
|
opacity: 0
|
||
|
|
+vex-transform(rotateY(-90deg))
|
||
|
|
100%
|
||
|
|
opacity: 1
|
||
|
|
+vex-transform(rotateY(0deg))
|
||
|
|
|
||
|
|
=keyframes-vex-flipout-horizontal
|
||
|
|
+vex-keyframes("vex-flipout-horizontal")
|
||
|
|
0%
|
||
|
|
opacity: 1
|
||
|
|
+vex-transform(rotateY(0deg))
|
||
|
|
100%
|
||
|
|
opacity: 0
|
||
|
|
+vex-transform(rotateY(90deg))
|
||
|
|
|
||
|
|
// Spinner animations
|
||
|
|
|
||
|
|
=keyframes-vex-rotation
|
||
|
|
+vex-keyframes("vex-rotation")
|
||
|
|
0%
|
||
|
|
+vex-transform(rotate(0deg))
|
||
|
|
100%
|
||
|
|
+vex-transform(rotate(359deg))
|
||
|
|
|
||
|
|
// Button animations
|
||
|
|
|
||
|
|
=keyframes-vex-pulse
|
||
|
|
+vex-keyframes("vex-pulse")
|
||
|
|
0%
|
||
|
|
+box-shadow(inset 0 0 0 300px transparent)
|
||
|
|
70%
|
||
|
|
+box-shadow(inset 0 0 0 300px rgba(255, 255, 255, .25))
|
||
|
|
100%
|
||
|
|
+box-shadow(inset 0 0 0 300px transparent)
|