tangled.org
Monorepo for Tangled
tangled.org
input.css: add marquee and progress animation classes
this will be used later for timeline and progress bar animations.
Signed-off-by: oppiliappan <me@oppi.li>
oppi.li
+29
+29
input.css
+29
input.css
···
281
281
.success {
282
282
@apply py-1 text-gray-900 dark:text-gray-100;
283
283
}
284
+
285
+
@keyframes scroll {
286
+
0% { transform: translateX(0); }
287
+
100% { transform: translateX(-50%); }
288
+
}
289
+
290
+
.animate-marquee {
291
+
animation: scroll 30s linear infinite;
292
+
}
293
+
294
+
.animate-marquee:hover {
295
+
animation-play-state: paused;
296
+
}
297
+
298
+
@media (prefers-reduced-motion: reduce) {
299
+
.animate-marquee {
300
+
animation: none;
301
+
transform: none;
302
+
}
303
+
}
304
+
305
+
@keyframes progress {
306
+
from { width: 0%; }
307
+
to { width: 100%; }
308
+
}
309
+
310
+
.animate-progress {
311
+
animation: progress 5s linear forwards;
312
+
}
284
313
}
285
314
286
315
}