To-Do Strikethrough Animation: CSS Text Animation

To-Do Strikethrough Animation

A checkbox squishes, fills and ticks, then a line strikes through the task and the text fades back. The whole to-do list moment in one snippet; the tick is an SVG path drawn with a dash.

Also known as: todo list done animation, checkbox strikethrough css, task complete animation.

Book flights

Color Font size 40px Dark background

HTML

<div class="txt-todo-strikethrough"><span class="txt-todo-strikethrough-box" aria-hidden="true"><svg viewBox="0 0 24 24"><path pathLength="1" d="M5.5 12.5 L10 17 L18.5 7.5" /></svg></span><span class="txt-todo-strikethrough-task">Book flights</span></div>

CSS

.txt-todo-strikethrough {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;}
.txt-todo-strikethrough-box {
  display: grid;
  place-items: center;
  width: 0.95em;
  height: 0.95em;
  border: 0.08em solid var(--c);
  border-radius: 0.26em;
  animation: txt-todo-strikethrough-press 0.45s 0.3s forwards;
}
.txt-todo-strikethrough-box svg {
  width: 0.72em;
  height: 0.72em;
  fill: none;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1.1;
  stroke-dashoffset: 1.05;
  animation: txt-todo-strikethrough-tick 0.3s ease-out 0.6s forwards;
}
.txt-todo-strikethrough-task {
  position: relative;
  animation: txt-todo-strikethrough-dim 0.35s ease-out 1.05s forwards;
}
.txt-todo-strikethrough-task::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  top: 54%;
  height: 0.07em;
  border-radius: 0.04em;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: txt-todo-strikethrough-strike 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.8s forwards;
}
@keyframes txt-todo-strikethrough-press {
  0%   { transform: scale(1); animation-timing-function: ease-in; }
  35%  { transform: scale(0.8); background-color: transparent; animation-timing-function: cubic-bezier(0.3, 1.6, 0.6, 1); }
  100% { transform: scale(1); background-color: var(--c); }
}
@keyframes txt-todo-strikethrough-tick {
  to { stroke-dashoffset: 0; }
}
@keyframes txt-todo-strikethrough-strike {
  to { transform: scaleX(1); }
}
@keyframes txt-todo-strikethrough-dim {
  to { color: color-mix(in srgb, currentColor 45%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .txt-todo-strikethrough, .txt-todo-strikethrough *, .txt-todo-strikethrough::before, .txt-todo-strikethrough::after, .txt-todo-strikethrough *::before, .txt-todo-strikethrough *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --txt-color on the element or a parent. Currently previewing #3b82f6.
Font size: set --txt-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 40px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

To-Do Strikethrough Animation

HTML

CSS

Customizing this snippet

Similar text animations