_keyframes.sass
1.74 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
@import compass/css3
@import mixins
=keyframes-offline-fadein
+offline-keyframes("offline-fadein")
0%
opacity: 0
100%
opacity: 1
=keyframes-offline-fadeout
+offline-keyframes("offline-fadeout")
0%
opacity: 1
100%
opacity: 0
=keyframes-offline-fadeout-and-hide
+offline-keyframes("offline-fadeout-and-hide")
0%
opacity: 1
display: block
99%
opacity: 0
display: block
100%
opacity: 0
display: none
=keyframes-offline-dropin
+offline-keyframes("offline-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%
+offline-transform(translateY(0))
opacity: 0
1%
+offline-transform(translateY(-800px))
opacity: 0
// Real animation begins here
2%
+offline-transform(translateY(-800px))
opacity: 1
100%
+offline-transform(translateY(0))
opacity: 1
=keyframes-offline-dropout
+offline-keyframes("offline-dropout")
0%
+offline-transform(translateY(0))
100%
+offline-transform(translateY(-800px))
=keyframes-offline-rotation
+offline-keyframes("offline-rotation")
0%
+offline-transform(rotate(0deg))
100%
+offline-transform(rotate(359deg))