Preview
HTML
<ul>
<li class="fast"></li>
<li class="slow"></li>
</ul>
CSS
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
:root {
--motion-fast: 180ms;
--motion-slow: 900ms;
}
ul {
display: grid;
gap: 0.7rem;
padding: 0;
list-style: none;
}
li {
width: 1.1rem;
height: 1.1rem;
border-radius: 50%;
background: var(--accent);
animation: slide var(--motion-fast) ease-in-out infinite alternate;
}
.slow { animation-duration: var(--motion-slow); }
@keyframes slide {
to { transform: translateX(2.2rem); }
}
Tailwind
<style>
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
:root {
--motion-fast: 180ms;
--motion-slow: 900ms;
}
li {
animation: slide var(--motion-fast) ease-in-out infinite alternate;
}
.slow {
animation-duration: var(--motion-slow);
}
@keyframes slide {
to { transform: translateX(2.2rem); }
}
</style>
<ul class="grid gap-[0.7rem] p-0 list-none">
<li class="fast w-[1.1rem] h-[1.1rem] rounded-full bg-[var(--accent)]"></li>
<li class="slow w-[1.1rem] h-[1.1rem] rounded-full bg-[var(--accent)]"></li>
</ul>