Keyframes

Defined points within an animation sequence.

html

<div class="mot-kf-stage" data-preset="bounce">
  <div class="mot-kf-timeline">
    <span>0%</span><span>33%</span><span>66%</span><span>100%</span>
  </div>
  <div class="mot-kf-box mot-kf-box--loop" style="background:#A8E6C1;"></div>
  <p class="mot-kf-caption">@keyframes bounce &middot; 1400ms</p>
</div>
<style>
.mot-kf-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 12px system-ui, sans-serif; color: #241430aa; }
.mot-kf-timeline { display: flex; justify-content: space-between; margin-bottom: 8px; }
.mot-kf-box { width: 36px; height: 36px; border-radius: 8px; margin: 0 auto; }
.mot-kf-caption { margin: 10px 0 0; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  [data-preset="bounce"] .mot-kf-box { animation-name: mot-kf-bounce; }
  [data-preset="colour-cycle"] .mot-kf-box { animation-name: mot-kf-colour; }
  [data-preset="scale-pulse"] .mot-kf-box { animation-name: mot-kf-scale; }
  .mot-kf-box { animation-duration: 1400ms; animation-timing-function: ease-in-out; }
  .mot-kf-box--loop { animation-iteration-count: infinite; }
  @keyframes mot-kf-bounce { 0% { transform: translateY(0); } 33% { transform: translateY(-24px); } 66% { transform: translateY(0); } 100% { transform: translateY(0); } }
  @keyframes mot-kf-colour { 0% { background: #A8E6C1; } 33% { background: #F5C2E0; } 66% { background: #BFD9F2; } 100% { background: #A8E6C1; } }
  @keyframes mot-kf-scale { 0% { transform: scale(1); } 33% { transform: scale(1.5); } 66% { transform: scale(.8); } 100% { transform: scale(1); } }
}
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-xs text-[#241430]/70" data-preset="bounce">
  <div class="flex justify-between mb-2">
    <span>0%</span><span>33%</span><span>66%</span><span>100%</span>
  </div>
  <div class="w-9 h-9 rounded-lg mx-auto tw-kf-loop" style="background:#A8E6C1;"></div>
  <p class="mt-2.5 text-center">@keyframes bounce &middot; 1400ms</p>
</div>
<style>
@media (prefers-reduced-motion: no-preference) {
  [data-preset="bounce"] div.w-9 { animation-name: mot-kf-tw-bounce; }
  [data-preset="colour-cycle"] div.w-9 { animation-name: mot-kf-tw-colour; }
  [data-preset="scale-pulse"] div.w-9 { animation-name: mot-kf-tw-scale; }
  div.w-9 { animation-duration: 1400ms; animation-timing-function: ease-in-out; }
  .tw-kf-loop { animation-iteration-count: infinite; }
  @keyframes mot-kf-tw-bounce { 0% { transform: translateY(0); } 33% { transform: translateY(-24px); } 66% { transform: translateY(0); } 100% { transform: translateY(0); } }
  @keyframes mot-kf-tw-colour { 0% { background: #A8E6C1; } 33% { background: #F5C2E0; } 66% { background: #BFD9F2; } 100% { background: #A8E6C1; } }
  @keyframes mot-kf-tw-scale { 0% { transform: scale(1); } 33% { transform: scale(1.5); } 66% { transform: scale(.8); } 100% { transform: scale(1); } }
}
</style>

react

export function Keyframes({
  preset = "bounce",
  duration = 1400,
  loop = true,
  accent = "#A8E6C1",
}) {
  const names = { bounce: "mot-kf-bounce", "colour-cycle": "mot-kf-colour", "scale-pulse": "mot-kf-scale" };
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430aa" }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
        <span>0%</span><span>33%</span><span>66%</span><span>100%</span>
      </div>
      <div className={loop ? "box box--loop" : "box"} style={{ width: 36, height: 36, borderRadius: 8, margin: "0 auto", background: accent }} />
      <p style={{ margin: "10px 0 0", textAlign: "center" }}>@keyframes {preset} &middot; {duration}ms</p>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .box { animation: ${names[preset]} ${duration}ms ease-in-out 1; }
          .box--loop { animation-iteration-count: infinite; }
          @keyframes mot-kf-bounce { 0% { transform: translateY(0); } 33% { transform: translateY(-24px); } 66% { transform: translateY(0); } 100% { transform: translateY(0); } }
          @keyframes mot-kf-colour { 0% { background: #A8E6C1; } 33% { background: #F5C2E0; } 66% { background: #BFD9F2; } 100% { background: #A8E6C1; } }
          @keyframes mot-kf-scale { 0% { transform: scale(1); } 33% { transform: scale(1.5); } 66% { transform: scale(.8); } 100% { transform: scale(1); } }
        }
      `}</style>
    </div>
  );
}