vielle.dev
Personal Site
Update head moving animation to be linear and logical (random positions were removed 2 commits ago i forgot to say)
+8
-33
src/components/playing/NowPlaying.astro
+8
-33
src/components/playing/NowPlaying.astro
···
191
}
192
193
@keyframes head-move {
194
-
from {
195
rotate: 0deg;
196
}
197
198
-
10% {
199
rotate: 25deg;
200
}
201
202
-
20% {
203
-
rotate: var(--head-move-20);
204
-
}
205
-
206
-
30% {
207
-
rotate: var(--head-move-30);
208
-
}
209
-
210
-
40% {
211
-
rotate: var(--head-move-40);
212
-
}
213
-
214
-
50% {
215
-
rotate: var(--head-move-50);
216
-
}
217
-
218
-
60% {
219
-
rotate: var(--head-move-60);
220
-
}
221
-
222
-
70% {
223
-
rotate: 25deg;
224
-
}
225
-
226
-
80% {
227
-
rotate: 0deg;
228
-
}
229
-
230
-
to {
231
-
rotate: 0deg;
232
}
233
}
234
···
288
width: calc((60 / 3) * 1cqw);
289
height: calc((60 / 3) * 1cqw);
290
291
-
animation: 30s linear 5s infinite forwards head-move;
292
293
&.hidden {
294
background: none;
···
191
}
192
193
@keyframes head-move {
194
+
from,
195
+
80%,
196
+
to {
197
rotate: 0deg;
198
}
199
200
+
2.5% {
201
rotate: 25deg;
202
}
203
204
+
70%,
205
+
75% {
206
+
rotate: 45deg;
207
}
208
}
209
···
263
width: calc((60 / 3) * 1cqw);
264
height: calc((60 / 3) * 1cqw);
265
266
+
animation: 60s linear 2.5s infinite forwards head-move;
267
268
&.hidden {
269
background: none;