Rolling Price Change Up and Down
A stock price whose digits roll up in green when it rises and down in red when it falls, with the change chip swapping in to match. Each column rolls in the direction the price moved.
Also known as: price change animation css, stock price animation, odometer css, price up down color.
HTML
<div class="txt-rolling-price-change" aria-label="ACME share price, updating live">
<span class="txt-rolling-price-change-sym" aria-hidden="true">ACME <span>NASDAQ</span></span>
<span class="txt-rolling-price-change-row" aria-hidden="true">
<span class="txt-rolling-price-change-price">$18<span class="txt-rolling-price-change-col"><span class="txt-rolling-price-change-ones">345</span></span>.<span class="txt-rolling-price-change-col"><span class="txt-rolling-price-change-tenths">34567890123</span></span><span class="txt-rolling-price-change-col"><span class="txt-rolling-price-change-hund">1234567</span></span></span>
<span class="txt-rolling-price-change-chips">
<span class="txt-rolling-price-change-up" style="--k: 0">▲ 0.41%</span>
<span class="txt-rolling-price-change-down" style="--k: 1">▼ 0.63%</span>
<span class="txt-rolling-price-change-up" style="--k: 2">▲ 0.22%</span>
</span>
</span>
</div>CSS
.txt-rolling-price-change {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 0.9);
font-family: system-ui, sans-serif;
font-weight: 700;
line-height: 1.2;
display: inline-grid;
gap: 0.1em;
--t: 7.5s;
--up: #16a34a;
--down: #e5484d;}
.txt-rolling-price-change-sym {
font-size: 0.45em;
font-weight: 700;
letter-spacing: 0.04em;
}
.txt-rolling-price-change-sym span {
font-weight: 500;
opacity: 0.5;
}
.txt-rolling-price-change-row {
display: flex;
align-items: center;
gap: 0.4em;
}
.txt-rolling-price-change-price {
display: inline-flex;
font-size: 1.7em;
font-weight: 650;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
animation: txt-rolling-price-change-tint var(--t) infinite;
}
.txt-rolling-price-change-col {
display: inline-block;
height: 1.15em;
overflow: hidden;
line-height: 1.15em;
-webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}
.txt-rolling-price-change-col > span {
display: block;
width: 1ch;
text-align: center;
word-break: break-all;
}
.txt-rolling-price-change-hund { animation: txt-rolling-price-change-hund var(--t) infinite; }
.txt-rolling-price-change-tenths { animation: txt-rolling-price-change-tenths var(--t) infinite; }
.txt-rolling-price-change-ones { animation: txt-rolling-price-change-ones var(--t) infinite; }
.txt-rolling-price-change-chips {
display: grid;
font-size: 0.45em;
font-weight: 700;
}
.txt-rolling-price-change-chips > span {
grid-area: 1 / 1;
padding: 0.3em 0.6em;
border-radius: 0.45em;
white-space: nowrap;
opacity: 0;
animation: txt-rolling-price-change-chip var(--t) calc(var(--k) * var(--t) / 3 + 1s - var(--t)) infinite;
}
.txt-rolling-price-change-up { color: var(--up); background: color-mix(in srgb, var(--up) 13%, transparent); }
.txt-rolling-price-change-down { color: var(--down); background: color-mix(in srgb, var(--down) 13%, transparent); }
@keyframes txt-rolling-price-change-hund {
0% { transform: translateY(-1.15em); }
13.33% { transform: translateY(-1.15em); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
22.67% { transform: translateY(-6.9em); }
46.67% { transform: translateY(-6.9em); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
56% { transform: translateY(0); }
80% { transform: translateY(0); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
89.33% { transform: translateY(-1.15em); }
100% { transform: translateY(-1.15em); }
}
@keyframes txt-rolling-price-change-tenths {
0% { transform: translateY(0); }
14% { transform: translateY(0); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
24% { transform: translateY(-8.05em); }
47.33% { transform: translateY(-8.05em); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
57.33% { transform: translateY(-6.9em); }
80.67% { transform: translateY(-6.9em); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
90.67% { transform: translateY(-11.5em); }
100% { transform: translateY(-11.5em); }
}
@keyframes txt-rolling-price-change-ones {
0% { transform: translateY(-1.15em); }
14.67% { transform: translateY(-1.15em); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
25.33% { transform: translateY(-2.3em); }
48% { transform: translateY(-2.3em); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
58.67% { transform: translateY(0); }
81.33% { transform: translateY(0); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
92% { transform: translateY(-1.15em); }
100% { transform: translateY(-1.15em); }
}
@keyframes txt-rolling-price-change-chip {
0% { opacity: 0; transform: translateY(0.5em); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
5%, 33.33% { opacity: 1; transform: none; }
36%, 100% { opacity: 0; transform: translateY(-0.5em); }
}
@keyframes txt-rolling-price-change-tint {
13.33% { color: currentColor; }
15.33% { color: var(--up); }
34.67% { color: color-mix(in srgb, var(--up) 0%, currentColor); }
46.67% { color: currentColor; }
48.67% { color: var(--down); }
68% { color: color-mix(in srgb, var(--down) 0%, currentColor); }
80% { color: currentColor; }
82% { color: var(--up); }
101.33% { color: color-mix(in srgb, var(--up) 0%, currentColor); }
}
@media (prefers-reduced-motion: reduce) {
.txt-rolling-price-change, .txt-rolling-price-change *, .txt-rolling-price-change *::before, .txt-rolling-price-change *::after { animation: none !important; }
.txt-rolling-price-change-chips > span:last-child { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.txt-rolling-price-change, .txt-rolling-price-change *, .txt-rolling-price-change::before, .txt-rolling-price-change::after, .txt-rolling-price-change *::before, .txt-rolling-price-change *::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.