The element's opacity flickers irregularly like a failing light.
Use for
Neon and glitch effects
Add a "Flicker" effect (also called flickering) to [where].
The element should stay steady most of the time and dim in short, uneven stutters like a failing neon light.
Keep the timing irregular rather than evenly spaced, avoid rapid full-strength flashing, and stop it for users who prefer reduced motion.
The element blinks by quickly toggling its opacity.
Use for
Alerting to new content
Add a "Flash" attention effect (also called blink) to [where].
The element should blink by quickly fading out and back in twice, then stay fully visible.
Play it once rather than as an endless blink, and skip it for users who prefer reduced motion, since fast blinking can be uncomfortable.
Also called Neon Sign Flicker, Glowing Text
Text glows like a neon tube and flickers or pulses.
Use for
Nightlife, gaming themes
Add a "Neon Glow Text" effect (also called a neon sign flicker or glowing text) to [where].
The text should glow like a neon tube with a soft, steady light, and now and then flicker off briefly like a real sign.
Keep the flicker occasional rather than rapid, since fast flashing can harm some users, and keep the glow steady for users who prefer reduced motion.
The element goes from fully transparent to fully opaque in place, or the reverse when leaving.
Use for
Modals, toasts, page content appearing
Add a "Fade In / Fade Out" animation (also called fade) to [where].
The element should go from fully transparent to fully visible in place when it appears, and fade back out the same way when it leaves: gentle, with no movement or scaling.
Once it has faded out, make sure it can no longer be clicked or reached with the keyboard, and switch instantly when the user prefers reduced motion (prefers-reduced-motion).