how do i make a sale banner line blink with html and css

if you want a hard on/off blink rather than a fade, add steps: animation: blink 1s steps(1, end) infinite; and i'd stop it after a few cycles (animation-iteration-count: 5) instead of infinite. after a few seconds nobody notices it anyway, it just becomes noise.

the old blink tag is dead, use a keyframe animation: .blink { animation: blink 1.2s ease-in-out infinite; } @keyframes blink { 50% { opacity: 0.2; } } then class=blink on the span. keep it slowish, fast flashing is annoying and can be an accessibility problem. I'd also wrap it in a prefers-reduced-motion media query so people who turn animations off get a static line.