[data-hero-bar] { --wipe: 0%; -webkit-mask-image: linear-gradient(to left, transparent 0%, black 15%, black 100%); mask-image: linear-gradient(to left, transparent 0%, black 15%, black 100%); -webkit-mask-size: 120% 100%; mask-size: 120% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: var(--wipe) center; mask-position: var(--wipe) center; } @media (prefers-reduced-motion: reduce) { [data-hero-bar] { -webkit-mask-image: none; mask-image: none; } }