139 lines
3.4 KiB
Sass
139 lines
3.4 KiB
Sass
@import mixins
|
|
|
|
// Overlay/content animations
|
|
|
|
=keyframes-vex-fadein
|
|
@keyframes vex-fadein
|
|
0%
|
|
opacity: 0
|
|
100%
|
|
opacity: 1
|
|
|
|
=keyframes-vex-fadeout
|
|
@keyframes vex-fadeout
|
|
0%
|
|
opacity: 1
|
|
100%
|
|
opacity: 0
|
|
|
|
// Content animations
|
|
|
|
=keyframes-vex-flyin
|
|
@keyframes vex-flyin
|
|
0%
|
|
opacity: 0
|
|
transform: translateY(-40px)
|
|
100%
|
|
opacity: 1
|
|
transform: translateY(0)
|
|
|
|
=keyframes-vex-flyout
|
|
@keyframes vex-flyout
|
|
0%
|
|
opacity: 1
|
|
transform: translateY(0)
|
|
100%
|
|
opacity: 0
|
|
transform: translateY(-40px)
|
|
|
|
=keyframes-vex-dropin
|
|
@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%
|
|
transform: translateY(0)
|
|
opacity: 0
|
|
1%
|
|
transform: translateY(-800px)
|
|
opacity: 0
|
|
|
|
// Real animation begins here
|
|
2%
|
|
transform: translateY(-800px)
|
|
opacity: 1
|
|
100%
|
|
transform: translateY(0)
|
|
opacity: 1
|
|
|
|
=keyframes-vex-dropout
|
|
@keyframes vex-dropout
|
|
0%
|
|
transform: translateY(0)
|
|
100%
|
|
transform: translateY(-800px)
|
|
|
|
=keyframes-vex-slideup
|
|
@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%
|
|
transform: translateY(0)
|
|
opacity: 0
|
|
1%
|
|
transform: translateY(800px)
|
|
opacity: 0
|
|
|
|
// Real animation begins here
|
|
2%
|
|
transform: translateY(800px)
|
|
opacity: 1
|
|
100%
|
|
transform: translateY(0)
|
|
opacity: 1
|
|
|
|
=keyframes-vex-slidedown
|
|
@keyframes vex-slidedown
|
|
0%
|
|
transform: translateY(0)
|
|
100%
|
|
transform: translateY(800px)
|
|
|
|
=keyframes-vex-flipin-horizontal
|
|
@keyframes vex-flipin-horizontal
|
|
0%
|
|
opacity: 0
|
|
transform: rotateY(-90deg)
|
|
100%
|
|
opacity: 1
|
|
transform: rotateY(0deg)
|
|
|
|
=keyframes-vex-flipout-horizontal
|
|
@keyframes vex-flipout-horizontal
|
|
0%
|
|
opacity: 1
|
|
transform: rotateY(0deg)
|
|
100%
|
|
opacity: 0
|
|
transform: rotateY(90deg)
|
|
|
|
// Spinner animations
|
|
|
|
=keyframes-vex-rotation
|
|
@keyframes vex-rotation
|
|
0%
|
|
transform: rotate(0deg)
|
|
100%
|
|
transform: rotate(359deg)
|
|
|
|
// Button animations
|
|
|
|
=keyframes-vex-pulse
|
|
@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
|