09紙吹雪が上がるタスク完了

クラッカーのアイコンの後ろから紙吹雪の紙片6つが0.24秒ずつずれたタイミングで上がって透明になり、回る向きも別々です。

使いどころタスクや承認待ちのように、一覧が空であること自体が良い知らせである画面の締めくくり

translateanimation-delaycustom property

<main class="stage">
  <section class="ad is-demo" aria-labelledby="ad-t">
    <div class="ad__art">
      <span class="ad__bit" aria-hidden="true"></span>
      <span class="ad__bit" aria-hidden="true"></span>
      <span class="ad__bit" aria-hidden="true"></span>
      <span class="ad__bit" aria-hidden="true"></span>
      <span class="ad__bit" aria-hidden="true"></span>
      <span class="ad__bit" aria-hidden="true"></span>
      <span class="ad__icon" aria-hidden="true"><svg viewBox="0 0 256 256" width="1em" height="1em"><g fill="currentColor"><path d="m58.89 154.89l42.22 42.22l-50.63 18.4a7.79 7.79 0 0 1-10-10Zm138.82-4.72l-91.88-91.88A7.79 7.79 0 0 0 93 61.14l-14.9 41l75.82 75.82l41-14.9a7.79 7.79 0 0 0 2.79-12.89" opacity=".2"/><path d="M111.49 52.63a15.8 15.8 0 0 0-26 5.77L33 202.78A15.83 15.83 0 0 0 47.76 224a16 16 0 0 0 5.46-1l144.37-52.5a15.8 15.8 0 0 0 5.78-26Zm-8.33 135.21l-35-35l13.16-36.21l58.05 58.05Zm-55 20l14-38.41l24.45 24.45ZM156 168.64L87.36 100l13-35.87l91.43 91.43ZM160 72a37.8 37.8 0 0 1 3.84-15.58C169.14 45.83 179.14 40 192 40c6.7 0 11-2.29 13.65-7.21a22 22 0 0 0 2.35-8.85a8 8 0 0 1 16 .06c0 12.86-8.52 32-32 32c-6.7 0-11 2.29-13.65 7.21a22 22 0 0 0-2.35 8.85a8 8 0 0 1-16-.06m-24-32V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0m101.66 82.34a8 8 0 1 1-11.32 11.31l-16-16a8 8 0 0 1 11.32-11.32Zm4.87-42.75l-24 8a8 8 0 0 1-5.06-15.18l24-8a8 8 0 0 1 5.06 15.18"/></g></svg></span>
    </div>
    <h2 class="ad__title" id="ad-t">やることは全部終わりました</h2>
    <p class="ad__sub" id="ad-s" data-fmt="残りのタスク{n}件" aria-live="polite">残りのタスク0件</p>
    <button class="ad__btn" type="button" id="ad-b" data-none="戻せるものがありません">直前の1件を戻す</button>
  </section>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;
$easing: ease-in-out;
$color: $subject-cream;

@include stage($stage-ink);

