Attention
Breathe Animation
A slow swell and settle, like breathing.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.breathe {
transform: translate3d(208px, 128px, 0);
width: 64px;
height: 64px;
background: #22d3ee;
border-radius: 999px;
animation: breathe-anim 2600ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes breathe-anim {
0% {
transform: translate3d(208px, 128px, 0);
opacity: 0.85;
animation-timing-function: ease-in-out;
}
50% {
transform: translate3d(208px, 128px, 0) scale(1.05, 1.05);
opacity: 1;
animation-timing-function: ease-in-out;
}
100% {
transform: translate3d(208px, 128px, 0);
opacity: 0.85;
}
}
@media (prefers-reduced-motion: reduce) {
.breathe {
animation: none;
transition: none;
}
}Why it is built this way
Long and shallow on purpose. An idle animation should be noticeable only when you look directly at it — the moment it competes with reading, it is too fast or too large.
What it animates
3 properties across 2 CSS declarations. The bar shows when each one is moving.
opacitytransformtransformWhat it costs to run
Opacity, scale x and scale y are 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 2.60s across 9 keyframe stops, with every property moving over the same window.
One curve throughout: Ease In Out on a plain box. 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
Nothing here hides content — opacity, scale x and scale y move over 2.60s and the element is visible throughout. The exported prefers-reduced-motion guard still silences it, which matters most for the looping ones: motion that never stops is the kind that makes people feel unwell.