Flash

A CSS keyframe flash animation — rapid opacity blinks for alerts, notifications, and attention-grabbing UI moments.

Flash

Widely supported

animationno-js

Quick implementation

.flash {
  animation: flash 1s ease-in-out;
}

@keyframes flash {
  0%, 100% { opacity: 1; }
  10%, 30%, 50%, 70%, 90% { opacity: 1; }
  20%, 40%, 60%, 80% { opacity: 0.2; }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .flash {
    animation: none;
  }
}

Prompt this to your LLM

Includes role, constraints, variants, and edge cases to handle.

You are a senior frontend engineer building attention-grabbing UI components.

Goal: A CSS flash animation that blinks an element to draw attention — useful for alerts, notifications, and important state changes.

Technical constraints:
- Use keyframes with opacity transitions (no transform, no filter).
- Alternating opacity values: 1 → 0.2 → 1 in rapid succession.
- Total animation duration: 1s, ease-in-out timing.
- 5 flashes: opacity drops at 20%, 40%, 60%, 80%, returns to 1.
- Use opacity for GPU compositing — no layout thrashing.
- Include @media (prefers-reduced-motion: reduce) to disable the animation.
- Provide a utility class (.flash) that can be triggered via JS.

Variations:
A) Continuous flash (animation-iteration-count: infinite).
B) Single flash sequence (default behavior).
C) Slower pace (2s duration).
D) Faster pace (0.5s duration).

Edge cases to handle:
- Disabled state: stop animation and reduce opacity.
- Accessibility: respect prefers-reduced-motion.
- Performance: only animate opacity, not layout properties.
- Screen readers: ensure the element has appropriate aria-live if used for dynamic content.

Return HTML + CSS.

Why this matters

The flash animation is a classic attention-seeking pattern used in alert badges, notification dots, and error states. CSS keyframes with opacity provide a performant, pure-CSS solution that requires no JavaScript for the animation logic itself — just a class toggle to trigger it.

The logic

A @keyframes rule defines the animation sequence. Opacity alternates between 1 (visible) and 0.2 (dimmed) at specific percentages. Five blinks occur within 1 second. The ease-in-out timing function provides smooth transitions between states.

Accessibility & performance

Opacity-only animations are performant — they composit on the GPU without triggering layout recalculations. Always include a @media (prefers-reduced-motion: reduce) rule to disable the animation for users who need it. For dynamic alerts, consider adding aria-live to ensure screen readers announce the change.

Tip: Use animation-fill-mode: forwards to keep the element visible after the animation completes (set final keyframe to opacity: 1).