Delay

Wait before an animation begins.

html

<div class="mot-delay-stage" data-trigger="auto">
  <div class="mot-delay-wait" style="width:600px;"></div>
  <span class="mot-delay-dot" style="background:#F5C2E0;"></span>
  <p class="mot-delay-caption">Waits, then moves &middot; waits 600ms, then runs for 700ms</p>
</div>
<style>
.mot-delay-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 14px system-ui, sans-serif; color: #241430; position: relative; }
.mot-delay-wait { height: 3px; background: #24143033; max-width: 260px; }
.mot-delay-dot { display: block; width: 22px; height: 22px; border-radius: 999px; margin-top: -2px; transform: translateX(0); }
.mot-delay-caption { margin: 12px 0 0; font-size: 13px; color: #241430aa; }
@media (prefers-reduced-motion: no-preference) {
  [data-trigger="auto"] .mot-delay-dot { animation: mot-delay-run 700ms ease-out 600ms infinite; }
  [data-trigger="hover"] .mot-delay-stage:hover .mot-delay-dot { animation: mot-delay-run 700ms ease-out 600ms 1; }
  @keyframes mot-delay-run { 0% { transform: translateX(0); } 100% { transform: translateX(200px); } }
}
</style>

tailwind

<div class="relative w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-[#241430]" data-trigger="auto">
  <div class="h-[3px] bg-[#24143033] max-w-[260px]" style="width:600px;"></div>
  <span class="block w-[22px] h-[22px] rounded-full -mt-0.5" style="background:#F5C2E0;"></span>
  <p class="mt-3 text-sm text-[#241430]/70">Waits, then moves &middot; waits 600ms, then runs for 700ms</p>
</div>
<style>
@media (prefers-reduced-motion: no-preference) {
  [data-trigger="auto"] span { animation: mot-delay-tw-run 700ms ease-out 600ms infinite; }
  [data-trigger="hover"] div:hover span { animation: mot-delay-tw-run 700ms ease-out 600ms 1; }
  @keyframes mot-delay-tw-run { 0% { transform: translateX(0); } 100% { transform: translateX(200px); } }
}
</style>

react

export function Delay({
  delay = 600,
  duration = 700,
  trigger = "auto",
  accent = "#F5C2E0",
  label = "Waits, then moves",
}) {
  return (
    <div data-trigger={trigger} style={{ position: "relative", width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", color: "#241430" }}>
      <div style={{ height: 3, background: "#24143033", maxWidth: 260, width: delay }} />
      <span className="dot" style={{ display: "block", width: 22, height: 22, borderRadius: 999, marginTop: -2, background: accent }} />
      <p style={{ margin: "12px 0 0", fontSize: 13, color: "#241430aa" }}>{label} &middot; waits {delay}ms, then runs for {duration}ms</p>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          [data-trigger="auto"] .dot { animation: mot-delay-run ${duration}ms ease-out ${delay}ms infinite; }
          [data-trigger="hover"] div:hover .dot { animation: mot-delay-run ${duration}ms ease-out ${delay}ms 1; }
          @keyframes mot-delay-run { 0% { transform: translateX(0); } 100% { transform: translateX(200px); } }
        }
      `}</style>
    </div>
  );
}