.ad {
  box-sizing: border-box;
  width: min(248px, 86vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $sp-2;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  text-align: center;
  color: $color;
}

.ad__art {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ad__icon {
  grid-area: 1 / 1;
  font-size: clamp(36px, 11vw, 46px);
  line-height: 0;
  color: $color;
}
.ad__bit {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 6px;
  height: 6px;
  border-radius: $r-xs;
  background: $subject-pink;
  opacity: 0;
}
.ad__bit:nth-child(2) { background: $subject-mint; }
.ad__bit:nth-child(3) { background: $subject-lilac; }
.ad__bit:nth-child(4) { background: $subject-sky; }
.ad__bit:nth-child(5) { background: $subject-pink; }
.ad__bit:nth-child(6) { background: $subject-mint; }

.ad__title {
  margin: 0;
  font-size: clamp(12px, 4vw, 14px);
  line-height: 1.3;
  font-weight: 800;
}
.ad__sub {
  margin: 0;
  min-height: 14px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  color: rgba(255, 247, 230, .62);
}
.ad.is-back .ad__sub { color: $subject-pink; }
.ad__btn {
  height: 28px;
  margin: 0;
  padding: 0 $sp-4;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: $r-pill;
  background: rgba(255, 255, 255, .08);
  color: $color;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.ad__btn:disabled { opacity: .5; cursor: default; }
.ad__btn:focus-visible { outline: 2px solid $subject-sky; outline-offset: 2px; }

// ── 자동 루프: 조각마다 시작 시각이 달라 한 조각이 사라질 때 다음 조각이 이미 올라와 있다 ──
.ad.is-demo .ad__bit { animation: ad-pop $duration $easing infinite; }
.ad.is-demo .ad__bit:nth-child(1) { animation-delay: 0ms;   --x: -46px; --r: 180deg; }
.ad.is-demo .ad__bit:nth-child(2) { animation-delay: 240ms; --x: -26px; --r: -150deg; }
.ad.is-demo .ad__bit:nth-child(3) { animation-delay: 480ms; --x: -8px;  --r: 210deg; }
.ad.is-demo .ad__bit:nth-child(4) { animation-delay: 720ms; --x: 10px;  --r: -190deg; }
.ad.is-demo .ad__bit:nth-child(5) { animation-delay: 960ms; --x: 28px;  --r: 160deg; }
.ad.is-demo .ad__bit:nth-child(6) { animation-delay: 1200ms; --x: 48px; --r: -220deg; }
@keyframes ad-pop {
  0%   { transform: translate(var(--x, 0), 0) rotate(0deg) scale(.6); opacity: 0; }
  16%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--x, 0), -58px) rotate(var(--r, 180deg)) scale(1); opacity: 0; }
}
.ad.is-demo .ad__icon { animation: ad-beat $duration $easing infinite; }
@keyframes ad-beat {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50%      { transform: rotate(6deg) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .ad.is-demo .ad__bit,
  .ad.is-demo .ad__icon { animation: none !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.ad {
  box-sizing: border-box;
  width: min(248px, 86vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  text-align: center;
  color: #fff7e6;
}

.ad__art {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.ad__icon {
  grid-area: 1/1;
  font-size: clamp(36px, 11vw, 46px);
  line-height: 0;
  color: #fff7e6;
}

.ad__bit {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 6px;
  height: 6px;
  border-radius: 4px;
  background: #ff9ebb;
  opacity: 0;
}

.ad__bit:nth-child(2) {
  background: #4cd4a6;
}

.ad__bit:nth-child(3) {
  background: #b9a0ff;
}

.ad__bit:nth-child(4) {
  background: #6ec8ff;
}

.ad__bit:nth-child(5) {
  background: #ff9ebb;
}

.ad__bit:nth-child(6) {
  background: #4cd4a6;
}

.ad__title {
  margin: 0;
  font-size: clamp(12px, 4vw, 14px);
  line-height: 1.3;
  font-weight: 800;
}

.ad__sub {
  margin: 0;
  min-height: 14px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  color: rgba(255, 247, 230, 0.62);
}

.ad.is-back .ad__sub {
  color: #ff9ebb;
}

.ad__btn {
  height: 28px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff7e6;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.ad__btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.ad__btn:focus-visible {
  outline: 2px solid #6ec8ff;
  outline-offset: 2px;
}

.ad.is-demo .ad__bit {
  animation: ad-pop 2s ease-in-out infinite;
}

.ad.is-demo .ad__bit:nth-child(1) {
  animation-delay: 0ms;
  --x: -46px;
  --r: 180deg;
}

.ad.is-demo .ad__bit:nth-child(2) {
  animation-delay: 240ms;
  --x: -26px;
  --r: -150deg;
}

.ad.is-demo .ad__bit:nth-child(3) {
  animation-delay: 480ms;
  --x: -8px;
  --r: 210deg;
}

.ad.is-demo .ad__bit:nth-child(4) {
  animation-delay: 720ms;
  --x: 10px;
  --r: -190deg;
}

.ad.is-demo .ad__bit:nth-child(5) {
  animation-delay: 960ms;
  --x: 28px;
  --r: 160deg;
}

.ad.is-demo .ad__bit:nth-child(6) {
  animation-delay: 1200ms;
  --x: 48px;
  --r: -220deg;
}

@keyframes ad-pop {
  0% {
    transform: translate(var(--x, 0), 0) rotate(0deg) scale(0.6);
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--x, 0), -58px) rotate(var(--r, 180deg)) scale(1);
    opacity: 0;
  }
}
.ad.is-demo .ad__icon {
  animation: ad-beat 2s ease-in-out infinite;
}

@keyframes ad-beat {
  0%, 100% {
    transform: rotate(-6deg) scale(1);
  }
  50% {
    transform: rotate(6deg) scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ad.is-demo .ad__bit,
  .ad.is-demo .ad__icon {
    animation: none !important;
  }
}

// 실제 동작: 되돌리기를 누르면 할 일이 실제로 하나씩 되살아나고, 0개가 아니면 축하 문구가 내려간다.
var card = document.querySelector('.ad');
var btn = document.getElementById('ad-b');
var sub = document.getElementById('ad-s');
var left = 0;
btn.addEventListener('click', function () {
  card.classList.remove('is-demo');
  left += 1;
  card.classList.add('is-back');
  sub.textContent = sub.dataset.fmt.replace('{n}', left);
  if (left >= 3) {
    btn.disabled = true;
    btn.textContent = btn.dataset.none;
  }
});

import { useState } from "react";
import type { CSSProperties } from "react";
import styles from "./AllDoneCard.module.scss";

export type AllDoneCardProps = {
  title?: string;
  fmt?: string;
  action?: string;
  none?: string;
  maxUndo?: number;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
type BitVars = CSSProperties & { "--x"?: string; "--r"?: string; animationDelay?: string };

const BITS: BitVars[] = [
  { "--x": "-46px", "--r": "180deg", animationDelay: "0ms" },
  { "--x": "-26px", "--r": "-150deg", animationDelay: "240ms" },
  { "--x": "-8px", "--r": "210deg", animationDelay: "480ms" },
  { "--x": "10px", "--r": "-190deg", animationDelay: "720ms" },
  { "--x": "28px", "--r": "160deg", animationDelay: "960ms" },
  { "--x": "48px", "--r": "-220deg", animationDelay: "1200ms" },
];

export default function AllDoneCard({
  title = "Everything is done",
  fmt = "{n} tasks left",
  action = "Undo the last one",
  none = "Nothing left to undo",
  maxUndo = 3,
  duration = 2000,
  easing = "ease-in-out",
  color = "#fff7e6",
}: AllDoneCardProps) {
  const [left, setLeft] = useState(0);
  const [loop, setLoop] = useState(true);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  const full = left >= maxUndo;
  const cls = [styles.ad, loop ? styles.isDemo : "", left > 0 ? styles.isBack : ""].join(" ");

  return (
    <section className={cls} style={vars}>
      <div className={styles.art}>
        {BITS.map((b, i) => <span className={styles.bit} style={b} key={i} aria-hidden="true" />)}
        <span className={styles.icon} aria-hidden="true">
          <svg viewBox="0 0 256 256" width="1em" height="1em">
            <g fill="currentColor">
              <path d="m58.89 154.89l42.22 42.22l-50.63 18.4a7.79 7.79 0 0 1-10-10Zm138.82-4.72l-91.88-91.88A7.79 7.79 0 0 0 93 61.14l-14.9 41l75.82 75.82l41-14.9a7.79 7.79 0 0 0 2.79-12.89" opacity=".2" />
              <path d="M111.49 52.63a15.8 15.8 0 0 0-26 5.77L33 202.78A15.83 15.83 0 0 0 47.76 224a16 16 0 0 0 5.46-1l144.37-52.5a15.8 15.8 0 0 0 5.78-26Zm-8.33 135.21l-35-35l13.16-36.21l58.05 58.05Zm-55 20l14-38.41l24.45 24.45ZM156 168.64L87.36 100l13-35.87l91.43 91.43ZM160 72a37.8 37.8 0 0 1 3.84-15.58C169.14 45.83 179.14 40 192 40c6.7 0 11-2.29 13.65-7.21a22 22 0 0 0 2.35-8.85a8 8 0 0 1 16 .06c0 12.86-8.52 32-32 32c-6.7 0-11 2.29-13.65 7.21a22 22 0 0 0-2.35 8.85a8 8 0 0 1-16-.06m-24-32V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0m101.66 82.34a8 8 0 1 1-11.32 11.31l-16-16a8 8 0 0 1 11.32-11.32Zm4.87-42.75l-24 8a8 8 0 0 1-5.06-15.18l24-8a8 8 0 0 1 5.06 15.18" />
            </g>
          </svg>
        </span>
      </div>
      <h2 className={styles.title}>{title}</h2>
      <p className={styles.sub} aria-live="polite">{fmt.replace("{n}", String(left))}</p>
      <button
        className={styles.btn}
        type="button"
        disabled={full}
        onClick={() => { setLoop(false); setLeft(left + 1); }}
      >
        {full ? none : action}
      </button>
    </section>
  );
}

新しいタブで開く

09 紙吹雪が上がるタスク完了 — 計測累積面積 1.54% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · エンプティステートデザイン 9選 — CSSだけで描く

このデモが属する記事

エンプティステートデザイン 9選 — CSSだけで描く — デモ9種のプレビュー

エンプティステートデザイン 9選 — CSSだけで描くエンプティステートデザインは、一覧に出すデータが1件もないときに、その空いた場所を代わりに埋める画面です。ここにある9つのうち1つは、データがないからではなく見る権限がないから空いていて、その違いは南京錠1つで見分けられます。この記事のデモをすべて見る

09紙吹雪が上がるタスク完了

このデモが属する記事

この効果が気に入ったら — 似たデモ