demo · v138
Symmetry Animator
No JavaScript layout math. abs() folds a linear sweep into a symmetric bounce; sign() flips a visual indicator when the direction reverses — all in CSS custom property arithmetic.
--t: 0.00 | abs(--t): 0.00 | sign(--t): 0
abs(--t) — symmetric horizontal bounce
abs(--t) — symmetric size pulse
sign(--t) — direction arrow flips at center
→
@property --t {
syntax: '';
inherits: true;
initial-value: 0;
}
@keyframes sweep {
0% { --t: -1; }
100% { --t: 1; }
}
/* abs() folds the [-1, 1] sweep into a V-shape bounce */
.ball {
animation: sweep 1.4s linear infinite alternate;
left: calc((100% - 40px) * abs(var(--t) * 0.5 + 0.5));
}
/* sign() returns -1, 0, or +1 — here it flips a rotation */
.arrow {
rotate: calc((1 - sign(var(--t))) * 90deg);
}