沛石互動 / 原型 / 微互動

收藏成功提示

點一下要像收到一個小確幸：圓圈染上顏色、勾號劃出、標題輕輕劃線、小小粒子飛開，最後整列安靜地收合。點列表觸發動畫，再點一次回到原狀。

已加入收藏清單書籤

點一下切換狀態

關鍵節點

填色0ms

勾號80ms

劃線120ms

粒子200ms

收合600ms

可複製貼上的 CSS

/* 圓圈：先閃赭橘，再彈跳收斂到橄欖綠 */
.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; }
}

/* 勾號用 stroke-dashoffset 劃出，延遲 80ms 出場 */
.check path        { stroke-dasharray: 20; stroke-dashoffset: 20;
                     transition: stroke-dashoffset 220ms var(--ease) 80ms; }
.task.done path    { stroke-dashoffset: 0; }

/* 標題的劃線由左往右展開 */
.label::after      { width: 0; transition: width 240ms var(--ease) 120ms; }
.task.done .label::after { width: 100%; }

/* 慶賀結束後整列退到背景 */
.task.done         { max-height: 44px; opacity: .6;
                     transition-delay: 600ms; }