Send weekly digest Fri
click to toggle

## Easing

Swaps `--ease` across every transition so you can feel the difference.

## Keyframes

fill 0ms
check 80ms
strike 120ms
confetti 200ms
collapse 600ms

## Copy-paste CSS

    /* circle: clay flash, settle to olive with spring overshoot */
    .task.done .check {
      animation: settle 380ms cubic-bezier(.34,1.56,.64,1) forwards;
    }
    @keyframes settle {
      0%   { transform: scale(.8);  background: #D97757; }
      55%  { transform: scale(1.18); }
      100% { transform: scale(1);   background: #788C5D; }
    }

    /* checkmark draws via stroke-dashoffset, 80ms delay */
    .check path        { stroke-dasharray: 20; stroke-dashoffset: 20;
                         transition: stroke-dashoffset 220ms var(--ease) 80ms; }
    .task.done path    { stroke-dashoffset: 0; }

    /* strikethrough grows left → right */
    .label::after      { width: 0; transition: width 240ms var(--ease) 120ms; }
    .task.done .label::after { width: 100%; }

    /* row steps back after the celebration */
    .task.done         { max-height: 44px; opacity: .6;
                         transition-delay: 600ms; }