Color Wipe Repaint Text
Fresh coats of color roll across the word one after another, each with a soft wet edge, and the cycle never shows a seam. Three stacked copies with a moving mask, and z-index steps hand over the top.
Also known as: text color change animation, color wipe text css, paint text animation.
Fresh coat
HTML
<div class="txt-color-wipe-repaint"><span class="txt-color-wipe-repaint-base">Fresh coat</span><span aria-hidden="true" style="--i: 0">Fresh coat</span><span aria-hidden="true" style="--i: 1">Fresh coat</span><span aria-hidden="true" style="--i: 2">Fresh coat</span></div>
CSS
@property --txt-color-wipe-repaint-p {
syntax: "<percentage>";
inherits: false;
initial-value: 0%;
}
.txt-color-wipe-repaint {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 2.1);
font-family: system-ui, sans-serif;
font-weight: 900;
line-height: 1.2;
display: inline-grid;
color: transparent;
letter-spacing: -0.03em;
white-space: nowrap;}
.txt-color-wipe-repaint span { grid-area: 1 / 1; }
.txt-color-wipe-repaint span + span {
color: var(--c);
-webkit-mask-image: linear-gradient(90deg, #000 calc(var(--txt-color-wipe-repaint-p) - 14%), transparent var(--txt-color-wipe-repaint-p));
mask-image: linear-gradient(90deg, #000 calc(var(--txt-color-wipe-repaint-p) - 14%), transparent var(--txt-color-wipe-repaint-p));
animation: txt-color-wipe-repaint-coat 4.8s infinite;
/* each coat owns a third of the loop, already running on the first frame */
animation-delay: calc(var(--i) * 1.6s - 4.8s);
}
.txt-color-wipe-repaint span:nth-child(3) { color: color-mix(in oklch, var(--c) 45%, #ff4f8b); }
.txt-color-wipe-repaint span:nth-child(4) { color: color-mix(in oklch, var(--c) 30%, #ffa630); }
@keyframes txt-color-wipe-repaint-coat {
0% { --txt-color-wipe-repaint-p: 0%; z-index: 3; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
24% { --txt-color-wipe-repaint-p: 114%; }
33.33% { --txt-color-wipe-repaint-p: 114%; z-index: 3; }
33.34%, 66.66% { --txt-color-wipe-repaint-p: 114%; z-index: 2; }
66.67%, 100% { --txt-color-wipe-repaint-p: 114%; z-index: 1; }
}
@media (prefers-reduced-motion: reduce) {
.txt-color-wipe-repaint span + span { animation: none; --txt-color-wipe-repaint-p: 114%; }
.txt-color-wipe-repaint span:nth-child(n + 3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.txt-color-wipe-repaint, .txt-color-wipe-repaint *, .txt-color-wipe-repaint::before, .txt-color-wipe-repaint::after, .txt-color-wipe-repaint *::before, .txt-color-wipe-repaint *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--txt-coloron the element or a parent. Currently previewing#3b82f6. - Font size: set
--txt-size. Every other dimension is inem, so the whole thing scales together. Currently previewing40px. - Speed: change the duration on the
transitionoranimationshorthand. 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.