Attention
Flash Animation
Blinks in and out to demand attention.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.flash {
transform: translate3d(90px, 138px, 0);
width: 300px;
height: 44px;
background: #00000000;
color: #e7e9ee;
font-size: 32px;
font-weight: 700;
animation: flash-anim 900ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes flash-anim {
0% {
opacity: 1;
animation-timing-function: ease-in-out;
}
25% {
opacity: 0.15;
animation-timing-function: ease-in-out;
}
50% {
opacity: 1;
animation-timing-function: ease-in-out;
}
75% {
opacity: 0.15;
animation-timing-function: ease-in-out;
}
100% {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.flash {
animation: none;
transition: none;
}
}Why it is built this way
Worth a warning: content flashing more than three times a second can trigger seizures and fails WCAG 2.3.1. This runs well under that, and the editor flags any timing that does not.
What it animates
1 property across 1 CSS declaration. The bar shows when each one is moving.
opacityWhat it costs to run
Opacity is handled by the compositor: no layout, no repaint, and the work can run off the main thread. This is the cheap end of CSS animation, which is why it stays smooth on a slow phone where other properties will not.
It runs for 0.90s across 5 keyframe stops, with every property moving over the same window.
One curve throughout: Ease In Out on a text. Keeping a single easing across every property is what makes a multi-property animation read as one movement rather than several things happening at once.
Accessibility
This one flashes fast enough to be worth a warning. WCAG 2.3.1 asks that nothing flash more than three times a second, because rapid opacity swings can trigger photosensitive seizures. The exported CSS carries a prefers-reduced-motion guard — do not remove it here, and think hard before putting this near text somebody has to read.