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
191
}
192
192
193
193
@keyframes head-move {
194
-
from {
194
+
from,
195
+
80%,
196
+
to {
195
197
rotate: 0deg;
196
198
}
197
199
198
-
10% {
200
+
2.5% {
199
201
rotate: 25deg;
200
202
}
201
203
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;
204
+
70%,
205
+
75% {
206
+
rotate: 45deg;
232
207
}
233
208
}
234
209
···
288
263
width: calc((60 / 3) * 1cqw);
289
264
height: calc((60 / 3) * 1cqw);
290
265
291
-
animation: 30s linear 5s infinite forwards head-move;
266
+
animation: 60s linear 2.5s infinite forwards head-move;
292
267
293
268
&.hidden {
294
269
background: none;