Attention
Heartbeat Animation
A double-beat pulse for likes, favourites and live counters.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.heartbeat {
transform: translate3d(208px, 128px, 0);
width: 64px;
height: 64px;
background: #22d3ee;
border-radius: 999px;
animation: heartbeat-anim 1200ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes heartbeat-anim {
0% {
transform: translate3d(208px, 128px, 0);
animation-timing-function: ease-in-out;
}
14% {
transform: translate3d(208px, 128px, 0) scale(1.2, 1.2);
animation-timing-function: ease-in-out;
}
28% {
transform: translate3d(208px, 128px, 0);
animation-timing-function: ease-in-out;
}
42% {
transform: translate3d(208px, 128px, 0) scale(1.2, 1.2);
animation-timing-function: ease-in-out;
}
70% {
transform: translate3d(208px, 128px, 0);
}
100% {
transform: translate3d(208px, 128px, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.heartbeat {
animation: none;
transition: none;
}
}Why it is built this way
Two beats close together with a longer rest is what makes it read as a heartbeat rather than a pulse. The rest is most of the timeline — the pause is doing as much work as the beats.
What it animates
2 properties across 1 CSS declaration. The bar shows when each one is moving.
transformtransformWhat it costs to run
Scale x and scale y 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 1.20s across 12 keyframe stops, with every property moving over the same window.
2 curves in play — Ease In Out and Linear on a plain box. Different properties easing differently is how a movement gets texture: the eye reads the mismatch as weight rather than as a mistake.
Accessibility
Nothing here hides content — scale x and scale y move over 1.20s 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.