1
/* Fade animations with opacity */
2
@keyframes fade-in {
3
    0% {
4
        opacity: 0;
5
    }
6

7
    100% {
8
        opacity: 1;
9
    }
10
}
11

12
@keyframes fade-out {
13
    0% {
14
        opacity: 1;
15
    }
16

17
    100% {
18
        opacity: 0;
19
    }
20
}
21

22
/* Pop animations with opacity and vertical scaling */
23
@keyframes pop-in {
24
    0% {
25
        opacity: 0;
26
        transform: scaleY(0);
27
    }
28

29
    /* Make the scaling faster on pop-in, otherwise it looks a bit weird */
30
    33% {
31
        transform: scaleY(1);
32
    }
33

34
    100% {
35
        opacity: 1;
36
        transform: scaleY(1);
37
    }
38
}
39

40
@keyframes pop-out {
41
    0% {
42
        opacity: 1;
43
        transform: scaleY(1);
44
    }
45

46
    66% {
47
        transform: scaleY(1);
48
    }
49

50
    100% {
51
        opacity: 0;
52
        transform: scaleY(0);
53
    }
54
}
55

56
/* Flashing for highlighting animation */
57
@keyframes flash {
58

59
    0%,
60
    50%,
61
    100% {
62
        opacity: 1;
63
    }
64

65
    25%,
66
    75% {
67
        opacity: 0.2;
68
    }
69
}
70

71
/* Pulsing highlight, slightly resizing the element */
72
@keyframes pulse {
73
    from {
74
        transform: scale(1);
75
        filter: brightness(1.1);
76
    }
77

78
    to {
79
        transform: scale(1.01);
80
        filter: brightness(1.3);
81
    }
82
}
83

84
/* Ellipsis animation */
85
@keyframes ellipsis {
86
    0% {
87
        content: ""
88
    }
89

90
    25% {
91
        content: "."
92
    }
93

94
    50% {
95
        content: ".."
96
    }
97

98
    75% {
99
        content: "..."
100
    }
101
}
102

103
/* HEINOUS */
104
@keyframes infinite-spinning {
105
    from {
106
        transform: rotate(0deg);
107
    }
108

109
    to {
110
        transform: rotate(360deg);
111
    }
112
}
113

114
/* STscript animation */
115
@keyframes script_progress_pulse {
116

117
    0%,
118
    100% {
119
        border-top-color: var(--progColor);
120
    }
121

122
    50% {
123
        border-top-color: var(--progFlashColor);
124
    }
125
}
126

127
/* Scroll delay animations */
128
@keyframes hide-scroll {
129

130
    from,
131
    to {
132
        overflow-y: hidden;
133
    }
134
}
135

136
@keyframes slide {
137
    0% {
138
        transform: translateX(var(--slide-mes-x-start, 0px));
139
    }
140

141
    100% {
142
        transform: translateX(var(--slide-mes-x-end, 0px));
143
    }
144
}
145

146
@-webkit-keyframes slide {
147
    0% {
148
        transform: translateX(var(--slide-mes-x-start, 0px));
149
    }
150

151
    100% {
152
        transform: translateX(var(--slide-mes-x-end, 0px));
153
    }
154
}